如何理解js中作用域和作用域链

大家好,我是IT修真院成都分院第8期的学员,一枚正直纯洁善良的WEB前端程序员。

今天给大家分享一下js中作用域和作用域链的相关问题。


一、作用域的概念

任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。在JavaScript中,变量的作用域有全局作用域和局部作用域两种。

全局作用域(Global Scope):

在代码中任何地方都能访问到的对象拥有全局作用域,一般来说一下几种情形拥有全局作用域:

最外层函数和在最外层函数外面定义的变量拥有全局作用域,例如:

var aName="6得飞起";

function doSomething(){

var bName="步得步说";

function innerSay(){

alert(bName);

}

innerSay();

}

alert(aName);//6得飞起

alert(bName);//脚本错误

doSomething();//步得步说

innerSay()//脚本错误

所有末定义直接赋值的变量自动声明为拥有全局作用域,例如:

function doSomething(){

bName="我爱红色毛爷爷";

alert(bName)

}

alert(bName);//我爱红色毛爷爷


局部作用域(Local Scope)

和全局作用域相反,局部作用域一般只在固定的代码片段内可访问到,最常见的例如函数内部,所有在一些地方也会看到有人把这种作用域成为函数作用域。

例如下列代码中的bName和函数innerSay都只拥有局部作用域:

function doSomething(){

varbName="我今天开会";

function innerSay(){

alert(bName);

}

innerSay();

}

alert(bName);//脚本错误innerSay();//脚本错误

二、作用域链(Scope Chain)

有了JavaScript的作用域的划分,那么可以将JavaScript的访问作用域连成一个链式树状结构.

JavaScript的作用域链一旦能清晰的了解,那么对于JavaScript的变量与闭包就是非常清晰的了.

下面采用绘图的办法,绘制作用域链.

绘制规则:

1) 作用域链就是对象的数组

2) 全部script是0级链,每个对象占一个位置

3) 凡是看到函数延伸一个链出来,一级级展开

4) 访问首先看当前函数,如果没有定义往上一级链检查

5) 如此往复,直到0级链

先看一段代码:

var num =10;

var func1 =function(){

var num =20;

var func2 =function(){

var num =30;

alert(num);

};

func2();

};

var func2 =function(){

varnum =20;

varfunc3 =function(){

alert(num);

};

func3();

};

func1();

func2();

下面分析一下这段代码:

-> 首先整段代码是一个全局作用域,可以标记为0级作用域链,那么久有一个数组

var link_0 = [ num, func1, func2 ];// 这里用伪代码描述

-> 在这里func1和func2都是函数,因此引出两条1级作用域链,分别为

var link_1 = { func1: [ num, func2 ] };// 这里用伪代码描述

var link_1 = { func2: [ num, func3 ] };// 这里用伪代码描述

-> 第一条1级链衍生出2级链

var link_2 = { func2: [ num ] };// 这里用伪代码描述

-> 第二条1级链中没有定义变量,是一个空链,就表示为

var link_2 = { func3: [ ] };

最终可以将作用域链表示为

// 这里用伪代码描述varlink = [// 0级链num,

{ func1 : [// 第一条1级链num,

{ func2 : [// 2级链num] }

]},

{ func2 : [// 第二条1级链num,

{ func3 : [] }

]}

];

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

推荐阅读更多精彩内容

  • 大家好,我是IT修真院郑州分院第四期的学员王相博,一枚正直、纯洁、善良的前端程序员 今天给大家分享一下,修真院官网...
    More_ce0d阅读 851评论 5 5
  • 今天是我坚持写作的第六天,我的财富自由账户存款已经有了5000元,今天再次存入1000元,每天向账户内存入1000...
    学习与成长杜彦龙阅读 175评论 0 0
  • 首先自己要相信你想要什么,心里想什么就会来什么。一切就是自己想像而来,所以要专心想像自己已经成为你想像的人。把...
    蓉媛阅读 277评论 0 0