关于闭包

在JavaScript中有作用域、作用域链和闭包。我们最开始可能觉得知道这些的定义就算懂了（刚入门时的我也是这样），但是当深入了解的时候，发现自己知道的只是皮毛。所以，这篇文章将详细讲解作用域、作用域链和闭包。

我们先借助一道题，了解一下作用域、作用域链和闭包的形成过程~

let x = 1;
function A(y){
let x = 2;
function B(z){
console.log(x+y+z);
}
return B;
}
let C = A(2);
C(3);

对于上面的这张解答图，有如下解释：

当创建一个函数时，会创建一个堆，同时初始化当前函数作用域，作用域([[Scope]])为所在上下文中的变量对象VO/AO。
当执行一个函数时，会创建新的执行上下文 -> 初始化this指向 -> 初始化作用域链([[ScopeChain]]) -> 创建AO变量对象存储变量
在EC(A)执行上下文中，堆被全局变量C所占用，不能出栈销毁，此时就形成了闭包。
图里面红线所代表的就是作用域链，在一个作用域中，它所需要的变量在当前作用域中没有，就会一层一层向上查找。
这样简单的一个题，引出了作用域、作用域链、闭包的概念，下面本篇文章将正式对它们进行讲解。

一、作用域
作用域([[Scope]])就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。

1.1 词法作用域与动态作用域
1.1.1 词法作用域
词法作用域也是静态作用域，在JavaScript中采用的就是词法作用域。词法作用域就是定义在词法阶段的作用域。换句话说，词法作用域是由你在写代码时将变量和块作用域写在哪里决定的。因此当词法分析器处理代码时会保持作用域不变（大部分情况是这样）

下面一个例子帮助理解：

var value = 1;

function foo() {
console.log(value);
}

function bar() {
var value = 2;
foo();
}

bar();
假如上述例子采用了词法作用域，那么它的执行过程就是：

首先执行bar()函数，在bar()函数中执行foo()函数，foo()函数中输出value的值。它首先会查找当前作用域中是否有value，如果没有，则会向外一层查找，则最后输出了1

1.1.2 动态作用域
动态作用域即是与词法作用域相反的。我们还是以上面的例子为例：

假如上述例子采用动态作用域：

它依然会像采用词法作用域的形式执行函数，唯一不一样的地方在于：在执行foo()函数时，他不会向外一层查找value，而是从调用的函数作用域中查找，所以最后的结果输出为2。

1.2 全局作用域
在代码任何地方都能访问到的对象拥有全局作用域，一般拥有全局作用域有以下三种情形

1.2.1 最外层函数和在最外层函数外面定义的变量
var globalValue = global value;

function checkGlobal() {
var localValue = local value;
console.log(localValue); // “local value”
console.log(globalValue); // “global value”
}

console.log(globalValue); // “global value”
console.log(checkGlobal); // “global value”
console.log(localValue); // “Uncaught ReferenceError: localValue is not defined”
在上面的例子中，globalValue就是一个全局变量，无论在哪都能访问，而localValue是一个局部变量，只能在函数内部访问

1.2.2 所有未定义直接赋值的变量
function checkGlobal() {
var localValue = ‘local value’;
globalValue = ‘global value’;
console.log(localValue, globalValue); // ‘local value’ ‘globalValue’
}

console.log(globalValue); // ‘globalValue’
console.log(localValue); // “Uncaught ReferenceError: localValue is not defined”
1.2.3 所有window对象的属性

1.3 函数作用域
函数作用域，就是指声明在函数内部的变量，它正好和全局作用域相反。内层作用域可以访问到外层作用域，而外层作用域不能访问到内层作用域。

function check() {
var localValue = ‘local value’;
console.log(localValue); // ‘local value’
}

console.log(localValue); // “Uncaught ReferenceError: localValue is not defined”
1.4 块级作用域
块级作用域可通过let和const声明，声明后的变量再指定块级作用域外无法被访问。

1.4.1 块级作用域被创建的情况
在一个函数内部
在一个代码块内部
1.4.2 块级作用域的特点
声明的变量不会提升到代码块顶部
let或者const声明的变量不会被提升到当前作用域顶部。

function check(bool) {
if(bool) {
let result = 1;
console.log(result);
}
console.log(result);
}

