AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

[JavaScript]JavaScript高级之词法作用域和作用域链

2017-11-08 1095
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

主要内容：

  • 分析JavaScript的词法作用域的含义
  • 解析变量的作用域链
  • 变量名提升时什么

一、关于块级作用域

        说到JavaScript的变量作用域，与咱们平时使用的类C语言不同. 
例如C#中下面代码：
  1. static void Main(string[] args)
  2. {
  3.         if(true)
  4.         {
  5.                 int num = 10;
  6.         }
  7.         System.Console.WriteLine(num);
  8. }
复制代码


这段代码如果进行编译，是无法通过的，因为"当前上下文中不存在名称num". 因为这里
变量的作用域是由花括号限定的，称为块级作用域. 

        在块级作用域下，所有的变量都在定义的花括号内，从定义开始到花括号结束这个
范围内可以使用. 出了这个范围就无法访问. 也就是说代码
  1. if(true)
  2. {
  3.         int num = 10;
  4.         System.Console.WriteLine(num);
  5. }
复制代码
这里可以访问，因为变量的定义与使用在同一个花括号内.

        但是在JavaScript中就不一样，JavaScript中没有块级作用域的概念. 

二、JavaScript中的作用域

        在JavaScript中，下面代码：
  1. if(true) {
  2.         var num = 10;
  3. }
  4. alert(num);
复制代码

运行的结果是弹窗10. 那么在JavaScript中变量的作用范围是怎么限定的呢？

2.1 函数限定变量作用域
        在JavaScript中，只有函数可以限定一个变量的作用范围. 什么意思呢？
就是说，在JavaScript中，在函数里面定义的变量，可以在函数里面被访问，但是在函数外
无法访问. 看如下代码：
  1. var func = function() {
  2.         var num = 10;
  3. };
  4. try {
  5.         alert(num);
  6. } catch ( e ) {
  7.         alert( e );
  8. }
复制代码

这段代码运行时，会抛出一个异常，变量num没有定义. 也就是说，定义在函数中的变量无法
在函数外使用，当然在函数内可以随意的使用， 即使在赋值之前. 看下面代码：
  1. var func = function() {
  2.         alert(num);
  3.         var num = 10;
  4.         alert(num);
  5. };
  6. try {
  7.         func();
  8. } catch ( e ) {
  9.         alert( e );
  10. }
复制代码

这段代码运行后，不会抛出错误，弹窗两次，分别是 undefined 和 10(至于为什么，下文解释). 

        从这里可以看得出，变量只有在函数中可以被访问. 同理在该函数中的函数也可以访问. 

2.2 子域访问父域
        
        前面说了，函数可以限定变量的作用域，那么在函数中的函数就成为该作用域的子域. 在子域
中的代码可以访问到父域中的变量. 看下面代码：
  1. var func = function() {
  2.         var num = 10;
  3.         var sub_func = function() {
  4.                 alert(num);
  5.         };
  6.         sub_func();
  7. };
  8. func();
复制代码

这段代码执行得到的结果就是 10. 可以看到上文所说的变量访问情况. 但是在子域中访问父域的
代码也是有条件的. 如下面代码：
  1. var func = function() {
  2.         var num = 10;
  3.         var sub_func = function() {
  4.                 var num = 20;
  5.                 alert(num);
  6.         };
  7.         sub_func();
  8. };
  9. func();
复制代码

这段代码比前面就多了一个"var num = 20;"，这句代码在子域中，那么子域访问父域的情况就发
生了变化，这段代码打印的结果是 20. 即此时子域访问的num是子域中的变量，而不是父域中的. 

        由此可见访问有一定规则可言. 在JavaScript中使用变量，JavaScript解释器首先在当前作
用域中搜索是否有该变量的定义，如果有，就是用这个变量；如果没有就到父域中寻找该变量. 
以此类推，直到最顶级作用域，仍然没有找到就抛出异常"变量未定义". 看下面代码：
  1. (function() {
  2.         var num = 10;
  3.         (function() {
  4.                 var num = 20;
  5.                 (function(){
  6.                         alert(num);
  7.                 })()
  8.         })();
  9. })();
复制代码

这段代码执行后打印出20. 如果将"var num = 20;"去掉，那么打印的就是10. 同样，如果再去掉
"var num = 10"，那么就会出现未定义的错误. 


