闭包学习理解

闭包(closure) – 延伸了变量的作用域

闭包：一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。指有权访问另一个函数作用域中变量的函数。

闭包可以在一个内层函数中访问到其外层函数的作用域。延伸了变量的作用域

在JavaScript中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。

示例1：

// 外层函数 -- 声明一个变量；return 一个内部函数
funciton fn() {
    var num = 0;
    // 内层函数
    return function() { // 调用外部函数 fn()的变量 num
        console.log(++num) // 延伸了num 作用域
    }
}
var fun = fn();
fun(); // 打印结果为 1
fun(); // 打印结果为 2

在本例子中，fun 是执行 fn 时创建的函数实例(return 的函数)的引用。该函数的实例维持了一个对它的词法环境（变量 num存在于其中）的引用。因此，当fun被调用时，变量num` 仍然可用，所以打印结果为 1

词法作用域

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

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

示例2:

function makeAdder(x) {
    return function(y) {
        return x + y;
    }
}
var add5 = makeAdder(5);
var add10 = makeAdder(10);
console.log(add5(2)); // 打印结果为 5
console.log(add10(2)); // 打印结果为 12

// 解析
add5 = makeAdder(5) = function(y) = 5+y
add5(2) = makeAdder(5) = function(2) = 5+2 = 7
add10 = makeAdder(10) = function(y) = 10+y
add10(2) = makeAdder(10) = function(2) = 10+2 = 12

add5 和 add10 都是闭包。它们共享相同的函数定义，但是保存了不同的词法环境。在 add5 的环境中，x为5。而在add10中，x则为10。

用闭包模拟私有方法 – 面试时可能会问道

私有方法的好处：

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

在循环中创建闭包：一个常见错误 – 面试时可能会问道

在for循环中创建闭包时，可能会因为闭包共享一个词法作用域，造成错误。

解决方法：

为每个闭包创建单独的词法环境

使用匿名闭包

示例：

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();

使用关键词 let 而非 var (let 关键字有作用域；var 关键字无作用域)

可选方案 – 使用forEach()遍历数组

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)'}
    ];

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

setupHelp()

性能考量

闭包的缺点：闭包在处理速度和内存消耗方面对脚本性能具有负面影响。