check(true); // 1 Uncaught ReferenceError: result is not defined
check(false); // Uncaught ReferenceError: result is not defined
如果想要访问到result，需要自己手动将变量提升到当前作用域顶部。像这样

function check(bool) {
let result = null;
if(bool){
result = 1
}
console.log(result);
}
…
禁止重复声明
在同层级的作用域内，已经声明过的变量，不可以再次声明。

// 1.同层级作用域
var bool = true;
let bool = false; // Uncaught SyntaxError: Identifier ‘bool’ has already been declared

// 不同层级作用域
var bool = true;
function check() {
let bool = false; // 这里不会报错
// …
}
在循环中的使用
在for循环中声明的变量仅在循环内部使用。

for(let i = 0; i < 1; i++) {
console.log(i); // 0
}
console.log(i); // Uncaught ReferenceError: i is not defined
但是循环内部又是一个单独的作用域

for(let i = 0; i < 2; i++) {
let i = ‘hello’;
console.log(i); // ‘hello’ ‘hello’
}
二、作用域链
2.1 作用域链的定义及形成
当所需要的变量在所在的作用域中查找不到的时候，它会一层一层向上查找，直到找到全局作用域还没有找到的时候，就会放弃查找。这种一层一层的关系，就是作用域链。

var a = 1;

function check() {
return function() {
console.log(a); // 当前作用域内找不到a,会向上一层一层查找，最后找到了全局下的a,输出结果为1
console.log(b); // 同理，所以输出"Uncaught ReferenceError: b is not defined"
}
}

var func = check(); // 此时返回匿名函数
func(); // 执行匿名函数
三、闭包
3.1 闭包的定义
当函数可以记住并访问所在的词法作用域时，就产生了闭包。即使函数是在当前词法作用域之外执行。

3.2 闭包的形成
我们来看一段代码

function foo() {
var a = 1;
return function() {
console.log(a);
}
}

var bar = foo();
bar();
foo()函数的执行结果返回给bar，而此时由于变量a还在使用，因而没有被销毁，然后执行bar()函数。这样，我们就能在外部作用域访问到函数内部作用域的变量。这个就是闭包。

闭包的形成条件：

函数嵌套
内部函数引用外部函数的局部变量
3.3 闭包的作用
可以读取函数内部的变量
可以使变量的值长期保存在内存中，生命周期比较长。
可用来实现JS模块（JQuery库等）
JS模块是具有特定功能的JS文件，将所有的数据和功能都封装在一个函数内部(私有的)，只向外暴露一个包含多个方法的对象或函数，模块的使用者，只需要通过模块暴露的对象调用方法来实现对应的功能。

(function() {
var a = 1;

function test() {
    return a;
}

window.module = {a, test};  // 向外暴露

})()

3.4 闭包的特性 每个函数都是闭包，函数能够记住自己定义时所处的作用域，函数走到了哪，定义时的作用域就到了哪。 内存泄漏 内存泄漏就是一个对象在你不需要它的时候仍然存在。所以不能滥用闭包。当我们使用完闭包后，应该将引用变量置为null。

function outer(){
var num = 0;
return function add(){
num++;
console.log(num);
};
}
var func1 = outer();
func1(); // 1
func1(); // 2 [没有被释放，一直被占用]
var func2 = outer();
func2(); // 1 [重新引用函数时，闭包是新的]
func2(); // 2
3.5 闭包的应用
现在要求实现点击第几个button就输出几

先写一个html

1
2
再来写JS

let buttons = document.getElementsByTagName(‘button’);

for(var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function() {
console.log(i + 1);
}
}
第一次我们可能会写出这样的代码，但是我们会发现，这个代码存在问题，无论我点第几个按钮，都会输出3。这是因为此时的i是全局变量，当执行点击事件时，i已经变成了3

我们可以用两种方式解决这个问题

let声明
将上述代码中的var改为let

闭包
for(var i = 0; i < buttons.length; i++) {
(function(k){
buttons[k].onclick = function() {
console.log(k + 1);
}
})(i)
}

面试题
let x = 5;
function fn(x) {
return function(y) {
console.log(y + (++x));
}
}
let f = fn(6);
f(7);
console.log(x);