JavaScript作用域链使用介绍

· 教程大全 · 215955

之前写过一篇JavaScript 闭包究竟是什么的文章理解闭包，觉得写得很清晰，可以简单理解闭包产生原因，但看评论都在说了解了作用域链和活动对象才能真正理解闭包，起初不以为然，后来在跟公司同事交流的时候发现作用域和执行环境确实很重要，又很基础，对理解JavaScript闭包很有帮助，所以在写一篇对作用域和执行环境的理解。


作用域


作用域就是变量和函数的可访问范围，控制着变量和函数的可见性与生命周期，在JavaScript中变量的作用域有全局作用域和局部作用域。


单纯的JavaScript作用域还是很好理解的，在一些类C编程语言中花括号内的每一段代码都有各自的作用域，而且变量在声明它们的代码段外是不可见的，称之为块级的作用域，JavaScript容易让初学者误会的地方也在于此，JavaScript并没有块及的作用域，只有函数级作用域：变量在声明它们的函数体及其子函数内是可见的。


变量没有在函数内声明或者声明的时候没有带var就是全局变量，拥有全局作用域，window对象的所有属性拥有全局作用域；在代码任何地方都可以访问，函数内部声明并且以var修饰的变量就是局部变量，只能在函数体内使用，函数的参数虽然没有使用var但仍然是局部变量。


复制代码 代码如下:
var a=3; //全局变量
            function fn(b){ //局部变量
                c=2; //全局变量
                var d=5; //局部变量
                function subFn(){
                    var e=d; //父函数的局部变量对子函数可见
                    for(var i=0;i<3;i++){
                        console.write(i);
                    }
                    alert(i);//3, 在for循环内声明，循环外function内仍然可见，没有块作用域
                }
            }
            alert(c); //在function内声明但不带var修饰，仍然是全局变量


只要是理解了JavaScript没有块作用域，简单的JavaScript作用域很好理解，还有一点儿容易让初学者迷惑的地方是JavaScript变量可函数的与解析或者声明提前，好多种叫法但说的是一件事情，JavaScript虽然是解释执行，但也不是按部就班逐句解释执行的，在真正解释执行之前，JavaScript解释器会预解析代码，将变量、函数声明部分提前解释，这就意味着我们可以在function声明语句之前调用function，这多数人习以为常，但是对于变量的与解析乍一看会很奇怪
复制代码 代码如下:
console.log(a); //undefined
            var a=3;
            console.log(a); //3
            console.log(b); //Uncaught ReferenceError: b is not defined

     上面代码在执行前var a=3; 的声明部分就已经得到预解析（但是不会执行赋值语句），所以第一次的时候会是undefined而不会报错，执行过赋值语句后会得到3，上段代码去掉最后一句和下面代码是一样的效果。
复制代码 代码如下:
var a;
            console.log(a); //undefined
            a=3;
            console.log(a); //3


然而
如果只是这样那么JavaScript作用域问题就很简单了，然而由于函数子函数导致的问题使作用域不止这样简单。大人物登场——执行环境或者说运行期上下文（好土鳖）：执行环境（execution context）定义了变量或函数有权访问的其它数据，决定了它们的各自行为。每个执行环境都有一个与之关联的变量对象（variable object, VO），执行环境中定义的所有变量和函数都会保存在这个对象中，解析器在处理数据的时候就会访问这个内部对象。


全局执行环境是最外层的一个执行环境，在web浏览器中全局执行环境是window对象，因此所有全局变量和函数都是作为window对象的属性和放大创建的。每个函数都有自己的执行环境，当执行流进入一个函数的时候，函数的环境会被推入一个函数栈中，而在函数执行完毕后执行环境出栈并被销毁，保存在其中的所有变量和函数定义随之销毁，控制权返回到之前的执行环境中，全局的执行环境在应用程序退出（浏览器关闭）才会被销毁。


作用域链


当代码在一个环境中执行时，会创建变量对象的一个作用域链（scope chain,不简称sc）来保证对执行环境有权访问的变量和函数的有序访问。作用域第一个对象始终是当前执行代码所在环境的变量对象（VO）


复制代码 代码如下:
function a(x,y){
            var b=x+y;
            return b;
        }
 

在函数a创建的时候它的作用域链填入全局对象,全局对象中有所有全局变量



如果执行环境是函数，那么将其活动对象（activation object, AO）作为作用域链第一个对象，第二个对象是包含环境，下一个是包含环境的包含环境。。。。。
复制代码 代码如下:
function a(x,y){
            var b=x+y;
            return b;
        }
        var tatal=a(5,10);

 这时候 var total=a(5,10);语句的作用域链如下



在函数运行过程中标识符的解析是沿着作用域链一级一级搜索的过程，从第一个对象开始，逐级向后回溯，直到找到同名标识符为止，找到后不再继续遍历，找不到就报错。


再来看看闭包


之前博客曾经总结道：只要存在调用内部函数的可能，JavaScript就需要保留被引用的函数。而且JavaScript运行时需要跟踪引用这个内部函数的所有变量，直到最后一个变量废弃，JavaScript的垃圾收集器才能释放相应的内存空间。回头再看看好理解了很多，父函数定义的变量在子函数的作用域链中，子函数没有被销毁，其作用域链中所有变量和函数就会被维护，不会被销毁。


