|
this? 那是蝦米？
每一個運行上下文除了建立一個作用域鏈外，還峁┮桓雒猼his的關(guān)鍵字。它的普遍用法是，this作為一個獨特的功能，為鄰里們提供一個可訪問到它的途徑。但總是依賴于這個行為并不可靠：取決于我們?nèi)绾芜M入一個特定鄰居的具體情況，this表示的完全可能是其他東西。事實上，我們?nèi)绾芜M去鄰居家本身，通常恰恰就是this所指。有四種情形值得特別注意：
- 呼叫對象的方法
在經(jīng)典的面向?qū)ο缶幊讨校覀冃枰R別和引用當(dāng)前對象。this極好地扮演了這個角色，為我們的對象提供了自我查找的能力，并指向它們本身的屬性。
<script type="text/javascript">
var deep_thought = {
the_answer: 42,
ask_question: function () {
return this.the_answer;
}
};
var the_meaning = deep_thought.ask_question();
</script> 這個例子建立了一個名為deep_thought的對象，設(shè)置其屬性 the_answer為42，并創(chuàng)建了一個名為ask_question 的方法（method）。當(dāng)deep_thought.ask_question()執(zhí)行時， JavaScript為函數(shù)的呼叫建立了一個運行上下文，通過”.“運算符把this指向被引用的對象，在此是deep_thought這個對象。之后這個方法就可以通過this在鏡子中找到它自身的屬性，返回保存在 this.the_answer中的值：42。
- 構(gòu)造函數(shù)
類似地，當(dāng)定義一個作為構(gòu)造器的使用new關(guān)鍵字的函數(shù)時，this可以用來引用剛創(chuàng)建的對象。讓我們重寫一個能反映這個情形的例子：
<script type="text/javascript">
function BigComputer(answer) {
this.the_answer = answer;
this.ask_question = function () {
return this.the_answer;
}
}
var deep_thought = new BigComputer(42);
var the_meaning = deep_thought.ask_question();
</script> 我們編寫一個函數(shù)來創(chuàng)建BigComputer對象，而不是直白地創(chuàng)建 deep_thought對象，并通過new關(guān)鍵字實例化deep_thought為一個實例變量。當(dāng)new BigComputer()被執(zhí)行，后臺透明地創(chuàng)建了一個嶄新的對象。呼叫BigComputer后，它的this關(guān)鍵字被設(shè)置為指向新對象的引用。這個函數(shù)可以在this上設(shè)置屬性和方法，最終它會在BigComputer執(zhí)行后透明地返回。
盡管如此，需要注意的是，那個deep_thought.the_question()依然可以像從前一樣執(zhí)行。那這里發(fā)生了什么事？為何this在the_question內(nèi)與BigComputer內(nèi)會有所不同？簡單地說，我們是通過new進入BigComputer的，所以this表示“新（new）的對象”。在另一方面，我們通過 deep_thought進入the_question，所以當(dāng)我們執(zhí)行該方法時，this表示 “deep_thought所引用的對象”。this并不像其他的變量一樣從作用域鏈中讀取，而是在上下文的基礎(chǔ)上，在上下文中重置。
- 函數(shù)呼叫
假如沒有任何相關(guān)對象的奇幻東西，我們只是呼叫一個普通的、常見的函數(shù)，在這種情形下this表示的又是什么呢？
<script type="text/javascript">
function test_this() {
return this;
}
var i_wonder_what_this_is = test_this();
</script>
在這樣的場合，我們并不通過new來提供上下文，也不會以某種對象形式在背后偷偷提供上下文。在此， this默認下盡可能引用最全局的東西：對于網(wǎng)頁來說，這就是 window對象。
- 事件處理函數(shù)
比普通函數(shù)的呼叫更復(fù)雜的狀況，先假設(shè)我們使用函數(shù)去處理的是一個onclick事件。當(dāng)事件觸發(fā)我們的函數(shù)運行，此處的this表示的是什么呢？不湊巧，這個問題不會有簡單的答案。
如果我們寫的是行內(nèi)（inline）事件處理函數(shù)，this引用的是全局window對象：
<script type="text/javascript">
function click_handler() {
alert(this); // 彈出 window 對象
}
</script>
...
<button id='thebutton' onclick='click_handler()'>Click me!</button>
但是，如果我們通過JavaScript來添加事件處理函數(shù)，this引用的是生成該事件的DOM元素。（注意：此處的事件處理非常簡潔和易于閱讀，但其他的就別有洞天了。請使用 真正的addEvent函數(shù) 取而代之）：
<script type="text/javascript">
function click_handler() {
alert(this); // 彈出按鈕的DOM節(jié)點
}
function addhandler() {
document.getElementById('thebutton').onclick = click_handler;
}
window.onload = addhandler;
</script>
...
<button id='thebutton'>Click me!</button>
出處：Realazy
責(zé)任編輯：moby
上一頁 JavaScript 中的作用域 [1] 下一頁 JavaScript 中的作用域 [3]
◎進入論壇網(wǎng)頁制作、WEB標(biāo)準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 JavaScript 中的作用域 [2]
