JS闭包

Posted 2021-09-13 浅墨

1、变量作用域
变量的作用域有两种：全局变量和局部变量。
函数内部可以直接读取全局变量，但是在函数外部无法读取函数内部的局部变量。

2、如何从外部读取函数内部的局部变量？
出于种种原因，我们有时候需要获取到函数内部的局部变量。但是，上面已经说过了，正常情况下，这是办不到的！只有通过变通的方法才能实现。
那就是在函数内部，再定义一个函数。

function f1() {
  var n=999;
　function f2(){
　  alert(n); // 999
　}
}

在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。
这就是javascript语言特有的"链式作用域"结构（chain scope），
子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。
既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！

3、闭包的概念
上面代码中的f2函数，就是闭包。
函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起构成闭包（closure）。也就是说，闭包可以让你从内部函数访问外部函数作用域。
闭包是由函数以及声明该函数的词法环境组合而成的。 该环境包含了这个闭包创建时作用域内的任何局部变量。
简单理解就是：闭包就是能够读取其他函数内部变量的函数，或者定义在一个函数内部的函数。

4、闭包的例子：

function init() {
  var name = "Mozilla"; // name 是一个被 init 创建的局部变量
  function displayName() { // displayName() 是内部函数，一个闭包
    alert(name); // 使用了父函数中声明的变量
  }
  displayName();
}
init();

function makeFunc() {
  var name = "Mozilla";
  function displayName() {
    alert(name);
  }
  return displayName;
}
var myFunc = makeFunc();
myFunc();

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2)); // 7
console.log(add10(2)); // 12

function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + \'px\';
  };
}

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);

document.getElementById(\'size-12\').onclick = size12;
document.getElementById(\'size-14\').onclick = size14;
document.getElementById(\'size-16\').onclick = size16;

5、闭包的用途
（1）就是前面提到的可以读取函数内部的变量。
（2）就是让这些变量的值始终保持在内存中，不会在f1调用后被自动清除。为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。
（3）闭包允许将函数与其所操作的某些数据（环境）关联起来。这显然类似于面向对象编程。在面向对象编程中，对象允许我们将某些数据（对象的属性）与一个或者多个方法相关联。因此，通常你使用只有一个方法的对象的地方，都可以使用闭包。

6、使用闭包的注意点
（1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
（2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

参考 ：https://www.cnblogs.com/cxyin...