js闭包总结
参考:
- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures
- https://juejin.cn/post/7089689228614828045
闭包
一个函数和对其周围状态的引用捆绑到一起, 这样的组合就是闭包.
也就是说, 闭包让你可以在一个内层函数中访问到其外层函数的作用域.
在JavaScript中, 每当创建一个函数, 闭包就会在函数创建的同时被创建出来
词法作用域
function init() {
var name = "Mozilla"
function displayName() {
console.log(name)
}
displayName()
}
init()
上面这个词法作用域的例子, 描述了分析器如何在函数嵌套的情况下解析变量名
词法(lexical)指的是, 词法作用域根据源代码中声明变量的位置来确定该变量在何处可用
嵌套函数可访问声明于它们外部作用域的变量
function makeFunc() {
var name = "Mozilla"
function displayName() {
console.log(name)
}
return displayName
}
var myFunc = makeFunc()
myFunc()//Mozilla
上面的例子仍然打印出Mozilla的原因是, JavaScript中的函数会形成闭包(闭包是由函数以及声明该函数的词法环境组合而成的, 该环境包含了这个闭包创建时作用域内的任何局部变量)
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
上面例子中, add5和add10都是闭包, 它们共享相同的函数定义, 但是保存了不同的词法环境, 在 add5 的环境中, x 为 5, 而在 add10 中, x 则为 10
实用的闭包
闭包允许将函数及其所操作的某些数据(环境)关联起来, 类似于面向对象编程, 在面向对象编程中, 对象允许我们将某些数据(对象的属性)与一个或者多个方法相关联
通常使用只有一个方法的对象的地方, 都可以使用闭包
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.2em;
}
文本尺寸调整按钮可以修改body元素的font-size属性, 由于我们使用相对单位, 页面中的其他元素也会相应地调整
function makeSizer(size) {
return function() {
document.body.style.fontSize = size + 'px';
};
}
var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);
size12, size14, size16三个函数将分别把body文本调整为12, 14, 16像素, 我们可以将它们分别添加到按钮的点击事件上
document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;
<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">16</a>
用闭包模拟私有方法
编程语言中, 比如java, 是支持将方法声明为私有的, 即它们只能被同一个类中的其他方法所调用
而JavaScript没有这种原生支持, 但我们可以使用闭包来模拟私有方法.
私有方法不仅仅有利于限制对代码的访问, 还提供了管理全局命名空间的强大能力, 避免非核心的方法弄乱了代码的公共接口部分
下面的代码展示了如何使用闭包来定义公共函数, 并令其可以访问私有函数和变量
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, Counter.decrement, Counter.value
这三个公共函数是共享同一个环境的闭包, 多亏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 */
上面两个计数器Counter1和Counter2维护它们各自的独立性, 每个闭包都是引用自己词法作用域内的变量 privateCounter
每次调用其中一个计数器时, 通过改变这个变量的值, 会改变这个闭包的词法环境
然而在一个闭包内对变量的修改, 不会影响到另外一个闭包的变量
以这种方式使用闭包, 实现了数据隐藏和封装
在循环中使用闭包: 一个常见的错误
在es6引入let之前, 在循环中有一个常见的闭包创建问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<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>
</div>
<script>
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];
// 赋值给onfocus的是闭包, 这些闭包是由它们的函数定义和在setupHelp作用域中捕获的环境所组成的
// 这三个闭包在循环中被创建, 但他们共享了同一个词法作用域, 在这个作用域中存在一个变量item
// 这是因为item使用var进行声明, 由于变量提升, 所以具有函数作用域
// 当onfocus回调执行时, item.help的值被决定
// 由于循环在事件触发之前早已被执行完毕, 变量对象item(被三个闭包所共享)已经指向了helpText的最后一项
document.getElementById(item.id).onfocus = function() {
showHelp(item.help);
}
}
}
setupHelp();
</script>
</body>
</html>
解决的方案:
- 使用更多的闭包
- 使用es6中的let(块作用域, 不会发生变量提升)
- 使用forEach()遍历helpText数组并给每一个
<p>添加一个监听器
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);
}
})()
}
}
for (var i = 0; i < helpText.length; i++) {
// 使用let不会发生变量提升
let item = helpText[i];
document.getElementById(item.id).onfocus = function() {
showHelp(item.help);
}
}
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();
性能考量
闭包在处理速度和内存消耗方面对脚本性能具有负面影响
在创建新的对象或者类时, 方法通常应该关联于对象的原型, 而不是定义到对象的构造器中
原因是这将导致每次构造器被调用时, 方法都会被重新赋值一次(也就是说, 对于每个对象的创建, 方法都会被重新赋值)
function MyObject(name, message) {
this.name = name.toString();
this.message = message.toString();
this.getName = function() {
return this.name;
};
this.getMessage = function() {
return this.message;
};
}
避免使用闭包
function MyObject(name, message) {
this.name = name.toString();
this.message = message.toString();
}
MyObject.prototype = {
getName: function() {
return this.name;
},
getMessage: function() {
return this.message;
}
};
上面的代码重新定义了原型(不建议), 改成:
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;
};
闭包的作用
- 保护函数的私有变量不受外部的干扰。形成不销毁的栈内存。
- 保存，把一些函数内的值保存下来。闭包可以实现方法和属性的私有化
