个人中心
gpt4 book ai didi

javascript，关于闭包函数调用

转载 作者：太空宇宙 更新时间：2023-11-04 15:38:23 25 4
gpt4 key购买 nike

我对 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="demo")都会增加 123。

但是当我尝试注释代码(它使用完全相同的代码创建一个带有闭包的函数)时，每次单击时段落值都保持在 123。

在这种情况下，我有几个问题要问。

1.代码:

var add = (function (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>

当我使用注释代码声明函数时，代码运行时似乎没有发生错误，但只是段落的整数没有增加的错误。

最佳答案

你一直得到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>

关于javascript，关于闭包函数调用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44109347/

25 4 0
文章推荐： jquery - 使用 jQuery 显示/隐藏内容时奇怪的 div 选择
文章推荐： iframe - div 中具有相对大小的 HTML iframe
文章推荐： html - 如何将 html 代码添加到网站但实际上没有将其转换为代码？
文章推荐： javascript - Toastr "options"不起作用
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com