JavaScript的作用域链及闭包

约定不等于承诺〃 2022-05-14 04:12 242阅读 0赞

**闭包概念：指有权访问另一个函数作用域中的变量的函数。**  
**创建方式：在一个函数内部创建另一个函数。**

但是，在我们了解闭包之前，有个很重要的概念需要先了解清楚，那就是作用域链，我们需要彻底理解作用域链。

## 1.JavaScript的作用域及作用域链 ##

**作用域**

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

**1. 全局作用域（Global Scope）**  
在代码中任何地方都能访问到的对象拥有全局作用域，一般来说以下几种情形拥有全局作用域：

（1）最外层函数和在最外层函数外面定义的变量拥有全局作用域，例如：

var authorName="山边小溪";
    function doSomething(){ 
        var blogName="梦想天空";
        function innerSay(){ 
            alert(blogName);
        }
        innerSay();
    }
    alert(authorName); //山边小溪
    alert(blogName); //脚本错误
    doSomething(); //梦想天空
    innerSay() //脚本错误

（2）所有末定义直接赋值的变量自动声明为拥有全局作用域，例如：

function doSomething(){ 
        var authorName="山边小溪";
        blogName="梦想天空";
        alert(authorName);
    }
    doSomething(); //山边小溪
    alert(blogName); //梦想天空
    alert(authorName); //脚本错误

变量blogName拥有全局作用域，而authorName在函数外部无法访问到。

（3）所有window对象的属性拥有全局作用域

一般情况下，window对象的内置属性都拥有全局作用域，例如window.name、window.location、window.top等等。

**2. 局部作用域（Local Scope）**　　  
　　和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部，所有在一些地方也会看到有人把这种作用域称为函数作用域，例如下列代码中的blogName和函数innerSay都只拥有局部作用域。

function doSomething(){ 
        var blogName="梦想天空";
        function innerSay(){ 
            alert(blogName);
        }
        innerSay();
    }
    alert(blogName); //脚本错误
    innerSay(); //脚本错误

--------------------

**作用域链（Scope Chain）**  
在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是**\[\[Scope\]\]**，由ECMA-262标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。

当一个函数创建后，它的作用域链会被创建此函数的作用域中可访问的数据对象填充。例如定义下面这样一个函数：

function add(num1,num2) { 
        var sum = num1 + num2;
        return sum;
    }

![这里写图片描述][70]  
函数add的作用域将会在执行时用到。例如执行如下代码：

var total = add(5,10);

执行此函数时会创建一个称为“**执行环境(execution context)**”的内部对象，执行环境定义了函数执行时的环境。每个执行环境都有自己的作用域链，用于标识符解析，当执行环境被创建时，而它的**作用域链初始化为当前运行函数的`[[Scope]]`所包含的对象。**

这些值按照它们出现在函数中的顺序被复制到执行环境的作用域链中。它们共同组成了一个新的对象，叫“**活动对象(activation object)**”，该对象包含了函数的所有局部变量、命名参数、参数集合arguments以及this，然后此对象会被推入作用域链的前端，当执行环境被销毁，活动对象也随之销毁。新的作用域链如下图所示：  
　　![这里写图片描述][70 1]  
　　在函数执行过程中，没遇到一个变量，都会经历一次标识符解析过程以决定从哪里获取和存储数据。该过程从作用域链头部，也就是从活动对象开始搜索，查找同名的标识符，如果找到了就使用这个标识符对应的变量，如果没找到继续搜索作用域链中的下一个对象，如果搜索完所有对象都未找到，则认为该标识符未定义。**函数执行过程中，每个标识符都要经历这样的搜索过程。**

--------------------

**作用域链以及代码优化**

从作用域链的结构可以看出，在执行环境的作用域链中，标识符所在的位置越深，读写速度就会越慢。如上图所示，因为全局变量总是存在于执行环境作用域链的最末端，因此在标识符解析的时候，查找全局变量是最慢的。所以，在编写代码的时候应尽量少使用全局变量，尽可能使用局部变量。一个好的经验法则是：**如果一个跨作用域的对象被引用了一次以上，则先把它存储到局部变量里再使用。**例如下面的代码：

