[英]JavaScript Closures: MDN Practical Closures
关于向6岁的孩子解释JavaScript的关闭问题,有一个很大的stackoverflow问题。
该问题提供了许多非常有用的答案。 答案之一是参考Mozilla开发人员网络JavaScript指南中的Closures条目,该条目确实提供了简洁明了的解释(特别是,closure存储了一个函数及其环境 )。
但是,“实际关闭”下的MDN条目让我感到困惑……具体来说,在示例中需要关闭以重新设置文本大小吗? 有人可以为我澄清为什么他们需要关闭makeSizer函数吗?
作为一个初学者,我只能假设我的不使用闭包的替代方案是天真和不正确的(尽管看起来更简洁有效)?
我对MDN条目显示为文本大小关闭的理由特别感兴趣:
如果不需要为特定任务关闭文件,则在其他函数中不必要地创建函数是不明智的,因为这将在处理速度和内存消耗方面对脚本性能产生负面影响。
HTML(从MDN原始版本修改)
<p>Some paragraph text</p>
<h1>some heading 1 text</h1>
<h2>some heading 2 text</h2>
<a href="#" class="sizer">12</a>
<a href="#" class="sizer">14</a>
<a href="#" class="sizer">16</a>
CSS(未修改)
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.2em;
}
JavaScript(已修改)
(function makeSizer() {
var sizers = document.getElementsByClassName('sizer');
for (var i = 0; i < sizers.length; i++) {
sizers[i].onclick = function () {document.body.style.fontSize = this.innerHTML + "px";};
}; // close for...
})(); // close makeSizer;
function makeSizer(size) {
return function() {
document.body.style.fontSize = size + 'px';
};
}
var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);
它主要用于防止对象污染全局空间。 在闭包中,可以使变量成为局部变量,并使内部“实现”详细信息成为可能。 闭包的主要好处实际上是能够创建私有范围。
这里提出的性能参数实际上与该级别的微优化有关,而不是实际问题。
如果需要将值存储在特定名称空间中并在以后重用,则可以使用闭包,而不是使用全局名称空间示例。
全局名称空间:
var i = 0;
function inc() {
i++;
console.log(i);
}
inc(); // output 1
console.log(i); //output 1
关闭:
function closure() {
var i = 0;
return function() {
i++;
console.log(i);
}
}
myClosure = new closure();
myClosure(); //output 1;
myClosure(); //output 2;
console.log(i); //undefined
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.