如何向某人解释JavaScript关闭,知道它们所构成的概念(例如功能、变量等),但不了解关闭本身?
我已经在维基百科上看到了图表的例子,但不幸的是,它没有帮助。
如何向某人解释JavaScript关闭,知道它们所构成的概念(例如功能、变量等),但不了解关闭本身?
我已经在维基百科上看到了图表的例子,但不幸的是,它没有帮助。
当前回答
我写了一篇博客帖子一段时间后解释关闭,这里是我在关闭方面所说的,为什么你会想要一个。
关闭是让一个函数有持久的,私人变量的方式 - 也就是说,只有一个函数知道的变量,在那里它可以跟踪从以前运行的时间的信息。
在这个意义上,他们让一个函数有点像一个具有私人属性的对象。
完整帖子:
那么,这些关闭事物是什么呢?
其他回答
曾经有过一个洞穴
function caveman {
有一个非常特殊的岩石的人,
var rock = "diamond";
你不能自己拿到岩石,因为它是洞穴的私人洞穴,只有洞穴人知道如何找到和拿到岩石。
return {
getRock: function() {
return rock;
}
};
}
幸运的是,他是一个友好的骑士,如果你愿意等待他的回来,他会很高兴得到它为你。
var friend = caveman();
var rock = friend.getRock();
非常聪明的 Caveman。
下面的例子是JavaScript关闭的一个简单的描述,这是关闭函数,返回函数,并访问其本地变量x,
function outer(x){
return function inner(y){
return x+y;
}
}
接下来的函数如下:
var add10 = outer(10);
add10(20); // The result will be 30
add10(40); // The result will be 50
var add20 = outer(20);
add20(20); // The result will be 40
add20(40); // The result will be 60
var foo = function() {
alert("Hello World!");
};
var bar = function(arg) {
return arg;
};
bar(foo)();
function add(value1, value2) {
function doAdd(operand1, operand2) {
return operand1 + operand2;
}
return doAdd(value1, value2);
}
var foo = add(1, 2);
// foo equals 3
function add(value1, value2) {
function doAdd() {
return value1 + value2;
}
return doAdd();
}
var foo = add(1, 2);
// foo equals 3
创建关闭 一个关闭是当一个内部函数从创建它的函数的外部可访问时创建的,这通常发生在一个外部函数返回一个内部函数时,当这种情况发生时,内部函数保持了一个参考到它创建的环境。
function add(value1) {
return function doAdd(value2) {
return value1 + value2;
};
}
var increment = add(1);
var foo = increment(2);
// foo equals 3
function increment(value2) {
return 1 + value2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Closures</title>
<meta charset="UTF-8" />
<script>
window.addEventListener("load", function() {
window.setInterval(showMessage, 1000, "some message<br />");
});
function showMessage(message) {
document.getElementById("message").innerHTML += message;
}
</script>
</head>
<body>
<span id="message"></span>
</body>
</html>
window.addEventListener("load", function() {
var showMessage = getClosure("some message<br />");
window.setInterval(showMessage, 1000);
});
function getClosure(message) {
function showMessage() {
document.getElementById("message").innerHTML += message;
}
return showMessage;
}
模拟私人数据
function Person(name) {
this._name = name;
this.getName = function() {
return this._name;
};
}
var person = new Person("Colin");
person._name = "Tom";
// person.getName() now returns "Tom"
function Person(name) {
var _name = name;
this.getName = function() {
return _name;
};
}
var person = new Person("Colin");
person._name = "Tom";
// person._name is "Tom" but person.getName() returns "Colin"
在LOPS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Closures</title>
<meta charset="UTF-8" />
<script>
window.addEventListener("load", function() {
for (var i = 1; i < 4; i++) {
var button = document.getElementById("button" + i);
button.addEventListener("click", function() {
alert("Clicked button " + i);
});
}
});
</script>
</head>
<body>
<input type="button" id="button1" value="One" />
<input type="button" id="button2" value="Two" />
<input type="button" id="button3" value="Three" />
</body>
</html>
要解决这个问题,关闭必须从实际路径变量中分开,这可以通过呼叫一个新的函数来完成,这反过来创造了一个新的参考环境,下面的例子表明如何做到这一点,路径变量转移到 getHandler() 函数, getHandler() 然后返回一个独立于原来的“为”路径的关闭。
function getHandler(i) {
return function handler() {
alert("Clicked button " + i);
};
}
window.addEventListener("load", function() {
for (var i = 1; i < 4; i++) {
var button = document.getElementById("button" + i);
button.addEventListener("click", getHandler(i));
}
});
function Person(name) {
var _name = name;
this.getName = function() {
return _name;
};
this.sayHello = function() {
alert("Hello!");
};
}
function Person(name) {
var _name = name;
this.getName = function() {
return _name;
};
}
Person.prototype.sayHello = function() {
alert("Hello!");
};
要记住的事情
此分類上一篇
JavaScript 在两个阶段运行代码:
编辑阶段 // JavaScript 不是纯粹的语言解释 执行阶段
论点也存储在本地范围为f. 每当创建一个本地执行背景或范围时,它都包含对其母范围的参考指标. 所有变量访问都跟随这个词汇范围链以找到其价值. 如果一个变量不在本地范围中,它跟随链,并在其母范围中找到它. 这也是为什么一个本地变量在母范围中超越变量
什么是关闭?
它是函数与其范围链之间的暗示,永久的联系......函数定义(lambda)隐藏的范围参考,保持范围链(防止垃圾收集)。它被使用并复制为“外部环境参考”随时函数运行。
var data = "My Data!";
setTimeout(function() {
console.log(data); // Prints "My Data!"
}, 3000);
明確的關閉
function makeAdder(n) {
var inc = n;
var sum = 0;
return function add() {
sum = sum + inc;
return sum;
};
}
var adder3 = makeAdder(3);
此答案的版本图像: [ 解决]
只是忘记每件事的范围,并记住:当一个变量需要在某个地方,JavaScript不会破坏它。
例子1:
此分類上一篇
例子2:
此分類上一篇
例子3: