概念：什么是闭包（Closure）

• MDN：闭包是函数和声明该函数的 ++ 词法环境 ++ 的组合。
  A closure is the combination of a function and the lexical environment within which that function was declared.
• 百度百科 1：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数）。
• 百度百科 2：闭包就是能够读取其他函数内部变量的函数，是“定义在一个函数内部的函数”。
• 其他说法 1：闭包是词法闭包的的简称, 是引用了 ++ 自由变量 ++ 的函数。
• 其他说法 2：闭包就是通过返回一个函数来保留某段作用域的一种方法，通过返回函数把本该消失的作用域保留到这个函数中。

可见：闭包并没有一个明确的、易于理解的概念，泛泛来看，闭包本质上是函数及作用域的一类问题。而实际上，我们也不太需要关注闭包的概念是什么，只需知道其表现、原理及常见的应用场景即可。

自由变量与作用域

• 作用域分：全局作用域、函数作用域和块作用域（ES6 后）；
• 作用域是在函数定义时确定的，而不是在函数执行时确定的；
• 在 A 作用域中使用的变量 X，却没有在 A 中声明，那么对于 A 作用域来说，变量 X 即自由变量；
• 按照作用域链向上查找自由变量时，要先到创建该函数的作用域中去查找，而不是调用该函数的作用域中去查找；

var a = 10;
function sum(x) {return x + a;}
sum(1);
// 11
// 在函数 sum 的作用域里，a 就是自由变量 

var a = 100;
function fn() {
    var a = 10;
    return function(x) {return a + x;}
}
var f = fn();
a = 200;
f(1);
// 11
// 自由变量 a 的值是沿着作用域链向上一级一级找到的 

var x = 10;
function fn() {console.log(x);
}
function show(f) {
    var x = 20;
    (function() {f();
    })()}
show(fn);
// 10
// 自由变量 x 在函数 fn 中执行，而 fn 在全局中定义
// 按上文总结：x 的值要到全局中（定义上下文）查找，而不是到函数 show 的作用域（执行上下文）中查找 

var x = 10;
function show(y) {
    var x = 20;
    (function(z) {console.log(x+z)
    })(y)
}
show(30);
// 30 + 20 = 50

闭包的表现、原因及其应用

• 闭包的两种表现：

// 函数作为返回值
function fn() {
    var max = 10;
    return function bar(x) {if (x > max) {console.log(x);
        }
    };
}
var f = fn();
f(20); 
// 20

// 函数作为参数
var max = 10;
function bar(x) {if (x > max) {console.log(x);
    }
}
(function(f) {
    var max = 100;
    f(15);
})(bar)
// 15

• 闭包产生的原因：

正常来讲，一个函数 fn 执行完成后，其上下文环境会销毁。但存在一种意外：
fn 执行完后返回了另一个函数 f，而正巧，返回的函数体中存在一个属于 fn 上下文环境的自由变量，那么 fn 执行完后，其上下文环境不能销毁。
很显然，闭包会增加内容开销。

• 闭包的实际应用：

首先需要知道每次调用外部函数，都会返回一个新的函数；而且返回函数的执行互不影响。

function lazy_sum(arr) {return function() {return arr.reduce((x,y) => {return x+y;})
    }
}
var f1 = lazy_sum([1,2,3,4,5]);
var f2 = lazy_sum([1,2,3,4,5]);
f1 === f2; // false

以上便是闭包的一种应用：返回一个函数，并延迟执行。

闭包更强大的一个功能是：模拟面向对象的程序设计语言，封装一个 private 变量

// 使用 js 创建一个开放的计数器
function create_counter(initial) {
    var x = initial || 0;
    return {inc: function() {return ++x;}
    }
}
var c1 = create_counter();
var c2 = create_counter(10);
c1.inc(); // 1
c1.inc(); // 2
c2.inc(); // 11
c2.inc(); // 12
c1.inc(); // 3
c2.inc(); // 13

闭包还可以把一个多参数的函数转化成单参数的函数：

