如何获取匿名函数中定义的变量？

Question

我有一个功能，看起来像这样：

foo = document.getElementById("something"); 

foo.addEventListener('change', function(e){ 
    value = this[this.selectedIndex].text 
    id = this[this.selectedIndex].value 
}, false); 


alert(value) // nothing 

有没有什么办法让value和id的职能范围？

Answer 1

这里的问题与您的代码流。你已经添加了一个事件侦听器，稍后将会异步触发。但是，在发生更改事件之前，您的警报将在添加事件侦听器之后立即触发。

如果你只是想拉出来的范围，使用它之前宣布的事件侦听输入的值和ID：

foo = document.getElementById("something"); 

var value, id; 
foo.addEventListener('change', function(e){ 
    value = this[this.selectedIndex].text 
    id = this[this.selectedIndex].value 
}, false); 

Answer 2

帮助？ 更改下拉选项后，可以将该值传递给回调函数。你会得到事件处理程序的值的原因是因为你将它们分配给事件处理程序，但在处理程序之外声明它们。 请参见下面的例子：

foo = document.getElementById("something"); 
 
var value, id; 
 

 
foo.addEventListener('change', function(e){ 
 
    value = this[this.selectedIndex].text; 
 
    id = this[this.selectedIndex].value; 
 
    callBack(); 
 
}, false); 
 

 
function callBack() { 
 
    alert(value); 
 
}

<select id="something"> 
 
<option value="1">One</option> 
 
<option value="2">Two</option> 
 
</select>

你没有得到你的代码值的原因是事件处理程序代码正在对change事件后执行。但是，那时alert代码没有得到执行。 请注意，在外部作用域中声明的变量可以在内部作用域内访问，但反之亦然。

Answer 3

我建议为值使用一个对象，因为您可以收集一个对象中的所有值而不会污染全局范围。

var foo = document.getElementById("something"), 
    values = {}; 

foo.addEventListener('change', function(e) { 
    values.value = this[this.selectedIndex].text; 
    values.id = this[this.selectedIndex].value; 
}, false); 

alert(values.value); 

对于更加动态的版本，我建议使用values以上的封闭。

var foo = document.getElementById("something"), 
    values = {}; 

foo.addEventListener('change', function (object) { 
    return function(e) { 
     object.value = this[this.selectedIndex].text; 
     object.id = this[this.selectedIndex].value; 
    }; 
}(values), false); 

alert(values.value);