前端进击的巨人（三）：从做用域走进闭包

时间 2019-12-08

标签前端进击巨人走进闭包繁體版

原文原文链接

进击的巨人第三篇，本篇就做用域、做用域链、闭包等知识点，一一击破。javascript

做用域

做用域：负责收集并维护由全部声明的标识符（变量）组成的一系列查询，并实施一套很是严格的规则，肯定当前执行的代码对这些标识符（变量）的访问权限html

——《你不知道的JavaScript上卷》前端

做用域有点像圈地盘，你们划好区域，而后各自经营管理，井水不犯河水。java

var globaValue = '我是全局做用域';
function foo() {
    var fooValue = '我是foo做用域';
    function bar() {
        var barValue = '我是bar做用域';
    }
}

function other() {
    var otherValue = '我是other做用域';
}

做用域的变量声明

不一样做用域下命名相同的变量不会发生冲突，"就近原则"选取。git

var name = '任何名字';
function getName() {
    var name = '以乐之名';
    console.log(name);    // '以乐之名'
}
console.log(name);        // '任何名字'

做用域的类型

执行上下文环境有：全局、函数、eval。那么做用域也有三种，ES6新增了块级做用域。github

全局做用域
函数做用域
eval做用域（不推荐使用eval，暂时忽略）
块级做用域（ES6新增）

全局做用域

JavaScript中全局环境只有一个，对应的全局做用域也只有一个。没有用var/let/const声明的变量默认都会成为全局变量。浏览器

function foo() {
    a = 10;
};
foo();
console.log(a);    // 10 变全局变量（意外由此发生）

函数做用域

ES6以前，想要实现局部做用域的方式，都是是经过在函数中声明变量来实现的，因此也称函数做用域，支持嵌套多个。闭包

var a = 20;
function foo() {
    var a = 10;
    console.log(a);    // 10;
}
foo();

函数中声明变量时，建议在函数起始部分声明全部变量，方便查看，切记要用var/let/const声明，防止手抖将局部变量变成成全局变量。模块化

function getClient() {
    var name;
    var phone;
    var sex;
}

块级做用域

咱们先来理解什么是块？所谓块，其实就是被大括号{}包裹的代码部分。函数

if (true) {
    // 这里就是块了，也可称代码块
}

ES6前没有块级做用域的概念，因此{}中并无本身的做用域。若是咱们想在ES5的环境下构建块级做用域，通常都是是经过当即执行函数来实现的。

var name = '任何名字';
(function(window) {
    var name = '以乐之名';
    console.log(name);    // '以乐之名'
}(window));
console.log(name);        // '任何名字'

ES5借助函数做用域来实现块级做用域的方式，会让咱们的代码充斥大量的当即执行函数(IIFE)，不便于代码的阅读。好的代码的就跟好的文章同样，让阅读的人读来舒畅明了。

为此，ES6新增块级做用域的概念，使用let/const声明变量的方式，便可将其做用域指定在代码块中，跟函数做用域同样支持嵌套。

let i = 0;
for (let i = 0; i < 10; i++){
    console.log(i);
}
i;    // 0

let/const不容许变量提高，必须"先声明再使用"。这种限制，称为"暂时性死区"。这也能让咱们在代码编写阶段变得更加规范化，执行跟书写顺序保持一致。

做用域链（变量查询规则）

变量被做用域所管理，那么变量在做用域中的查找规则，就是所谓的做用域链。

做用域链的用途，是保证对执行环境有权访问的全部变量和函数的有序访问

——《JavaScript高级程序涉及》

"在当前执行环境开始查找使用到的变量，若是找到，则返回其值。若是找不到，会逐层往上级（父做用域）查找，直到全局做用域"。

var money = 100;
function foo() {
    function bar() {
        console.log(money);
    }
    bar();
}
foo();

自由变量

变量咱们见的很多，但"自由变量"听着是否是挺唬人的。其实对它，咱们并不陌生。

"自由变量：当前执行环境使用到，但并未在当前执行环境声明的变量（函数参数arguments排除）"

函数调用时，进入执行上下文建立阶段，会对argument进行隐式的变量声明。

var outer = '我是外面变量';
function foo() {
    var inner = '我是里面变量，不是自由变量';
    console.log(outer);   
    // 这里用到了outer，但outer并不在函数foo中声明，因此outer就是foo中的自由变量
}

"自由变量的做用域由词法环境决定，也就是它的做用域在代码书写阶段就已经肯定了，而不是在代码编译执行阶段肯定。"

"自由变量的值是在代码执行时肯定的，变量变量变量，值确定要变，因此自由变量的值只有在程序运行阶段才能肯定。"

闭包

开篇第一文咱们就执行环境，执行栈作出了详解，有所遗忘的可再温习。执行栈是咱们理解闭包原理基础中的基础。

函数调用栈过程的图再晒出来，顺便温习下。

function foo () {
    function bar () {
        return 'I am bar';
    }
    return bar();
}
foo();