function make_pow(n) {return function (x) {return Math.pow(x, n);
    }
}
var pow2 = make_pow(2);
var pow3 = make_pow(3);
console.log(pow2(5)); // 5^2=25
console.log(pow3(7)); // 7^3=343

基本概念

函数和声明该函数的词法环境的组合。闭包包含了函数也包含了声明该函数的词法环境（作用域）。

闭包实际上是将函数与其所操作的某些数据（环境）关联起来，这些数据或者是环境可以理解为它的一个作用域。因此我们可以达到一个能够访问另一个函数作用域的变量的函数的目的。

// 定义局部变量
function count() {
    let count = 0;
    return function() {
        count = count + 1;
        console.log(count);
    }
}
 
var getCount = count();
 
getCount();
getCount();
// 1
// 2

特点

闭包一定 return 一个 function，只有 function 才会有一个封闭的命名空间。

• 函数嵌套函数
• 函数内部可以引用外部的参数和变量
• 参数和变量不会被垃圾回收机制回收

用途

• 匿名自执行函数 – 只需要执行一次，其内部变量无需维护

    (function(){//})();

• 封装回调保存作用域 (缓存结果)

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

• 模拟私有方法

    var myNameSpace = (function () {
        // 私有计数器变量 
        var myPrivateVar = 0;
    
        /* 记录所有参数的私有函数 */
        var myPrivateMethod = function (foo) {console.log(foo + myPrivateVar);
        };
    
        return {
            // 公有变量 
            myPublicVar: 'foo',
            // 调用私有变量和方法的公用函数 *
            myPublicFunction: function (bar) {
                // 增加私有计数器值 
                myPrivateVal ++;
    
                myPrivateMethod(bar);
            }
        };
    }）（）；

常见误区

• 在循环中创建闭包

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

• 添加监听事件

    function func() {var element = document.getElementById("app");
        element.onclick = function() {alert(element.id);
        }
    }

一、定义：

常规定义：

 闭包的定义：有权利访问外部函数作用域的函数。

通俗定义：

1、函数内部包含了函数。然后内部函数可以访问外部函数的作用域。2、内部函数可以访问 父级函数的作用域。... 等等等
 

二、思考：

1、我们在日常的开发过程中会应用到 闭包么？

 以之前的知识对于 闭包的理解来讲是这样的

 
    (function(){for(var i=0; i<10; i++) {console.log(i)
        }
    })()

 或者说是这样的

 
    var fnX = function() {
        var x = 123
        function y() {alert(x)
        }
        y()}
 
    fnX()   // 123

总结下之前的理解就是：内部函数能访问外部函数作用域，能够保存变量不被销毁而一直存在。

三、作用：

在 JavaScript 中有作用域和执行环境的问题，在函数内部的变量在函数外部是无法访问的，在函数内部却可以得到全局变量。由于种种原因，我们有时候需要得到函数内部的变量，可是用常规方法是得不到的，这时我们就可以创建一个闭包，用来在外部访问这个变量。

通过将一个方法或者属性声明为私用的，可以让对象的实现细节对其他对象保密以降低对象之间的耦合程度，可以保持数据的完整性并对其修改方式加以约束，这样可以是代码更可靠，更易于调试。封装是面向对象的设计的基石。

3.1 什么是作用域

3.1.1 ES5 的作用域问题

 
在 ES5 中 我们常常会说的一个概念是 局部变量 和 全局变量
 
那么 局部变量 和 全局变量 所这个 局部 和 全局则为 作用域。这个概念其实介绍起来还是比较多虚无。但是我记得有一本书 叫《你不知道的 JS》在这本书的 上册 作者详细的介绍了 作用域 这个概念。

作用域是什么

  1. 现代 JavaScript 已经不再是解释执行的，而是编译执行的。但是与传统的编译语言不同，它不是提前编译，编译结果不能进行移植。编译过程中，同样会经过分词/词法分析, 解析/语法分析, 代码生成三个阶段。2. 以 var a = 2; 语句为例，对这一程序语句对处理，需要经过引擎, 编译器, 作用域三者的配合。其中，引擎从头到尾负责整个 javascript 程序的编译和执行过程；编译器负责语法分析和代码生成；作用域负责收集并维护由所有声明的标识符组成的系列查询，并实施一套规则，确定当前执行的代码对这些标识符的访问权限。3. 对于 var a = 2; 编译器首先查找作用域中是否已经有该名称的变量，然后引擎中执行编译器生成的代码时，会首先查找作用域。如果找到就执行赋值操作，否则就抛出异常
 
  4. 引擎对变量的查找有两种：LHS 查询和 RHS 查询。当变量出现中赋值操作左侧时是 LHS 查询，出现中右侧是 RHS 查询
 

词法作用域

1. 词法作用域就是定义在词法阶段的作用域。词法作用域是由你在写代码时将变量和块作用域写在哪里决定的，词法处理器分析代码时会保持作用域不变
 
2. 作用域查找会在找到第一个匹配的标识符时停止
 
3.eval 和 with 可以欺骗词法作用域，不推荐使用

函数作用域和块作用域

1.JavaScript 具有基于函数的作用域，属于这个函数的变量都可以在整个函数的范围内使用及复用
2.(function fun(){})() 函数表达式和函数声明的区别是看 function 关键字出现在声明中的位置。如果 function 是声明中的第一个词，那么就是一个函数声明，否则就是一个函数表达式
 
3.with,try/catch 具有块作用域，方便好用的实现块级作用域的是 es6 带来的 let 关键字
 

提升

    1. 变量的提升
    2. 函数提升（这里就不过多的赘述了）

动态作用域

  1. 词法作用域是一套引擎如何寻找变量以及会在何处找到变量的规则。词法作用域最重要的特征是它的定义过程发生中代码的书写阶段
 
  2. 动态作用域让作用域作为一个在运行时就被动态确定的形式，而不是在写代码时进行静态确定的形式。eg:

function foo(){console.log(a);  // 2 
} 
function bar(){ 
    var a = 3; 
    foo();} 
var a = 2; 
bar(); 

 词法作用域让 foo() 中的 a 通过 RHS 引用到了全局作用域中的 a，所以输出 2；动态作用域不关心函数和作用域如何声明以及在何处声明，只关心从何处调用。换言之，作用域链是基于调用栈的，而不是代码中的作用域嵌套。如果以动态作用域来看，上面代码中执行时会输出 3
 
 
  3.JavaScript 不具备动态作用域，但是 this 机制中某种程度上很像动态作用域，this 关注函数如何调用。

3.1.2 ES6 的作用域问题

 在 ES6 中 出现了块级作用域的概念
 
let const 在（）内则（）内的作用域 为 块级作用域。

3.2 什么是执行环境

 执行环境 即为 当前作用域内的环境。

3.3 什么是作用域链

 这个概念其实 也是比较虚的概念，不太好理解。但是一旦理解就不会忘记了。所谓 链 其实就是链条，将需要链接在一起的东西链接在一起（感觉说了一句废话）

作用域链的通俗理解：

 在函数内部作用域 通过 作用域链 可以访问 函数外部作用域 的属性或者方法。一层层的 作用域链 往外走  到最后 则为 window 对象的全局作用域。然后这一条条的 作用域链 就形成了一整条关联的链条。

四、具体案例的分析:

这里 我们举了一个栗子 ????

eg1:

function Person(name) {
    this.name = name
    this.getName = function() {return this.name}
}
 
var one = new Person('zhang')
one.getName() // zhang
one.name      // zhang
 
var two = new Person('wang')
two.getName() // wang
one.name      // wang

eg2:

function Person(name) {
    var _name = name
    this.getName = function() {return _name}
} 
 
var one = new Person('zhang')
one.getName() // zhang
 
var two = new Person('wang')
two.getName() // wang

eg1 vs eg2

 这二个例子进行对比，虽然 都拿到了自己想要的 name 但是 eg1 的方式会比 eg2 获取 name 
的方式要多一个，即为 作为对象的属性来 获取到 当前的 name（one.name）

那如果 你想让你的 name 属性只能通过 getName 方法来获取，不希望有别的方法来获取 甚至是改变的话，那么 闭包 设置私有属性就是一个很安全的做法，那么这个时候闭包的作用就体现出来了。