本文实例讲述了JavaScript词法作用域与作用域链。分享给大家供大家参考,具体如下:
一、作用域
域表示的就是范围,即作用域,就是一个名字在什么地方可以使用,什么时候不能使用。想了解更多关于作用域的问题推荐阅读《你不知道的JavaScript上卷》第一章(或第一部分),从编译原理的角度说明什么是作用域。概括的说作用域就是一套设计良好的规则来存储变量,并且之后可以方便地找到这些变量。
1.1 块级作用域
在C、Java、C#等编程语言中,下面的语法报错(伪代码)
{ var num = 123; { console.log( num ); // num => 123 } } console.log( num ); //报错
1.2 JS的词法作用域
所谓的词法(代码)作用域,就是代码在编写过程中体现出来的作用范围,代码一旦写好,不用执行,作用范围就已经确定好了,这个就是所谓的词法作用域。
在JS中词法作用域的规则:
- 函数允许访问函数外部的数据
- 整个代码结构中只有函数可以限定作用域
- 作用规则首先使用提升规则分析
- 如果当前作用域中有了名字了,就不考虑外面的名字
例子1:
var num = 123; function foo(){ console.log( num ); } foo(); //123
例子2:
if( false ){ var num = 123; } console.log( num ); //undefined
例子3:
var num = 123; function foo () { var num = 456; function func(){ console.log( num ); } func(); } foo(); //456
二、作用域链
只有函数才能制造作用域结构,那么只要是代码,至少有一个作用域,即全局作用域。
凡是代码中有函数,那么这个函数就构成另一个作用域。如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域,那么将这样的所有作用域列出来,可以有一个结构:函数内指向函数外的链式结构
例如:
function f1() { function f2() { } } var num = 456; function f3() { function f4() { } }
作用域链结构与DOM树结构很相似.
2.1 绘制作用域链
步骤:
- 看整个全局是一条链,即顶级链,记为0级链
- 看全局作用域中有什么成员声明,就以方格的形式绘制到0级链上
- 再找函数,只有函数可以限制作用域,因此从函数中引出新链,标记为1级链
- 然后在每一个1级链中再次往复刚才的行为
2.2 变量的访问(搜索)规则
- 首先看变量在第几条链上,在该链上看是否有变量的定义与赋值,如果有直接使用
- 如果没有到上一级链上找( n - 1 级链),如果有直接使用,停止继续查找。
- 如果还没有在此往上找… 直到全局链(0级),还没有就是is not defined
- 注意,切记:同级的链不可混合查找
绘制如下程序的作用域链
function f1() { var num = 123; function f2() { console.log( num ); } f2(); } var num = 456; f1(); //123
函数f1 和变量 num=456, 在0级链,而f1下又可以展开1级链,1级链上有num=123和函数f2。程序f1()调用进入左边1级链,而f1中又调用了f2函数,f2函数中console.log(num)
可以看作在2级链,此时,程序会向这一条链向上查找,首先2级链没有num,向上到达1级链,刚好1级链上有num=123,所以就直接使用123,程序最后的结果就是打印123.
2.3 如何分析代码
- 在分析代码的时候切记从代码的运行角度上来分析,如果代码给变量赋值了,一定要标记到图中
- 如果代码比较复杂,可以在图中表示代码的内容,有时候还要将原型图与作用域图结合起来分析
分析如下代码:
var num = 123; function f1() { console.log( num ); } function f2(){ var num = 456; f1(); } f2(); //123
作用域链图:
首先把num=123,函数f1,函数f2画在0级链上。f1中只有一句console,画出一条1级链,f2也下画出1级链,链上有num=456和函数调用语句f1();
调用f2(),进入f2函数的作用域链,而在f2中又调用了f1函数,程序进入f1的作用域链,所以console.log(num)
会在此链上查找是否存在num,没有,继续向上一级链查找,刚好在0级链上找到了num=123,所以f1函数中的console.log(num)
就是123.
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新动态
- 周杰伦《叶惠美》[WAV分轨][3.6G]
- 滚石群星.2000-超级BANDBANDBAND【滚石】【WAV+CUE】
- 群星.2016-民谣地图·拾众而歌【众乐纪】【FLAC分轨】
- 群星.1994-大烂片VOL.1--2【派森】【WAV+CUE】
- 群星《中国绝佳经典》4CD[WAV分轨][2.5G]
- 叶倩文《华纳最出色系列》3CD[WAV+CUE][1.8G]
- 草蜢 《忘情森巴舞(国语)》[WAV+CUE][472M]
- 张国荣.1995-宠爱(2014年K2HD限量版)【滚石】【WAV+CUE】
- 胡立伟-胡立伟影视音乐系列【FLAC】
- 群星.1986-新格名曲精丫新格】【WAV+CUE】
- 群星.1986-新格名曲精选-歌3【新格】【WAV+CUE】
- 妙音唱片净化心灵·归还真我群星-无尘系列6CDWAV+CUE
- 孙协志2004-胜立精选(闽南语)[大旗][WAV+CUE]
- 徐若瑄《先听我说完》[320K/MP3][93.78MB]
- 徐若瑄《先听我说完》[FLAC/分轨][498.77MB]