如何獲取匿名函數中定義的變量？

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);