如何向某人解释JavaScript关闭,知道它们所构成的概念(例如功能、变量等),但不了解关闭本身?
我已经在维基百科上看到了图表的例子,但不幸的是,它没有帮助。
如何向某人解释JavaScript关闭,知道它们所构成的概念(例如功能、变量等),但不了解关闭本身?
我已经在维基百科上看到了图表的例子,但不幸的是,它没有帮助。
当前回答
想象一下,在你的城市里有一个非常大的公园,你会看到一个名叫Coder先生的魔法师在公园的不同角落开始棒球游戏,使用他的魔法窗口,称为JavaScript。
当然,每个棒球游戏都有相同的规则,每个游戏都有自己的分数板。
当然,一个棒球游戏的分数与其他游戏完全分开。
关闭是Coder先生保持所有他的魔法棒球游戏的分数的特殊方式。
其他回答
这个过程由两个步骤组成:
此分類上一篇
函数可以相互内置,形成一连锁的LexicalEnvironments,也可以称为范围链。
此分類上一篇
此分類上一篇
正如我们所看到的, this.say 是用户对象中的属性,因此在用户完成后,它仍然活着。
如果你记得,当 this.say 创建时,它(就像每个函数一样)得到一个内部参考 this.say 到当前的 LexicalEnvironment. 因此,当前用户执行的 LexicalEnvironment 保持在记忆中。
内部函数保留对外的LexicalEnvironment的参考,内部函数可以随时从中访问变量,即使外部函数完成,浏览器保留LexicalEnvironment及其所有属性(变量)在记忆中,直到有一个内部函数引用它。
这就是所谓的关闭。
答案:这个答案是写的,当问题是:
正如老阿尔伯特所说:“如果你不能向一个六岁的人解释,你真的不明白自己。 好吧,我试图向一个27岁的朋友解释JS的关闭,并且完全失败了。
一时一刻:
有一位公主......
function princess() {
她在一个充满冒险的奇妙世界中生活,她遇到了她的魅力王子,围绕着一个独角兽的世界,战斗的龙,遇到了谈话的动物,以及许多其他幻想的东西。
var adventures = [];
function princeCharming() { /* ... */ }
var unicorn = { /* ... */ },
dragons = [ /* ... */ ],
squirrel = "Hello!";
/* ... */
return {
她经常会告诉他们她作为公主的最新惊人的冒险。
story: function() {
return adventures[adventures.length - 1];
}
};
}
但是,他们只会看到一个小女孩。
var littleGirl = princess();
关于魔法和幻想的故事。
littleGirl.story();
即使成年人知道真正的公主,他们永远不会相信单身或龙,因为他们永远不会看到它们。
这是一个真正的公主,里面有一个小女孩。
函数 foo(x) { var tmp = 3;函数栏(y) { console.log(x + y + (++tmp)); // 会记录 16 } 栏(10); } foo(2);
函数栏,以及其与函数 foo 的语法环境的联系,是关闭。
函数 foo(x) { var tmp = 3; 返回函数 (y) { console.log(x + y + (++tmp)); // 还会记录 16 } } var bar = foo(2); bar(10); // 16 bar(10); // 17
一个关闭的最简单的例子是:
var a = 10; 函数测试() { console.log(a); // 将输出 10 console.log(b); // 将输出 6 } var b = 6; 测试();
雖然在網路上有許多美麗的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);
});
});
有用的链接:
感谢上面的链接,这有助于我更好地理解和解释关闭。
我思考关闭的越多,我会看到它作为一个2步过程: init - 行动
init: pass first what's needed...
action: in order to achieve something for later execution.
到6岁时,我会强调关闭的实际方面:
Daddy: Listen. Could you bring mum some milk (2).
Tom: No problem.
Daddy: Take a look at the map that Daddy has just made: mum is there and daddy is here.
Daddy: But get ready first. And bring the map with you (1), it may come in handy
Daddy: Then off you go (3). Ok?
Tom: A piece of cake!
例如:把一些牛奶带到妈妈(=行动)。首先做好准备,然后把地图(=init)带到这里。
function getReady(map) {
var cleverBoy = 'I examine the ' + map;
return function(what, who) {
return 'I bring ' + what + ' to ' + who + 'because + ' cleverBoy; //I can access the map
}
}
var offYouGo = getReady('daddy-map');
offYouGo('milk', 'mum');
因为如果你带着一个非常重要的信息(地图),你有足够的知识来执行其他类似的操作:
offYouGo('potatoes', 'great mum');
对于一个开发人员来说,我会在关闭和OOP之间进行平行。 init 阶段类似于在传统 OO 语言中向构建者传达论点; 行动阶段最终是你呼吁实现你想要的方法。
请参见我的另一个答案,描述OO和关闭之间的平行性:
如何在JavaScript中“正确”创建自定义对象?