闭包
- 在了解闭包之前我们首先要了解变量的作用域。
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个）。
网友评论