三、作用域链

        有了JavaScript的作用域的划分，那么可以将JavaScript的访问作用域连成一个链式树状结构. 
JavaScript的作用域链一旦能清晰的了解，那么对于JavaScript的变量与闭包就是非常清晰的了. 
下面采用绘图的办法，绘制作用域链. 

3.1 绘制规则：
        1) 作用域链就是对象的数组
        2) 全部script是0级链，每个对象占一个位置
        3) 凡是看到函数延伸一个链出来，一级级展开
        4) 访问首先看当前函数，如果没有定义往上一级链检查
        5) 如此往复，直到0级链

3.2 举例
        看下面代码：
  1. var num = 10;
  2. var func1 = function() {
  3.         var num = 20;
  4.         var func2 = function() {
  5.                 var num = 30;
  6.                 alert(num);
  7.         };
  8.         func2();
  9. };
  10. var func2 = function() {
  11.         var num = 20;
  12.         var func3 = function() {
  13.                 alert(num);
  14.         };
  15.         func3();
  16. };
  17. func1();
  18. 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: [ ] };
        -> 将上面代码整合一下，就可以将作用域链表示为：
                // 这里用伪代码描述
                var link = [ // 0级链
                        num,
                        { func1 : [        // 第一条1级链
                                                num,
                                                { func2 : [        // 2级链
                                                                        num
                                                                ] }
                                        ]},
                        { func2 : [        // 第二条1级链
                                                num,
                                                { func3 : [] }
                                        ]}
                ];
        -> 用图像表示为
 

                图：01_01作用域链.gif
        
        注意：将链式的图用js代码表现出来，再有高亮显示的时候就非常清晰了. 

有了这个作用域链的图，那么就可以非常清晰的了解访问变量是如何进行的：
在需要使用变量时，首先在当前的链上寻找变量，如果找到就直接使用，不会
向上再找；如果没有找到，那么就向上一级作用域链寻找，直到0级作用域链. 

        如果能非常清晰的确定变量所属的作用域链的级别，那么在分析JavaScript
代码与使用闭包等高级JavaScript特性的时候就会非常容易(至少我是这样哦).


四、变量名提升与函数名提升

        有了作用域链与变量的访问规则，那么就有一个非常棘手的问题. 先看下面
的JavaScript代码:
  1. var num = 10;
  2. var func = function() {
  3.         alert(num);
  4.         var num = 20;
  5.         alert(num);
  6. };
  7. func();
复制代码

执行结果会是什么呢？你可以想一想，我先不揭晓答案. 

        先来分析一下这段代码. 
        这段代码中有一条0级作用域链，里面有成员num和func. 在func下是1级作用
域链，里面有成员num. 因此在调用函数func的时候，就会检测到在当前作用域中
变量num是定义过的，所以就会使用这个变量. 但是此时num并没有赋值，因为代
码是从上往下运行的. 因此第一次打印的是 undefined，而第二次打印的便是20. 
        你答对了么？

        像这样将代码定义在后面，而在前面使用的情况在JavaScript中也是常见的
问题. 这时就好像变量在一开始就定义了一样，结果就如同下面代码：
  1. var num = 10;
  2. var func = function() {
  3.         var num;        // 感觉就是这里已经定义了，但是没有赋值一样
  4.         alert(num);
  5.         var num = 20;
  6.         alert(num);
  7. };
  8. func();
复制代码

那么这个现象常常称为变量名提升. 同样也有函数名提升这一说. 如下面代码：
  1. var func = function() {
  2.         alert("调用外面的函数");
  3. };
  4. var foo = function() {
  5.         func();
  6.         var func = function() {
  7.                 alert("调用内部的函数");
  8.         };
  9.         func();
  10. };
复制代码

好了，这段代码结果如何？或则应该有什么不一样，我先不说没留着读者思考吧!
下一篇再做解答. 

        由于有了这些不同，因此在实际开发的时候，推荐将变量都写在开始的地方，
也就是在函数的开头将变量就定义好，类似于C语言的规定一样. 这个在js库中也
是这么完成的，如jQuery等. 

五、小结

        好了这篇文章主要是说明JavaScript的词法作用域是怎么一回事儿，以及解释
