深刻理解JS的作用域链

作用域链的概念对理解闭包至关重要

先来一个例子

var scope = "global";
function CheckScope(){
    var scope = "local";
    return scope;
}
CheckScope();
//结果为local

1.当代码进入Global Execution Context后,会创建Global VO


2.当代码执行到CheckScope();语句的时候,进入CheckScope Execution Context;
根据上一篇文章<执行环境>的介绍,这里会创建CheckScope VO,
并设置CheckScope Execution Context的[[Scope]]属性

作用域链的创建规则

当定义一个函数时

在函数内部会创建一个[[Scope]]属性,这个属性指向一条作用域链。
也就是说在定义函数时,会事先创建一条作用域链。
这从chrome中可以看出来,如下图所示,<function scope>即为我说的[[Scope]]属性


而这条事先就创建好的作用域链的创建规则也是很重要的,有以下几点:

  • JS中只有两种类型的作用域:全局作用域、函数作用域,所以在作用域链上的对象,只可能是window对象或者函数执行环境所对应的变量对象,但是with语句是一个例外,其可以临时在作用域链的前端临时增加一个普通对象
var o = {
    bruceZhou: 'bruceZhou',
    fn: function(){
        console.log(fn)
        console.log(bruceZhou);
    }
}
o.fn();
//ERROR报错
//因为在执行匿名函数时,其作用域链为匿名函数所对应的变量对象--->window对象
//所以会找不到fn和bruceZhou的定义

//最重要的是其作用域链不包括对象o,对象o只负责保存fn
//在JS中只有全局作用域、函数作用域,并没有对象作用域这一说
//如果要在fn内部访问对象o,可以引用this或者使用with语句
  • 一个函数被定义时,在确定其[[Scope]]属性时,JS解释器执行如下的规则:从函数内部向外遍历,每当碰到一个function {...},就将其对应的变量对象添加至作用域链中去,如此下去,直到window对象,然后将作用域链的引用赋给[[Scope]]属性

当调用这个函数时

解释器会先创建一个新的变量对象,
然后将这个变量对象的添加至上面那个作用域链的栈顶,
此后将函数内部的[[Scope]]属性直接赋值给执行环境的[[Scope]]属性

当函数执行完之后

对应的函数执行环境会被销毁,
但该执行函数所对应的变量对象却不一定会被销毁,
这时就会发生闭包现象。

作用域链的数据结构

作用域即变量对象,作用域链是一个由变量对象组成的带头结点的单向链表,其主要作用就是用来进行变量查找。而[[Scope]]属性是一个指向这个链表头结点的指针。

带头结点的单链表

1.结点的存储结构(用C语言来表示)

typedef struct _tNODE{
    VariableObject *pVO;
    //指向一个变量对象,即指向一个作用域
    struct _tNODE *next;
    //指向下一个结点
}tNODE, *tPNODE;

2.猜想
我猜想作用域链的数据大概如下,是一个链栈,只是为了说明问题,不保证准确性,当然我也是不会为它负责的。


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

推荐阅读更多精彩内容