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

Question

我看完了Explaining Javascript Scope and Closures

但我似乎无法使用以下代码。如您所见，我尝试了很多变体，但无法将当前值传递给稍后将调用的函数。

我希望在单击 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>

Answer 1

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/

Answer 2

问题出在代码执行时。当您执行点击时，您已经更改了它的值。下面的代码将起作用。

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>

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

Variable not being passed to onClick function using JS closures

javascript

onclick

scope

closures