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

问题在于代码执行时。执行单击时，您已经更改了其值。以下代码可以使用。

＆＃13;

var someString = "START";
function createCallback() {

    var newSomeString = new String(someString);
    return function() {
       alert(newSomeString);
    }
}

document.getElementById('elem').onclick = createCallback();

someString = "END";

＆＃13;

<body>
<div style="background-color='pink';display:block;" id="elem">6</div>
<br>
</body>

＆＃13;

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

2 个答案: