當前位置:才華齋>設計>網頁設計>

淺談如何深入學習Javascript中的this關鍵字

網頁設計 閱讀(2.3W)

理解this

淺談如何深入學習Javascript中的this關鍵字

this是一個與執行上下文(execution context,也就是作用域)相關的特殊物件。因此,它可以叫作上下文物件(也就是用來指明執行上下文是在哪個上下 文中被觸發的物件)。

任何物件都可以做為上下文中的this的值。在一些對ECMAScript執行上下文和部分this的描述中的 所產生誤解。this經常被錯誤的描述成是變數物件的一個屬性。 再重複一次:

this是執行上下文的一個屬性,而不是變數物件的一個屬性。 這個特性非常重要,因為與變數相反,this從不會參與到識別符號解析過程。換句話說,在程式碼中當訪問this的時候,它的值是直接從執行上下文中獲取的,並不需要任何作用域鏈查詢。this的值只在進入上下文的時候進行一次確定。

程式碼如下:

hasOwnProperty:是用來判斷一個物件是否有你給出名稱的屬性或物件。不過需要注意的是,此方法無法檢查該物件的原型鏈中是否具有該屬性,該屬性必須是物件本身的一個成員。

不知道看官們心裡的答案是什麼,正確的答案是true,false。

程式碼如下:

要弄明白為什麼是這樣,就必須要理解上面this所扮演的角色,所指代的物件。在《javascript語言精粹》一書中,指出了在javascript中一共有四種呼叫模式:

1.方法呼叫模式

2.函式呼叫模式

3.構造器呼叫模式

y呼叫模式

而在這些模式當中,對於如何初始化關鍵引數this上是存在不同差異的。

方法呼叫模式

當一個函式被儲存為物件的`一個屬性時,我們稱它為一個方法。當一個方法被呼叫時,this被繫結到該物件。注意加粗的這句是重點:

程式碼如下:

// 建立myObject。它有一個value屬性和一個increment方法

這裡,方法increment可以使用this去訪問myObject物件,所以可以改變value的值。而且,this到物件的繫結發生在呼叫的時候。

函式呼叫模式

如果一個函式並非一個物件的屬性時,那麼它被當作一個函式來呼叫,此時,this被繫結到全域性物件,書上說這是js語言設計的一個缺陷。倘若設計正確,當內部函式被呼叫的時,this應該仍然繫結到外部函式的this變數。拋開對語言設計的正確與否討論,要當函式呼叫模式時this變數依舊繫結到該物件,有如下經典解決方案:

程式碼如下:

即是給該方法定義一個變數並且把它賦值為this,那麼內部函式就可以通過那個變數訪問到this,按照約定,給那個變數命名為that。

構造器呼叫模式

構造器呼叫模式即是我一開頭給出的例子所提到的。如果在一個函式前面帶上new來呼叫,那麼將建立一個連線到該函式的prototype成員新物件,同時this將會被繫結到那個新物件上。聽上去十分拗口且難以理解,先再看個demo:

簡單來說,Quo物件下的this在被用為構造一個新例項即new時,this指代的是新生成的myQuo物件而不是Quo物件本身。

一句話,重點就是:原型中的this不是指的原型物件,而是呼叫物件。

再回過頭看一開始的demo,就很好理解了,在執行()時,this指代了myTest物件,所以生成了一個foo屬性值為“banana”,所以wnProperty("foo")返回值為true。

Apply呼叫模式

因為javascript是一門函式式面向物件程式語言,所以函式可以擁有方法。apply方法讓我們構建一個引數陣列並用其去呼叫其他函式,apply方法接收兩個引數,第一個是將被繫結的this的值,第二個是引數陣列。說簡單直接一點就是apply方法能劫持另外一個物件的方法,繼承另外一個物件的屬性. 推薦可以看js中apply方法的使用詳細解析 ,就不擺demo了。