js闭包的理解

Posted 2021-03-25 嘉煠

本文来源：MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures

　　闭包：最开始的解释就是说函数套函数，嵌套（内部）函数对其容器（外部）函数是私有的。它自身就形成了一个闭包。

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

var myFunc = makeFunc();
myFunc();

　　makeFunc() 创建了一个局部变量 name 和一个名为 displayName() 的函数。displayName() 是定义在 makeFunc() 里的内部函数，仅在该函数体内可被获取;重点：闭包可以让你从内部函数访问外部函数作用域，所以说makeFunc()就是一个闭包。

     在例子中，myFunc 是执行 makeFunc 时创建的 displayName 函数实例的引用（因为makeFunc() return displayName），而 displayName 实例仍可访问其词法作用域(makeFunc函数的作用域--根据声明变量的位置来确定该变量可被访问的位置 )中的变量，即可以访问到 name 。由此，当 myFunc 被调用时，name 仍可被访问，其值 Mozilla 就被传递到alert中。

 

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

var add5 = makeAdder(5); //add5 = function(y){ return 5 + y};
var add10 = makeAdder(10);

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

　　我们定义了 makeAdder(x) 函数，它接受一个参数 x ，并返回一个新的函数。返回的函数接受一个参数 y，并返回x+y的值

用闭包模拟私有方法  (如何使用闭包来定义公共函数，并令其可以访问私有函数和变量)

var makeCounter = function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  }  
};

var Counter1 = makeCounter();
var Counter2 = makeCounter();
console.log(Counter1.value()); /* logs 0 */
Counter1.increment();
Counter1.increment();
console.log(Counter1.value()); /* logs 2 */
Counter1.decrement();
console.log(Counter1.value()); /* logs 1 */
console.log(Counter2.value()); /* logs 0 */

　　利用闭包实现新添加的属性（方法）--封装新的方法，每调用一个函数，都会有属于自己的环境，各自互不干扰。

　　每个闭包都是引用自己词法作用域内的变量 privateCounter 。每次调用其中一个计数器时，通过改变这个变量的值，会改变这个闭包的词法环境。然而在一个闭包内对变量的修改，不会影响到另外一个闭包中的变量。