javascript，关于闭包函数调用
我对javascript非常陌生，在函数调用和闭包方面遇到了一些问题。
下面是我在w3schools中尝试过的代码，
<!DOCTYPE html>
<html>
<body>
<p>Counting with a local variable.</p>
<button type="button" id="btn">Count!</button>
<p id="demo">0</p>
<script>
var add = (function (test) {
var counter = 0;
return function (test) {return counter += test;}
})();
/*function add(test){
var counter = 0;
return function (test) {return counter += test;}
}*/
function myFunction(){
document.getElementById("demo").innerHTML = add(123);
//document.getElementById("demo").innerHTML = add().call(this, 123);
}
var btn = document.getElementById("btn");
btn.addEventListener("click", myFunction);
</script>
</body>
</html>
它对当前代码很好，每次我按下按钮，段落中的数字(id=“演示”)就会增加123。
但是，当我尝试使用注释代码(用完全相同的代码创建一个闭包函数)时，段落值仍然是123。
在这种情况下，我有几个问题要问。
1.守则：
变量add =(函数(test) {.}) ()；
最后一个括号的用法是什么？如果我们向最后一个括号提供参数，那么如何在变量的匿名函数(var add)的声明中使用它？
2.为什么这两种函数的定义方法会产生不同的结果？
非常感谢，任何帮助都是非常感谢的。
编辑
<!DOCTYPE html>
<html>
<body>
<p>Counting with a local variable.</p>
<button type="button" id="btn">Count!</button>
<p id="demo">0</p>
<script>
/*var add = (function (test) {
var counter = 0;
return function (test) {return counter += test;}
})();*/
function add(test){
var counter = 0;
return function (test) {return counter += test;}
}
function myFunction(){
//document.getElementById("demo").innerHTML = add(123);
document.getElementById("demo").innerHTML = add().call(this, 123);
}
var btn = document.getElementById("btn");
btn.addEventListener("click", myFunction);
</script>
</body>
</html>
当我使用注释代码声明函数时，运行的代码似乎没有出现错误，但这只是一个错误，该段的整数没有增加。
回答 3
Stack Overflow用户
发布于 2017-05-22 10:02:10
您一直得到123的原因是，每次单击该按钮时，您都会在计数器变量上接受一个新的内部函数，其值为0；因此，counter的值始终保持为0，而当您将123添加到0时，则得到123。如果将闭包部分移出事件处理程序，将得到与第一种情况完全相同的结果。
注意行var inner = add(); //<---Notice this line。这需要关闭一次，然后您将继续增加counter的值。
另外，请注意myFunction中的这一行
document.getElementById("demo").innerHTML = inner.call(this, 123);在这里，我们调用我们之前引用过的内部函数。
/*var add = (function (test) {
var counter = 0;
return function (test) {return counter += test;}
})();*/
function add(test) {
var counter = 0;
return function(test) {
return counter += test;
}
}
var inner = add(); //<---Notice this line
function myFunction() {
//document.getElementById("demo").innerHTML = add(123);
document.getElementById("demo").innerHTML = inner.call(this, 123);
}
var btn = document.getElementById("btn");
btn.addEventListener("click", myFunction);<p>Counting with a local variable.</p>
<button type="button" id="btn">Count!</button>
<p id="demo">0</p>
Stack Overflow用户
发布于 2017-05-22 09:35:43
- ()是调用您刚刚声明的匿名函数，它返回另一个匿名函数。如果您提供了一个参数，它将被提供给您的函数(test)。在这种情况下，实际上不需要第一个测试参数。只是没用而已。
- 对于注释过的代码，它返回一个函数。而且这个函数从未被调用过。
Stack Overflow用户
发布于 2017-05-22 09:49:21
()最后一个括号是执行它。
你所举的例子就是生活的例子。IIFE用于限制所有ur变量的作用域，以便可以取消命名空间。
//without params
(function(){
//...
})()
//-OR- (both are same)
(function(){
//...
}())
//with params. if u ever wondered how that $ variable was being used in jquery, this is how.
(function(jquery){
})(jquery);
//es6
(
() => { ... }
)()闭包是一个编程概念，在这个概念中，允许(否则)范围外的变量持久存在。不要在大对象集合中使用闭包！
var outer = function(p1){
var inner = function (p2) {
return (p1 + p2);
return inner;
}; //outer ends.
var x = outer(10);
x(20); //20 + 10;
x(30); //30 + 10;
x(40); //40 + 10;https://stackoverflow.com/questions/44109347
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号