我通读了解释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/