未使用JS闭包将变量传递给onClick函数

Variable not being passed to onClick function using JS closures

本文关键字：onClick 函数 变量 JS 闭包 未使用      更新时间：2023-09-26

我通读了解释Javascript作用域和闭包

但我似乎无法使以下代码正常工作。正如你所看到的，我已经尝试了很多变体，但无法将当前值传递给稍后调用的函数。

我希望在单击div时，警报显示为"START"而不是"END"。。。帮助

var someString = "START";
document.getElementById('elem1').onclick = function(){
   return function(someString){
           alert(someString);
     }();
  };
document.getElementById('elem2').onclick = function(){
           alert(someString);
  };
document.getElementById('elem3').onclick = function(){
    alert(new String(someString));
};
document.getElementById('elem4').onclick = function(someString){
   return function(someString){
           alert(someString);
     }();
  };
document.getElementById('elem5').onclick = function(someString){
   return function(){
           alert(someString);
     }();
  };
document.getElementById('elem6').onclick = function(){
    var newSomeString =someString; 
    alert(newSomeString);
};
var someString = "END";
<body>
<div style="background-color='yellow';display:block;" id="elem1">1</div>
<br>
<div style="background-color='red';display:block;" id="elem2">2</div>
<br>
<div style="background-color='blue';display:block;" id="elem3">3</div>
<br>
<div style="background-color='green';display:block;" id="elem4">4</div>
<br>
<div style="background-color='orange';display:block;" id="elem5">5</div>
<br>
<div style="background-color='pink';display:block;" id="elem6">6</div>
<br>
</body>

问题在于代码何时执行。当您执行单击时，您已经更改了它的值。以下代码将起作用。

var someString = "START";
function createCallback() {
    var newSomeString = new String(someString);
    return function() {
       alert(newSomeString);
    }
}
document.getElementById('elem').onclick = createCallback();
someString = "END";
<body>
<div style="background-color='pink';display:block;" id="elem">6</div>
<br>
</body>

JavaScript在功能范围内。您将回调函数附加到所有这些侦听器，但在实际触发回调之前不会执行这些函数。到那时，您已经更改了消息的值。

如果您想封装作用域，您有几个选项。例如，您可以将连接侦听器的逻辑封装在IIFE中。

您也可以将工作转移到准备好后运行的函数中。这里有一个例子：

var someString = "START";
setListener();
function setListener(message) {
    message = message || someString;
    document.getElementById('elem1').onclick = function(){
        alert(message);
    };
}
var someString = "END";

http://jsfiddle.net/dh2hr2px/1/

相关文章：