function changeColor(){ 
        document.getElementById("btnChange").onclick=function(){ 
            document.getElementById("targetCanvas").style.backgroundColor="red";
        };
    }

这个函数引用了两次全局变量document，查找该变量必须遍历整个作用域链，直到最后在全局对象中才能找到。这段代码可以重写如下：

function changeColor(){ 
        var doc=document;
        doc.getElementById("btnChange").onclick=function(){ 
            doc.getElementById("targetCanvas").style.backgroundColor="red";
        };
    }

这段代码比较简单，重写后不会显示出巨大的性能提升，但是如果程序中有大量的全局变量被从反复访问，那么重写后的代码性能会有显著改善。

--------------------

## 2.闭包 ##

前面给介绍了闭包的概念，这里我们好好聊聊闭包。先看一段代码：

function a(){ 
        var n = 0;
        function inc() { 
            n++;
            console.log(n);
        }
        inc();  
        inc(); 
    }
    a(); //控制台输出1，再输出2

再看一段代码：

function a(){ 
        var n = 0;
        this.inc = function () { 
            n++; 
            console.log(n);
        };
    }
    var c = new a();
    c.inc();    //控制台输出1
    c.inc();    //控制台输出2

这就是闭包！**有权访问另一个函数作用域内变量的函数都是闭包。**

这里 inc 函数访问了构造函数 a 里面的变量 n，所以形成了一个闭包。再来看一段代码：

function a(){ 
        var n = 0;
        function inc(){ 
           n++; 
           console.log(n);
        }
        return inc;
    }
    var c = a();
    c();    //控制台输出1
    c();    //控制台输出2

这里：  
var c = couter()，这一句 couter()返回的是函数 inc，那这句等同于 var c = inc;  
c()，这一句等同于 inc(); 注意，函数名只是一个标识（指向函数的指针），而()才是执行函数。  
后面三句翻译过来就是： var c = inc; inc(); inc();，跟第一段代码有区别吗？ 没有。

**原理**  
挡在函数内部定义了其他函数时，就创建了闭包。闭包有权访问包含函数内部的所有变量。原理如下：

*  在后台执行环境中，必报的作用域链包含着他自己的作用域、包含函数的作用域和全局作用域。
 *  通常，函数的作用域及其所有便令都会在函数执行结束后被销毁。
 *  但是，当函数返回了一个闭包时，这个函数的作用域将会一直在内存中保存到闭包不存在为止。
 *  闭包还可以在JavaScript中模仿块级作用域（匿名函数）！

**常见的陷阱**

乍一看，以为输出 0~9 ，万万没想到输出10个10？

这里的陷阱就是：**函数带()才是执行函数！** 单纯的一句 var f = function() \{ alert(‘Hi’); \}; 是不会弹窗的，后面接一句 f(); 才会执行函数内部的代码。上面代码翻译一下就是：

为什么只垃圾回收了 result，但却不收了 i 呢？ 因为 i 还在被 function 引用着啊。这就是所谓的内存回收机制。

要注意：

*  闭包只能取得包含函数中任何变量的最后一个值。因为别忘了闭包所保存的是整个变量对象，而不是某个特殊的变量。
 *  在确定绝对需要的地方才使用闭包。因为闭包到制变量不会被自动回收这一特性，可能会导致内存泄漏。

**总结**

闭包就是一个函数引用另外一个函数的变量，因为变量被引用着所以不会被回收，因此可以用来封装一个私有变量。这是优点也是缺点，**不必要的闭包只会徒增内存消耗！**另外使用闭包也要注意变量的值是否符合你的要求，因为他就像一个静态私有变量一样。闭包通常会跟很多东西混搭起来，接触多了才能加深理解，这里只是开个头说说基础性的东西。

[70]: /images/20220514/ce9e28f827004309ade914d1ee6c4f50.png
[70 1]: /images/20220514/cca4a6c58f1543c7b02e34d2323f7405.png