JS链知多少?

“链”这个概念也算是JS的一大特色了,这里总结了常见的JS链相关概念,资料主要还是来自于js权威指南这本书,再加上自己的一点理解,欢迎补充。

js作用域链

简单来说就是一个对象列表。那么这个对象列表是怎么来的呢?每次调用js函数时,编译器环境都会为这个js函数创建一个新的对象(上下文对象)来保存局部变量,并且把这个新的对象添加到作用域链中。当函数返回时,就从作用域链中将绑定变量的对象移除。

js权威指南中的一段话很好的诠释这个概念,摘录如下:

在js的顶层代码中(即不包含在任何函数定义内的代码),作用域链由一个全局对象组成。在不包含嵌套的函数体内,作用域链上有两个对象,第一个是定义函数参数和局部变量的对象(上下文对象),第二个是全局对象。在一个嵌套函数体内,作用域链上至少有三个对象。
对象作用域链创建规则,当定义一个函数时,它实际上保存一个作用域链。当调用这个函数时,它创建一个新的对象来存储它的局部变量,并将这个对象添加至保存的那个作用域链上,同时创建一个新的更长的表示函数调用作用域的"链"。
对于嵌套函数,每次调用外部函数时,内部函数会重新定义一遍。因此每次调用外部函数时,作用域链都不同。每次调用外部函数时,虽然内部嵌套函数的代码没变,但是关联这段代码的作用域链不相同了,所以内部函数也有差别,做永远链不同了。

js链式调用

这个就很容易理解了,使用过jQuery的人应该都知道链式调用。方法的链式调用又称为方法链。如果一个对象有多个方法属性,并且每个方法属性的返回值都是这个对象,那么这个对象的方法属性就可以链式调用
例如:

    //支持方法链式调用的对象
    var obj = {
    
        "first":function(){
                    console.log("first");
                    return this;
                },
        "second":function(){
                    console.log("second");
                    return this;
                }
        }
    //方法链调用,在控制台输出:first    second
    obj.first().second()

最典型的例子就是jQuery库,jQuery库中绝大多数方法都支持链式调用。关于如何创建js对象,请参见这篇文章

js原型链

理解原型链概念之前必须先理解原型的概念。

原型:是一个可以让其他对象继承属性的对象。没有原型的对象很少,例如Object.prototype。普通对象都有原型,函数对象都有一个继承自Object.prototype的原型,其中函数对象的原型通过prototype属性获取,普通对象的原型通过__proto__属性访问(只有标准浏览器支持)。

例子:var date = new Date() // Date.prototype就是Date的原型,date从原型中继承Date属性

接着上面的例子,date对象的属性继承自Date.prototypeDate.prototype的属性又继承自Object.prototype,所以date对象的属性同时继承Date.prototypeObject.prototype,此时的Date.prototypeObject.prototype就是原型链。

下面的代码可以证明date的属性继承自Date.prototype,Date.prototype的属性继承自Object.prototype

date instanceof Date  //true
Date.prototype instanceof Object //true
date instanceof Object  //true

date instanceof Date.prototype.constructor  //true
Date.prototype instanceof Object.prototype.constructor   //true
date instanceof Object.prototype.constructor    //true

Object.getPrototypeOf(date) === Date.prototype  //true
Object.getPrototypeOf(Date.prototype) === Object.prototype   //true
Object.getPrototypeOf(date) === Object.prototype    //false

PS: instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性;
Object.getPrototypeOf,用来获取对象的原型,ES5标准推出的方法,用来获取生成对象的类的原型。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,056评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,842评论 2 378
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,938评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,296评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,292评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,413评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,824评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,493评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,686评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,502评论 2 318
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,553评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,281评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,820评论 3 305
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,873评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,109评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,699评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,257评论 2 341

推荐阅读更多精彩内容

  • 1,javascript 基础知识 Array对象 Array对象属性 Arrray对象方法 Date对象 Dat...
    Yuann阅读 887评论 0 1
  • 官方中文版原文链接 感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大...
    HetfieldJoe阅读 2,985评论 4 14
  • 继承 一、混入式继承 二、原型继承 利用原型中的成员可以被和其相关的对象共享这一特性,可以实现继承,这种实现继承的...
    magic_pill阅读 1,047评论 0 3
  • 火越烧越烈,杜子春浑身大汗,依然端坐。师父的话言犹在耳:“不论你看到什么幻象都不可出声,时刻警醒,都是幻...
    山海花开阅读 431评论 0 0
  • 亲子日记第17天,共计167天。晚上接大宝回家,吃过晚饭,大宝就开始写作业。写完语文作业就让我检查并签字...
    馨宝贝之快乐每一天阅读 144评论 0 0