JS篇： 闭包

闭包

2021/5/3

一. 什么是闭包？

• 一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。
• 闭包让你可以在一个内层函数中访问到其外层函数的作用域。
• 在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。

二. 词法作用域

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

  • displayName() 是定义在 init() 里的内部函数，并且仅在 init() 函数体内可用。
  • 因为它可以访问到外部函数的变量，所以 displayName() 可以使用父函数 init() 中声明的变量 name 。

• 这个词法作用域的例子描述了分析器如何在函数嵌套的情况下解析变量名。

• 词法（lexical）一词指的是，词法作用域根据源代码中声明变量的位置来确定该变量在何处可用。

• 嵌套函数可访问声明于它们外部作用域的变量。

三. 闭包

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

  • 内部函数 displayName() 在执行前，从外部函数返回。但运行这段代码的效果和之前 init() 函数的示例完全一样。
  • 原因在于，JavaScript中的函数会形成了闭包。
  • 闭包是由函数以及声明该函数的词法环境组合而成的。该环境包含了这个闭包创建时作用域内的任何局部变量。
  • 在本例子中，myFunc 是执行 makeFunc 时创建的 displayName 函数实例的引用。
  • displayName 的实例维持了一个对它的词法环境（变量 name 存在于其中）的引用。
  • 因此，当 myFunc 被调用时，变量 name 仍然可用。

• 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
  

  • makeAdder 是一个函数工厂
  • add5 和 add10 都是闭包。
  • 它们共享相同的函数定义，但是保存了不同的词法环境。

四. 闭包实战

1. 切换页面字号

• function makeSizer(size) {
    return function() {
      document.body.style.fontSize = size + 'px';
    };
  }
  // 调用下面不同的实例，便可切换页面字号
  var size12 = makeSizer(12);
  var size14 = makeSizer(14);
  var size16 = makeSizer(16);
  

2. 模拟私有方法

• 私有方法不仅仅有利于限制对代码的访问：还提供了管理全局命名空间的强大能力，避免非核心的方法弄乱了代码的公共接口部分。

• JavaScript 没有这种原生支持将方法声明为私有的API

• 但我们可以使用闭包来模拟私有方法。

• var Counter = (function() {
    var privateCounter = 0;
    function changeBy(val) {
      privateCounter += val;
    }
    return {
      increment: function() {
        changeBy(1);
      },
      decrement: function() {
        changeBy(-1);
      },
      value: function() {
        return privateCounter;
      }
    }
  })();
  
  console.log(Counter.value()); /* logs 0 */
  Counter.increment();
  Counter.increment();
  console.log(Counter.value()); /* logs 2 */
  Counter.decrement();
  console.log(Counter.value()); /* logs 1 */
  

  • 本例只创建一个词法环境，为三个函数所共享。
  • 该共享环境包含两个私有项，这两项都无法在这个匿名函数外部直接访问。必须通过匿名函数返回的三个公共函数访问。
  • 这三个公共函数是共享同一个环境的闭包，JavaScript 的词法作用域让它们都可以访问 privateCounter 变量和 changeBy 函数。

改一下

• 将匿名的立即执行函数改为一个正常的匿名将函数并赋值给一个变量

• 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 */
  

3. 解决for循环var变量提升的问题

解释for循环

• for循环每循环一次都会创建一个块，并且for循环是很短的时间就循环结束了
• 而var创建的变量不存在块级作用域，还存在变量提升
• 所以最后所有块内的var声明的那个变量的值因为变量提升就成了最新的那个值

示例

• <p id="help">Helpful notes will appear here</p>
  
  <input type="text" id="email" name="email">
  <input type="text" id="name" name="name">
  <input type="text" id="age" name="age">
  
  -------------------------------------------------------------------------------------
  
  function showHelp(help) {
    document.getElementById('help').innerHTML = help;
  }
  
  function setupHelp() {
    var helpText = [
        {'id': 'email', 'help': 'Your e-mail address'},
        {'id': 'name', 'help': 'Your full name'},
        {'id': 'age', 'help': 'Your age (you must be over 16)'}
      ];
  
    for (var i = 0; i < helpText.length; i++) {
      var item = helpText[i];
      document.getElementById(item.id).onfocus = function() {
        showHelp(item.help);
      }
    }
  }
  
  setupHelp();
  

  • 赋值给 onfocus 的是闭包。这些闭包是由他们的函数定义和在 setupHelp 作用域中捕获的环境所组成的。
  • 这三个闭包在循环中被创建，但他们共享了同一个词法作用域，在这个作用域中存在一个变量item。
  • 这是因为变量item使用var进行声明，由于变量提升，所以具有函数作用域。
  • 当onfocus的回调执行时，变量对象item（被三个闭包所共享）已经指向了helpText的最后一项。

解决方案

1.使用更多的闭包

• function showHelp(help) {
    document.getElementById('help').innerHTML = help;
  }
  
  function makeHelpCallback(help) {
    return function() {
      showHelp(help);
    };
  }
  
  function setupHelp() {
    var helpText = [
        {'id': 'email', 'help': 'Your e-mail address'},
        {'id': 'name', 'help': 'Your full name'},
        {'id': 'age', 'help': 'Your age (you must be over 16)'}
      ];
  
    for (var i = 0; i < helpText.length; i++) {
      var item = helpText[i];
      document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
    }
  }
  
  setupHelp();
  

• 使用工厂函数makeHelpCallback为每一个回调创建一个新的词法环境。

• 所有的回调不再共享同一个环境，在这些环境中，help 指向 helpText 数组中对应的字符串。

2. 使用匿名闭包

• function showHelp(help) {
    document.getElementById('help').innerHTML = help;
  }
  
  function setupHelp() {
    var helpText = [
        {'id': 'email', 'help': 'Your e-mail address'},
        {'id': 'name', 'help': 'Your full name'},
        {'id': 'age', 'help': 'Your age (you must be over 16)'}
      ];
  
    for (var i = 0; i < helpText.length; i++) {
      (function() {
         var item = helpText[i];
         document.getElementById(item.id).onfocus = function() {
           showHelp(item.help);
         }
      })(); // 马上把当前循环项的item与事件回调相关联起来
    }
  }
  
  setupHelp();
  

3. 使用let关键字

•  for (var i = 0; i < helpText.length; i++) {
      let item = helpText[i];// 使用let而不是var，因此每个闭包都绑定了块作用域的变量，这意味着不再需要额外的闭包
      document.getElementById(item.id).onfocus = function() {
        showHelp(item.help);
      }
    }
  

4. 使用 forEach()来遍历helpText数组

•  helpText.forEach(function(text) {
      document.getElementById(text.id).onfocus = function() {
        showHelp(text.help);
      }
    });
  

五. 性能考量

• 如果不是某些特定任务需要使用闭包，在其它函数中创建函数是不明智的，因为闭包在处理速度和内存消耗方面对脚本性能具有负面影响。

• 在创建新的对象或者类时，方法通常应该关联于对象的原型，而不是定义到对象的构造器中。

• 原因是这将导致每次构造器被调用时，方法都会被重新赋值一次（也就是说，对于每个对象的创建，方法都会被重新赋值）。

• function MyObject(name, message) {
    this.name = name.toString();
    this.message = message.toString();
  }
  MyObject.prototype.getName = function() {
    return this.name;
  };
  MyObject.prototype.getMessage = function() {
    return this.message;
  };