javascript闭包

闭包（closure）是 JavaScript 语言的一个难点，也是它的特色，很过高级应用都要依靠闭包实现。

理解闭包，首先必须理解变量作用域。JavaScript有两种作用域：全局作用域和函数作用域。函数内部可以直接读取全局变量。

var n = 999;
function fi(){
  console.log(n);  
}
f1()//999

上面代码中，函数 f1 可以读取全局变量 n 。

但是，函数外部无法读取函数内部声明的变量。

function f1(){
  var n = 999;
}
console.log(n)
// Uncaught ReferenceError: n is not defined(

上面代码中，函数 f1 内部声明的变量 n ，函数外是无法读取的。

如果出于种种原因，需要得到函数内部的局部变量。正常情况下，这是办不到的，只有通过变通方法才能实现。那就是在函数的内部，再定义一个函数。

function f1(){
  var n = 999;
  function f2(){
    console.log(n);//999
  }
}

上面代码中，函数 f2 就在函数 f1 内部，这时 f1 内部的所有局部变量，对 f2 都是可见的。但是反过来就不行， f2 内部的局部变量，对 f1 就是不可见的。这就是 JavaScript 语言特有的“链式作用域”结构（chain scope），子对象会一级一级的向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可以见的，反之则不成立。

既然 f2 可以读取 f1 的局部变量，那么只要把 f2 作为 返回值，我们就可以在 f1 外部读取它的内部变量了。

function f1(){
  var n = 999;
  function f2(){
    console.log(n);
  }
  return f2;
}

var result = f1();
result();//999

上面代码中，函数 f1 的返回值就是函数 f2 ，由于 f2 可以读取 f1 的内部变量，所以就可以在外部获得 f1 的内部变量了。

闭包就是函数 f2 ，即能够读取其他函数内部变量的函数。由于在JavaScript 语言中，只有函数内部的子函数才能读取内部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。闭包最大的特点，就是它可以“记住”诞生的环境，比如 f2 记住了它诞生的环境 f1，所以从 f2 可以得到 f1 的内部变量。在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

闭包的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量始终保持在内存中，即闭包可以使得它诞生环境一直存在。请看下面的例子：闭包使得内部变量记住上一次调用时的运算结果。

function createIncrementor(start){
  return function(){
    return start++;
  };
}

var inc = createIncrementor(5);

inc()//5
inc()//6
inc()//7

上面代码中， start 是函数 createIncrementor 的内部变量。通过闭包， start 的状态被保留了，每一次调用都是在上一次调用的基础上进行计算。从中可以看到，闭包 inc 使得函数 createIncrementor 的内部环境一直存在。所以，闭包可以看做是函数内部作用域的一个接口。

为什么会这样呢？原因就在于 inc 始终在内存中，而 inc 的存在依赖于 createIncrementor ，因此也始终在内存中，不会再调用结束后，被垃圾回收机制回收。

闭包的另一个用处，是封装对象的私有属性和私有方法。

function Person(name){
  var age;
  function setAge(n){
    age = n;
  }
  function getAge(){
    return age;
  }

  return {
    name: name,
    getAge: getAge,
    setAge: setAge
  };
}

var p1 = Person('张三');
p1.setAge(25);
p1.getAge()//25

上面代码中，函数 Person 的内部变量 age ，通过闭包 getAge 和 setAge ，变成了返回对象 p1 的私有变量。

注意，外层函数每次运行，都会生成一个新的闭包，而这个闭包又会保留外层函数的内部变量，所以内存消耗很大。因此不能滥用闭包，否则会造成网页的性能问题。

转自：https://wangdoc.com/javascript/types/function.html#%E9%97%AD%E5%8C%85