深入理解Javascript中的this關鍵字
文章主要介紹了深入理解Javascript中的this關鍵字,本文講解了方法呼叫模式、函式呼叫模式、構造器呼叫模式、apply呼叫模式中this的不同之處,需要的朋友可以參考下,就跟隨本站小編一起去了解下吧,想了解更多相關資訊請持續關注我們應屆畢業生考試網!
自從接觸javascript以來,對this引數的理解一直是模稜兩可。雖有過深入去理解,但卻也總感覺是那種浮於表面,沒有完全理清頭緒。
但對於this引數,確實會讓人產生很多誤解。那麼this引數到底是何方神聖?
理解this
this是一個與執行上下文(execution context,也就是作用域)相關的特殊物件。因此,它可以叫作上下文物件(也就是用來指明執行上下文是在哪個上下 文中被觸發的物件)。
任何物件都可以做為上下文中的this的值。在一些對ECMAScript執行上下文和部分this的描述中的 所產生誤解。this經常被錯誤的描述成是變數物件的一個屬性。 再重複一次:
this是執行上下文的一個屬性,而不是變數物件的一個屬性。 這個特性非常重要,因為與變數相反,this從不會參與到識別符號解析過程。換句話說,在程式碼中當訪問this的時候,它的值是直接從執行上下文中獲取的,並不需要任何作用域鏈查詢。this的'值只在進入上下文的時候進行一次確定。
廢話不多,先看一個板栗:
程式碼如下:
var test = function(){};
otype = {
foo:"apple",
fun:function(){
="banana";
}
};
var myTest = new test();
();
(wnProperty("foo")); //輸出什麼
(wnProperty("fun")); //輸出什麼
hasOwnProperty:是用來判斷一個物件是否有你給出名稱的屬性或物件。不過需要注意的是,此方法無法檢查該物件的原型鏈中是否具有該屬性,該屬性必須是物件本身的一個成員。
不知道看官們心裡的答案是什麼,正確的答案是true,false。
程式碼如下:
(wnProperty("foo"));
(wnProperty("fun"));
true
false
要弄明白為什麼是這樣,就必須要理解上面this所扮演的角色,所指代的物件。在《javascript語言精粹》一書中,指出了在javascript中一共有四種呼叫模式:
1.方法呼叫模式
2.函式呼叫模式
3.構造器呼叫模式
y呼叫模式
而在這些模式當中,對於如何初始化關鍵引數this上是存在不同差異的。
方法呼叫模式
當一個函式被儲存為物件的一個屬性時,我們稱它為一個方法。當一個方法被呼叫時,this被繫結到該物件。注意加粗的這句是重點:
程式碼如下:
// 建立myObject。它有一個value屬性和一個increment方法
var myObject = {
value: 0;
increment: function(inc) {
e += typeof inc ==='number'?inc:1; // 接受一個可選引數,如果不是數字,則預設為數字1
}
};
ement();
(e); // 1
ement(2); //傳入數字2
(e); // 3
這裡,方法increment可以使用this去訪問myObject物件,所以可以改變value的值。而且,this到物件的繫結發生在呼叫的時候。
函式呼叫模式
如果一個函式並非一個物件的屬性時,那麼它被當作一個函式來呼叫,此時,this被繫結到全域性物件,書上說這是js語言設計的一個缺陷。倘若設計正確,當內部函式被呼叫的時,this應該仍然繫結到外部函式的this變數。拋開對語言設計的正確與否討論,要當函式呼叫模式時this變數依舊繫結到該物件,有如下經典解決方案:
程式碼如下:
// 給myObject增加一個double方法