如何分析作用域链，和变量的访问情况，最后留再一个练习收尾吧！！！

        看下面代码执行结果是什么：
  1. if(! "a" in window) {
  2.         var a = "定义变量";
  3. }
  4. alert(a);
复制代码















本文转蓬莱仙羽51CTO博客，原文链接：http://blog.51cto.com/dingxiaowei/1366184，如需转载请自行联系原作者
文章标签：
JavaScript
前端开发
自然语言处理
C语言
C#
关键词：
JavaScript词法
JavaScript作用域
JavaScript作用域作用域链
JavaScript作用域链
JavaScript词法作用域
技术小美
目录
相关文章
大树营养快线
|
1月前
|
JavaScript 前端开发
js的作用域作用域链
【10月更文挑战第29天】理解JavaScript的作用域和作用域链对于正确理解变量的访问和生命周期、避免变量命名冲突以及编写高质量的JavaScript代码都具有重要意义。在实际开发中，需要合理地利用作用域和作用域链来组织代码结构，提高代码的可读性和可维护性。
大树营养快线
41 5
进步`于辰
|
1月前
|
自然语言处理 JavaScript 前端开发
[JS]作用域的“生产者”——词法作用域
本文介绍了JavaScript中的作用域模型与作用域，包括词法作用域和动态作用域的区别，以及全局作用域、函数作用域和块级作用域的特点。通过具体示例详细解析了变量提升、块级作用域中的暂时性死区等问题，并探讨了如何在循环中使用`var`和`let`的不同效果。最后，介绍了两种可以“欺骗”词法作用域的方法：`eval(str)`和`with(obj)`。文章结合了多位博主的总结，帮助读者更快速、便捷地掌握这些知识点。
进步`于辰
35 2
[JS]作用域的“生产者”——词法作用域
大树营养快线
|
1月前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同？
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念，但由于它们所属的语言和应用场景不同，其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
大树营养快线
59 14
大树营养快线
|
1月前
|
JavaScript 前端开发
如何在 JavaScript 中实现块级作用域？
【10月更文挑战第29天】通过使用 `let`、`const` 关键字、立即执行函数表达式以及模块模式等方法，可以在JavaScript中有效地实现块级作用域，更好地控制变量的生命周期和访问权限，提高代码的可维护性和可读性。
大树营养快线
32 6
快乐就是哈哈哈
|
1月前
|
JavaScript 前端开发
javascript的作用域
【10月更文挑战第19天javascript的作用域
快乐就是哈哈哈
38 14
游客44yag4ft7nckq
|
2月前
|
JavaScript 前端开发
JavaScript 作用域
JavaScript 作用域是指程序中可访问的变量、对象和函数的集合。它分为函数作用域和局部作用域。函数作用域内的变量仅在函数内部可见，而全局作用域的变量在整个网页中均可访问。局部变量在函数执行完毕后会被销毁，而全局变量则在整个脚本生命周期中都存在。未使用 `var` 关键字声明的变量默认为全局变量。
游客44yag4ft7nckq
17 2
Li370234940
|
2月前
|
JavaScript 前端开发
js作用域
js作用域
Li370234940
18 1
游客j4mujezz7vm7y
|
3月前
|
JavaScript 前端开发
js 变量作用域与解构赋值| 22
js 变量作用域与解构赋值| 22
游客j4mujezz7vm7y
35 3
周一同学Zelina
|
3月前
|
缓存 JavaScript 前端开发
了解js基础知识中的作用域和闭包以及闭包的一些应用场景，浅析函数柯里化
该文章详细讲解了JavaScript中的作用域、闭包概念及其应用场景，并简要分析了函数柯里化的使用。
周一同学Zelina
33 0
了解js基础知识中的作用域和闭包以及闭包的一些应用场景，浅析函数柯里化
众所周知
|
7月前
|
JavaScript 前端开发
js变量的作用域、作用域链、数据类型和转换应用案例
【4月更文挑战第27天】JavaScript 中变量有全局和局部作用域，全局变量在所有地方可访问，局部变量只限其定义的代码块。作用域链允许变量在当前块未定义时向上搜索父级作用域。语言支持多种数据类型，如字符串、数字、布尔值，可通过 `typeof` 检查类型。转换数据类型用 `parseInt` 或 `parseFloat`，将字符串转为数值。
众所周知
44 1