闭包及其应用

闭包

• 在了解闭包之前我们首先要了解变量的作用域。
  1、在es6之前作用域只有两种，即全局作用域和函数作用域。
  2、在函数内部定义的变量，在外部是访问不到的，但是函数内部却可以访问得到全局变量和父作用域的变量（在函数中再定义一个函数就形成了父子作用域了，子能访问父，但是父不能直接访问子）
• 接下来来看一个代码例子。

    function test() {
        var name = 'hhj'
    }
    console.log(name); // 出错

这样是不能直接访问得到name = 'hhj'的，接下来形成一个闭包就能访问了。

    function test() {
        var name = 'hhj';
        //形成闭包
        return function () {
            return name
        }
    }
    console.log(test()()); // hhj

所以简单来说，闭包就是能够读取其他函数内部变量的函数。在javascript中，只有函数内部的子函数才能读取在函数中定义的变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

闭包的作用

闭包常用的手段，返回一个能够访问内部变量的函数或者一个拥有这种函数的对象。

例子1：计数器

var makeCounter = function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
// 形成闭包，提供访问、修改每个实例作用域中的privateCounter 
  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 是互不干扰的。makeCounter 方法返回了一个对象，通过这个对象可以，通过这个对象可以操作对应的实例作用域的privateCounter 。

例子2：动态改变标签的内容

<p id="help">Helpful notes will appear here</p>
<p>E-mail: <input type="text" id="email" name="email"></p>
<p>Name: <input type="text" id="name" name="name"></p>
<p>Age: <input type="text" id="age" name="age"></p>

1、假如我们想让鼠标指向Name、Age等标签时，最上面的Helpful notes will appear here动态的变化成对应的信息。于是我们就有了下面的js代码。

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() {  // 匿名函数A
      showHelp(item.help);
    }
  }
}
setupHelp();

2、我们发现上面这段代码并没有达到我们预想的效果，无论指向那一个标签都会显示Your age (you must be over 16)。这是因为虽然三个元素都绑定了一个匿名函数A，函数A在for循环的作用域内，当调用时，访问的是这个for循环作用域的item，这个item在最后一次循环时指向了 {'id': 'age', 'help': 'Your age (you must be over 16)'}就不在变了，所以显示的都是Your age (you must be over 16)。下面是修改了之后的代码。

function showHelp(help) {
  document.getElementById('help').innerHTML = help;
}
//这个函数执行后，会开辟新的内存空间，传进来的参数会被保存
function makeHelpCallback(help) {
//形成闭包，能够访问传进来的参数
  return function() { // 返回方法A
    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);//makeHelpCallback 开辟了新内存空间形成新的作用域。
  }
}
setupHelp();

3、这段代码就能够达到我们想要的效果了，每次循环makeHelpCallback 都会开辟新的内存空间（例子中开辟了3个），并且返回了一个方法A（例子中返回了3个），这个方法A能够访问对应空间的help，这个help值就是我们传进的item.help（例子中穿了不一样的3个）。