函数调用时入栈，调用结束出栈。执行函数时，会建立一个变量对象去存储函数中的变量，方法，参数arguments等，结束调用时，该变量对象就会被销毁。(理想的状况下，不理想的状况就是出现"闭包"调用了)。

什么是闭包？

闭包是指有权访问另一个函数做用域的变量的函数。

——《JavaScript高级程序设计》

闭包是指那些可以访问自由变量的函数。

——MDN

闭包的特色首先是函数，其次是它能够访问到父级做用域的变量对象，即便父级函数完成调用后"理应出栈销毁"。

断定闭包出现

函数做为参数传递
函数做为返回值传递

function foo() {
    var fooVal = '2019';
    var bar = function() {
        console.log(fooVal);    // bar中使用到了自由变量fooVal
    }
    return bar;                 // 函数做为参数返回
}

var getValue = foo();
getValue();                     // 2019

对函数中谁是闭包，各文档解释不一。在此咱们遵守Chrome的方式，暂且称foo是闭包。

由于做用域和做用域链规则的限定，子环境的自由变量只能逐层向上到父环境查找。

可是经过闭包，咱们在外部环境也能够获取到变量fooVal，虽然foo()函数执行完成了，但它并没从函数调用栈中销毁，其变量对象存储仍然能被访问到。

实际执行过程请看图：

把上述代码改如下，接着看：

function foo() {
 var fooVal = '2019';
 var bar = function() {
 console.log(fooVal);     // bar中使用到了自由变量fooVal
 }
 return bar;              // 函数做为参数返回
}
var getValue = foo();
var fooVal = '2018';      // 这里的fooVal是全局做用域的变量
getValue();               // 2019

答案与结果不符的小伙伴要回头理解下自由变量了。"自由变量的做用域在代码书写时（函数建立时）就肯定了"，因此函数中getValue()使用的fooVal在foo的做用域下，而不是在全局做用域下。

答对的小伙伴们再来一道题，加深你的记忆

function fn() {
    var max = 10;
    function bar(x) {
        if (x > max) {    
            console.log(x)
        }
    }
    return bar;
}
var f1 = fn();
var max = 100;

f1(20);                 // 输出20

题目解析：max做为函数bar中的自由变量，它的做用域在函数bar建立的时候就肯定了，就是函数fn中的max，因此它的做用域链查找到fn中已经结束并返回了，不会再向上找到全局做用域。

注意：栈中存储的不仅是闭包中使用到的自由变量，而是父级函数的整个变量对象（父级函数做用域中声明的方法，变量，参数等）

闭包的应用场景

上文中已经阐述了闭包的特色，就是可以让咱们跨做用域取值（不局限于父子做用域）。列举两个实际开放中经常使用的栗子：

封装回调保存做用域

for(var i = 1; i < 5; i++) {
    setTimeout((function(i){
       return function() {
           console.log(i);        
       } 
    })(i), i * 1000)
}
// 原理：经过自执行函数传参i，而后返回一个函数（闭包）中使用i，使父函数的变量对象一直存在

私有变量和方法实现模块化

var makePeople = function () {
    var _name = '以乐之名';
    return {
        getName: function () {
            console.log(_name);
        },
        setName: function (name) {
            if (name != 'Hello world') {
                _name = name;
            }
        }
    }
}

var me = makePeople();
me.getName();                   // '以乐之名'
me.setName('KenTsang');         
me.getName();                   // 'KenTsang'

// 原理：私有变量_name没有对外访问权限，但经过闭包使其一直保留在内存中，能够被外部调用

闭包的应用场景还有不少，具体实际状况还需具体分析。

闭包形成的内存泄露

闭包的使用，破坏了函数的出栈过程。解释执行栈的时候，讲到同个函数即便调用自身，建立的变量对象也并不是同一个，其内存存储是各自独立的。

栈中只入不出，函数的变量对象没有被有效回收，就会形成浏览器内存占用逐步增长，内存占用太高的状况下，就会致使页面卡顿，甚至浏览器崩溃。这就是咱们常说的闭包形成的"内存泄露"。

因此，一名合格的前端，除了会用闭包，还要正确的解除闭包引用。
垃圾回收机制讲解时，经过设置变量值为null时可已解除变量的引用，以便下一次垃圾回收销毁它。

function foo() {
 var fooVal = '2019';
 var bar = function() {
 console.log(fooVal);     
 }
 return bar;              
}
var getValue = foo();
var fooVal = '2018';     
getValue();
getValue = null;         // 解除引用，下一次垃圾回收就会回收了

写在结尾

闭包算是前端初学者的一个难点，能解释清楚并不容易，涉及到做用域，执行上下文环境、变量对象等等。

零散知识的内聚汇总，正是是系列更文的初衷所在。

知识不是小段子，听完笑过就忘，惟有造成体系，达成闭环，才能深植入记忆中。

参考文档：

深刻理解javascript原型和闭包

本文首发Github，期待Star！
https://github.com/ZengLingYong/blog

做者：以乐之名本文原创，有不当的地方欢迎指出。转载请指明出处。