需要更多关于 w3schools javascript 关闭示例的解释 [英] need more explanation on w3schools javascript closure example
问题描述
我正在尝试了解闭包，并且正在查看 W3Schools javascript 教程.这是他们通过制作计数器给出的一个示例.
<p>使用局部变量进行计数.</p><button type="button" onclick="myFunction()">Count!</button><p id="演示">0</p><脚本>var add = (function () {无功计数器 = 0;返回函数 () {返回计数器 += 1;}})();函数 myFunction(){document.getElementById("demo").innerHTML = add();}<块引用>
示例说明 变量 add 被赋值为 a 的返回值自调用函数.
自调用函数只运行一次.它将计数器设置为零(0)，并返回一个函数表达式.
这样 add 就变成了一个函数.美妙"的部分是它可以访问父作用域中的计数器.
这称为 JavaScript 闭包.它使一个具有私有"变量的函数.
计数器受匿名函数的作用域保护，并且只能使用添加功能进行更改.
注意 闭包是一个可以访问父作用域的函数，即使在父函数关闭之后.
解释还不错，但有些事情不清楚.为什么最好使用自调用函数?为什么嵌套匿名函数不是自调用函数?当计数器已经在其中返回时，为什么还要返回整个匿名函数?
闭包的概念可以解释为具有函数及其上下文.上下文在某种程度上是一种附加到函数的存储，用于解析捕获的变量(因此称为闭包?).
执行示例代码时:
var add = (function () {无功计数器 = 0;//这被提升到下面的函数上下文返回函数 () {返回计数器 += 1;}})();您创建一个上下文，其中 counter 变量被提升为匿名函数上下文，因此您可以从当前范围访问该变量.
这张图或多或少地解释了它:
在这种情况下，X 和 Y 由函数上下文捕获，并在该函数的所有执行中进行.
现在，这只是词法环境的 V8 实现.
请参阅 Vyacheslav Egorov 关于使用 V8 实现闭包的精彩解释:为了乐趣(和利润?)而探索 V8 闭包
I'm trying to understand closures and am looking at the W3Schools javascript tutorial. This is one example they give by making a counter.
<body>
<p>Counting with a local variable.</p>
<button type="button" onclick="myFunction()">Count!</button>
<p id="demo">0</p>
<script>
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
</script>
</body>
Example Explained The variable add is assigned the return value of a self-invoking function.
The self-invoking function only runs once. It sets the counter to zero (0), and returns a function expression.
This way add becomes a function. The "wonderful" part is that it can access the counter in the parent scope.
This is called a JavaScript closure. It makes it possible for a function to have "private" variables.
The counter is protected by the scope of the anonymous function, and can only be changed using the add function.
Note A closure is a function having access to the parent scope, even after the parent function has closed.
The explanation isn't bad, but a few things are unclear. Why was a self invoking function the best thing to use? Why is the nested anonymous function not the self invoking function? And why do you have to return the whole anonymous function when the counter is already returned inside of it?
The concept of closures could be explained as having functions and their contexts. A context is somewhat a kind of storage attached to the function to resolve variables captured (thus named closure?).
When the example code is executed:
var add = (function () {
var counter = 0; // This is promoted to the below's function context
return function () {return counter += 1;}
})();
You create a context where the counter variable is promoted to the anonymous function context thus you can access that variable from the current scope.
This diagram more or less explains it:
In this case, X and Y are captured by the function context and that is carried over all the executions of that function.
Now, this is just the V8 implementation of lexical environments.
See Vyacheslav Egorov great explanation on closure implementations using V8: Grokking V8 closures for fun (and profit?)
这篇关于需要更多关于 w3schools javascript 关闭示例的解释的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
