JavaScript 闭包

本文主要是介绍JavaScript 闭包，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。--MDN

闭包？

每当一个函数被创建时，这个函数就和创建其的词法环境绑定了。这保证了这个函数始终能访问创建其的词法环境里的数据。

例如如下代码 00：

function 张三(){
    let foo = "张三的foo";
    let bar = "张三的bar";
    function show(){
        console.log(foo,bar)
    }
    show();
}
张三();			// 张三的foo 张三的bar
console.log(foo,bar);	// Uncaught ReferenceError: foo is not defined

张三被调用时，创建了一个词法环境，其中包含了foo、bar和show等变量，他们仅在该词法环境和其内层词法环境中可见，而外层词法环境不可见。

当张三被执行完毕，这个词法环境里的foo和bar随即销毁，这个词法环境也不复存在。

而闭包就使得这个词法环境得以保持，并且外部/其他词法环境可以访问其中的数据。
例如如下代码 01：

let foo = "全局的foo";
let bar = "全局的bar";

function 张三(){
    let foo = "张三的foo";
    return function show(){      // *
        console.log(foo,bar);
    }
}
function 李四(){
    let foo = "李四的foo";
    let bar = "李四的bar";
    let show = 张三();
    show();			// 张三的foo 全局的bar
}
李四();

let show = 张三();
show();			// 张三的foo 全局的bar

┌───────────────────────┐		  ┌───────────────────────┐
│[ 张三 ] 		│		  │[ 李四 ]		  │
│			│		  │   foo: '李四的foo' 	  │
│  foo: '张三的foo'     >>>>function show>>>>  bar: '李四的bar'  	  │
│			│		  │   show: function 	  │
│			│		  │			  │
└──────────↡────────────┘		  └───────────────────────┘
	   ↡
	   ↳>>>>function show>>>> [ global ]

*处的return function show将张三的词法环境“打开”，使得拥有这个返回的函数的词法环境能够访问张三的词法环境。
无论这个函数被传递到哪里，它都会持有对原始定义作用域的引用，在访问foo和bar时总会先搜索张三的词法环境，如果没有则搜索其外部词法环境直至全局词法环境，如果在任何地方都找不到这个变量，那么就会报错。
当张三被执行完毕，这个词法环境也不会立即销毁(张三自己会被销毁)，因为还有"李四和全局要访问它"，即李四和全局持有对张三的词法环境的引用show。
这个在 其他作用域 中对 原始定义时的作用域 的引用就是闭包。

关于销毁

上文说道，show能使定义它的作用域不被销毁，但不会阻止张三不被销毁
例如如下代码 02：

function 张三他爹(){
    function 张三(){
        let foo = "张三的foo";
        return function show(){
            console.log(foo);
        }
    }
    return 张三();
}
let show = 张三他爹();
show();	// 张三的foo

张三他爹执行完后，张三不复存在，但show仍能访问定义它的作用域
或者来点更直接的，杀死张三，代码 03：

function 张三(){
    let foo = "张三的foo";
    return function show(){
        console.log(foo);
    }
}
let show = 张三();
张三 = null;	//张三死了
show();		//张三的foo

张三死了，但他的精神还在

作用域 闭包

显然，多个作用域持有的闭包指向同一个词法环境。如果某个作用域中通过闭包修改了指向的词法环境的某个数据，其它作用域也会感知到。
例如以下代码 04：

function 张三(){
    let size = 10;
    return [
        function(n){
            size += n;
            console.log(size);
        },
        function(n){
            size += n;
            console.log(size);
        }
    ]
}
[enlarge1,enlarge2] = 张三();
enlarge1(2);			// 12
enlarge2(2);			// 14

enlarge1和enlarge2同时指向了同一个词法环境，因此两次enlarge了同一个张三的size。

代码 02看起来有些怪异。
请看代码 05：

function 张三(){
    let size = 10;
    return function(n){
        size += n;
        console.log(size);
    }
}
enlarge1 = 张三();
enlarge2 = 张三();
enlarge1(2);			// 12
enlarge2(2);			// 12

看起来正常多了，但是结果不是我们想要的。

？

两次调用张三实际上创建了两个独立的词法环境 [张三1, 张三2]，所以两次enlarge了两个不同的张三的size。

循环

比较经典的是循环与闭包结合
例如以下代码 06：

for (var i=1; i<=5; i++) {
    setTimeout( function logi() {
        console.log( i );
    }, i*100 );
}

输出为5个6。
异步的setTimeout总是在当前事件(循环及其后面的同步代码)执行结束后再开始执行。每次向setTimeout传递的function都是对循环内词法环境的闭包，因此当这些function被调用时，它们访问循环内词法环境中的i，得到的是累加完毕的6。

let

如果使用现代的let而非var，结果会完全不同
例如以下代码 07：

for (let i=1; i<=5; i++) {
    setTimeout( function logi() {
        console.log( i );
    }, i*100 );
}

输出为1 2 3 4 5。
这个循环实际上有两个作用域

┌─────────────────────────┐
│[ ()内 ] i		  │
│   ┌──────────────────┐  │
│   │[ {}内 ] i        >>>>function logi>>>>[ global ]
│   └──────────────────┘  │
│			  │
└─────────────────────────┘

每次迭代，JavaScript就会用上次迭代结束时i的值重新声明并初始化 {}内的 i

验证

代码 08：

for(let i=1;i<5;i++){
    console.log(i); //Uncaught ReferenceError: Cannot access 'i' before initialization
    let i = 1;
}

在ES6中，let声明会被提升到作用域开头但不会初始化，这就是暂时性死区。
上述代码抛出了ReferenceError: Cannot access 'i' before initialization
而不是SyntaxError: Identifier 'i' has already been declared
证明i并不在{}内作用域定义，而是属于其外层作用域。
但i确实存在在{}内作用域中

猜测：由于整个for循环的执行体中并没有使用let，但是执行中每次都产生了块级作用域，我猜想是由底层代码创建并塞给for执行体中。
-- https://www.cnblogs.com/echolun/p/10584703.html

应用

工厂函数

可以通过一个函数创建多个特定函数
例如代码 09：

function createAdder(m){
    return function(n){
        return m+n;
    }
}
let addTo5 = createAdder(5);
addTo5(10);

调用createAdder会产生一个偏函数，实现功能更狭窄但更精确的函数。
如addTo5返回某数与5的和。

为什么我们通常会创建一个偏函数？
好处是我们可以创建一个具有可读性高的名字（double，triple）的独立函数。我们可以使用它，并且不必每次都提供一个参数，因为参数是被绑定了的。
另一方面，当我们有一个非常通用的函数，并希望有一个通用型更低的该函数的变体时，偏函数会非常有用。
-- https://zh.javascript.info/bind

模块/类

例如代码 0A：

let person = (function createPerson(){
    let age = 1;
    let name = "Li Hua";
    return {
        grow(){
            age++
        },
        say(){
            console.log(`I'm ${name}, and I'm ${age} years old`)
        }
    }
})();
person.say()	// I'm Li Hua, and I'm 1 years old
person.grow()
person.say()	// I'm Li Hua, and I'm 2 years old

createPerson抛出了两个方法grow和say，使其他作用域可以访问其内部的数据、方法。

性能

如果不是某些特定任务需要使用闭包，在其它函数中创建函数是不明智的，因为闭包在处理速度和内存消耗方面对脚本性能具有负面影响。
-- MDN

使用闭包来实现一些东西不是明智的，例如代码 0A中每创建一个对象都要把方法赋给这个对象。
改为使用原型，代码 0B：

let father  = {
    age: undefined,
    name: undefined,
    init(name){
        this.age = 1;
        this.name = name;
    },
    grow(){
        this.age++;
    },
    say(){
        console.log(`I'm ${this.name}, and I'm ${this.age} years old`)
    }
}
let p1 = Object.create(father);
p1.init("Li Hua")
let p2 = Object.create(father);
p2.init("Li Ming")
p1.grow()
p1.say()	// I'm Li Hua, and I'm 2 years old
p2.say()	// I'm Li Ming, and I'm 1 years old

或使用class来实现。
这样，方法都存在他们的原型中，免去了每次创建的赋值。

内存消耗

从理论上说，闭包会保持住其 原始定义作用域 的所有数据，因此会导致较大的内存消耗。
现代的JavaScript引擎可能会分析出一片作用域中没有使用的量，并把他们从环境中删除。
例如 代码0C：

function 张三(){
    let foo = "张三的foo";
    let bar = "张三的bar";
    return function show(){
        console.log(foo);
    }
}
let show = 张三();
show();

当通过show()访问张三作用域时，bar是不存在的，因为没有使用。

测试环境：Edge 95,JavaScript: V8 9.5.91
但这个和引擎的实现有关，实际使用时应当慎重。

总结

事实上，JavaScript中到处都有闭包存在，每当函数被传递到当前词法作用域之外执行，就产生了闭包。
更确切地说，所有的函数都是闭包的，当函数被传递到当前词法作用域之外执行，闭包的效果得以表现。
学会并能够识别闭包可以减少出错，写出更健壮的代码。

在面试时，前端开发者通常会被问到“什么是闭包？”，正确的回答应该是闭包的定义，并解释清楚为什么 JavaScript 中的所有函数都是闭包的，以及可能的关于词法环境原理的技术细节。
-- https://zh.javascript.info/closure

这篇关于JavaScript 闭包的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！