可变受封

我通过Explaining Javascript Scope and Closures 可变受封

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

我希望在单击div时读取“START”而不是“END”的提示... help？

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>

来源

2015-02-10 Roman Rekhler

的问题。当你执行点击时，你已经改变了它的价值。下面的代码将工作。

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>

来源

2015-02-10 23:09:02 user1545858

感谢！.. 这个工作，但createCallback的（）函数是没有必要的。我猜想的关键是在新函数的范围内创建一个新变量，其值从内部函数中取出。但是，为什么这不仅仅是传递我不知道的最初someString的句柄。在Java中，我会使用新的字符串，使其完全新...下面为我工作 'document.getElementById（'elem7'）。onclick = function（）{ var newSomeString = someString; return function（）{ alert（newSomeString）; } }（）;' – 2015-02-10 23:29:09

@RomanRekhler，是的，createCallBack函数只是我个人的偏好。你说的都对。如果我没有记错，字符串是JS中的原始对象。和Java一样，原语也没有被引用。 – user1545858 2015-02-10 23:42:42

@RomanaRekhler不确定你是否注意到我的答案（实际上是在这之前发表的），但我解释了这个问题的答案并给了你一个例子。我也在那里修复了你的背景色css。不知道为什么我打扰有时回答。 :) – Antiga 2015-02-11 00:15:16

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/

来源

2015-02-10 23:07:37 Antiga

回答

相关问题