如何向某人解释JavaScript关闭,知道它们所构成的概念(例如功能、变量等),但不了解关闭本身?
我已经在维基百科上看到了图表的例子,但不幸的是,它没有帮助。
如何向某人解释JavaScript关闭,知道它们所构成的概念(例如功能、变量等),但不了解关闭本身?
我已经在维基百科上看到了图表的例子,但不幸的是,它没有帮助。
当前回答
让我们从这里开始,正如MDN所定义的那样:关闭是指独立(自由)变量的功能(被本地使用的变量,但在关闭范围内定义)。
function init() {
var name = 'Mozilla'; // name is a local variable created by init
function displayName() { // displayName() is the inner function, a closure
alert(name); // use variable declared in the parent function
}
displayName();
}
init();
function init() {
var name = "Mozilla"; // name is a local variable created by init
function displayName() { // displayName() is the inner function, a closure
alert (name); // displayName() uses variable declared in the parent function
}
displayName();
}
init();
关闭现在考虑下面的例子:
function makeFunc() {
var name = 'Mozilla';
function displayName() {
alert(name);
}
return displayName;
}
var myFunc = makeFunc();
myFunc();
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
您可能想要做到这一点的情况在网上特别常见. 在前端JavaScript中写的代码的大部分是基于事件的 - 我们定义了一些行为,然后将其附加到用户发起的事件(如点击或键盘)。
例如,假设我们想添加一些按钮到一个页面,调整文本大小的一种方式是指定字体元素的字体大小在像素,然后设置页面上的其他元素的大小(如标题)使用相应的EM单位:
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.2em;
}
function makeSizer(size) {
return function() {
document.body.style.fontSize = size + 'px';
};
}
var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(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>
function makeSizer(size) {
return function() {
document.body.style.fontSize = size + 'px';
};
}
var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);
document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;
要了解更多关于关闭的信息,请访问MDN的链接
其他回答
第一点的例子 由 dlaliberte:
关闭不只是在您返回内部函数时创建。 事实上,关闭函数根本不需要返回. 您可以将内部函数归咎于外部范围中的变量,或者将其作为一个论点转移到另一个函数,在那里它可以立即使用。
var i;
function foo(x) {
var tmp = 3;
i = function (y) {
console.log(x + y + (++tmp));
}
}
foo(2);
i(3);
关闭是简单的
你可能不应该告诉一个六岁的关闭,但如果你这样做,你可能会说,关闭给了一个能力获得访问一个变量宣布在某些其他功能范围。
此分類上一篇
函数 getA() { var a = []; // 此操作发生后, // 函数返回后 // 函数的 `a` 值设置Timeout(函数() { a.splice(0, 0, 1, 2, 3, 4, 5); }); 返回 a; } var a = getA(); 出(‘什么是‘a` 长度?’); 出(‘a` 长度是‘ + a. 长度’); 设置Timeout(函数() { out(‘No wait...’); 出(‘a` 长度是‘ + a. 长度’); 出(‘OK : <unk> 长度’ )); <pre id="output"></
一个六岁的答案(假设他知道什么是函数,什么是变量,以及什么数据):
函数可以返回数据. 从函数可以返回的一种数据是另一个函数. 当该新函数返回时,在创建的函数中使用的所有变量和论点都不会消失. 相反,该母函数“关闭”。 换句话说,没有什么可以看到它的内部,看到它所使用的变量,除了它返回的函数。
function the_closure() {
var x = 4;
return function () {
return x; // Here, we look back inside the_closure for the value of x
}
}
var myFn = the_closure();
myFn(); //=> 4
另一种非常简单的方式来解释它是从范围来看:
每当你在更大的范围内创建一个较小的范围时,更小的范围总是能够看到更大的范围。
雖然在網路上有許多美麗的JavaScript關閉定義,但我試圖開始用我最喜歡的關閉定義來解釋我的六歲朋友,這幫助我更好地理解關閉。
关闭是一种内部功能,它可以访问外部(关闭)函数的变量 - 范围链. 关闭有三个范围链:它可以访问自己的范围(在其曲线手<unk>之间定义的变量),它可以访问外部函数的变量,并且可以访问全球变量。
关闭是指独立(自由)变量的函数,换句话说,关闭中定义的函数“记得”它所创造的环境。
关闭的用途:
关闭是有用的隐藏功能的实施,同时仍然揭示界面。
您可以使用关闭在 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
function makeAdder(x) {
return {
add: function(y){
return x + y;
}
}
}
var add5 = makeAdder(5);
console.log(add5.add(2));//7
var add10 = makeAdder(10);
console.log(add10.add(2));//12
例子3:在jQuery中关闭
$(function(){
var name="Closure is easy";
$('div').click(function(){
$('p').text(name);
});
});
有用的链接:
感谢上面的链接,这有助于我更好地理解和解释关闭。
一个关闭是许多JavaScript开发人员使用的所有时间,但我们认为它是允许的。
var x = 1;
function myFN() {
alert(x); //1, as opposed to undefined.
}
// Or
function a() {
var x = 1;
function b() {
alert(x); //1, as opposed to undefined.
}
b();
}
那么什么呢?
在其他语言中,在函数返回时,函数中使用的变量会被清除,在上面的函数中,x 会是一个“零指标”,你需要设置一个点击和设置并开始通过参考。
我为什么要关心?
但是,正如其他人也指出的那样,它们可以用来创建虚假的私人变量,直到你需要私人变量,只需像你总是一样使用它们。