复制代码 代码如下:
for(var i=0;i<elements.length;i++){
                elements[i].onclick=function(){
                    alert(i);
                }
            }

  这是上篇博客提到过的经典错误，每次element点击alert都是length，这段代码中为element绑定的click事件处理程序的作用域链是这样的



由于内部函数（click事件处理程序时刻有调用可能），所以其作用域链不能被销毁（更别说本例中i在全局作用域中，只能页面卸载是销毁），i的值一直保持for循环执行完后的length值，所以每次触发onclick的时候才会alert length。


复制代码 代码如下:
for(var i=0;i<elements.length;i++){
                (function(n){
                    elements[n].onclick=function(){
                        alert(n);
                    }
                })(i);
            }


为什么这样就行了呢，这时候onclick引用的变量变成了n，而由于立即执行函数的原因，每个onclick函数在作用域链中分别保持着对应的n（0~length-1），这时候就可以了。


最后


其实理解了执行环境和作用域链后，闭包翻了变成显而易见的东西，但是也不能滥用闭包，从上面例子可以看出，闭包会使子函数保持其作用域链的所有变量及函数与内存中，内存消耗很大，在使用的时候尽量销毁父函数不再使用的变量。

您可能感兴趣的文章:

  • 结合代码图文讲解JavaScript中的作用域与作用域链
  • JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
  • javascript从作用域链谈闭包
  • JS 作用域与作用域链详解
  • Javascript变量的作用域和作用域链详解
  • JavaScript 作用域链解析
  • 深入理解JavaScript高级之词法作用域和作用域链
  • JavaScript作用域与作用域链深入解析
  • 深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
  • JavaScript中的作用域链和闭包
  • javascript 嵌套的函数（作用域链）
  • js 函数的执行环境和作用域链的深入解析
  • 浅析JavaScript中作用域和作用域链

相关推荐：

JavaScript作用域链实例详解

本文实例讲述了JavaScript作用域链。分享给大家供大家参考，具体如下： 跟其他语言一样，变量和函数的作用域揭示了这些变量和函数的搜索路径。对于JavaScript而言，理解作用域更加重要，因为在JavaScript中，作用域可以用来确定this的值，并且JavaScript有闭包，闭包是可以访...

图解javascript作用域链

先来一段简单的javascript代码： window.onload=function(){ functionsub(a,b){ returna-b; } varresult=sub(10,5); } 这段代码中的执行环境已经数清楚了，可是执行环境只是代码在预编译过程中javascript引擎所做的...

javascript基础进阶_深入剖析执行环境及作用域链

执行环境 执行环境定义了变量或函数有权访问的其他函数，决定了他们各自的行为。每个执行环境都有一个与之关联的变量对象。 变量对象 环境中定义的所有变量和函数都保存在这个对象中。 全局执行环境 全局执行环境是最外围的一个执行环境。在web浏览器中，全局执行环境被认为是Window对象，因此所有全局变量和...

详解JavaScript作用域、作用域链和闭包的用法

1.作用域 作用域是指可访问的变量和函数的集合。 作用域可分为全局作用域和局部作用域。 1.1全局作用域 全局作用域是指最外层函数外面定义的变量和函数的集合。 换言之，这些最外层函数外面定义的变量和函数在任何地方都能访问。 举个例子： //最外层定义变量 vara=1; console.log(a)...

思维脑图+代码示例让作用域到作用域链的知识点一目了然！

/2021/03/401be719作用域作用域的篇幅不会太长，作为自己对Js总结的第三篇文章，主要是承上启下。之后会涉及到执行上下文，闭包等相关专题，为了避免内容过多，作用域这一部分单独总结。目录前言一、作用域的定义二、理解作用域三、作用域链四、思考与总结五、写在最后（免费学习推荐：javascri...

深入理解JavaScript作用域和作用域链

作用域是JavaScript最重要的概念之一，想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。今天这篇文章对JavaScript作用域和作用域链作简单的介绍，希望能帮助大家更好的学习JavaScript。JavaScript作用域任何程序设计语言都有作用域的概念...

深入理解JavaScript系列（14） 作用域链介绍(Scope Chain)

前言在第12章关于变量对象的描述中，我们已经知道一个执行上下文的数据（变量、函数声明和函数的形参）作为属性存储在变量对象中。同时我们也知道变量对象在每次进入上下文时创建，并填入初始值，值的更新出现在代码执行阶段。这一章专门讨论与执行上下文直接相关的更多细节，这次我们将提及一个议题——作用域链。英文原...

JavaScript中的作用域链和闭包

作用域全局作用域局部作用域作用域链执行上下文活动对象闭包闭包优化JavaScript中出现了一个以前没学过的概念——闭包。何为闭包？从表面理解即封闭的包，与作用域有关。所以，说闭包以前先说说作用域。作用域（scope）通常来说一段程序代码中使用的变量和函数并不总是可用的，限定其可用性的范围即作用域，...