都說 JavaScript 是一種很靈活的語言,這其實也可以說它是一個混亂的語言。它把 函數式編程 和 面向對象編程 糅合一起,再加上 動態語言 特性,簡直強大無比(其實是不能和C++比的,^_^ )。
JS 里的 this
在 function 內部被創建
指向調用時所在函數所綁定的對象(拗口)
this 不能被賦值,但可以被 call/apply 改變
目錄
* 一個特例
* 開始判斷
* 法則一:對象方法中的this指向對象本身(箭頭函數形式的除外)
* 法則二:多層嵌套函數中的this指向等同于包含該this的最近一個function的this
* 法則三:箭頭函數以及非指向對象方法中的function的情況下this指向window
* 習題集
* 普通函數中的this
* 函數執行后返回另外一個函數中的this(普通函數中)
* 多層嵌套函數中的this(定時器&箭頭函數)1
* 多層嵌套函數中的this(定時器&箭頭函數)2
一個特例
在正式開始之前,我們先來說一個特例。
在構造函數中,this上的值會在創建實例的時候被綁定到新創建的實例上。不適用于下面的判斷方法,所以特此說明。
開始判斷
下面是一個典型例子,我們的分析從這里開始。
法則一:對象方法中的this指向對象本身(箭頭函數形式的除外)
法則二:多層嵌套函數中的this指向等同于包含該this的最近一個function的this
箭頭函數沒有獨立的this作用域,所以繼續往外層走,走到了getName: function(){}。那么就是他了,this指向等同于這個function內部的this指向。根據法則一,this指向對象本身。
我們可以試著在瀏覽器中運行,看看結果。
法則三:箭頭函數以及非指向對象方法中的function的情況下this指向window
根據法則二,this是指向最近的function,因此,這里的this等同于返回的函數中的this,不是對象方法中的this,所以,指向全局。
是不是感覺有點奇怪?不過實踐證明確實如此。
習題集
歡迎大家按照法則一到三依次判斷,猜測結果,并在瀏覽器下測試。測試結果也可以回復,大家一起討論。
因本人能力有限,該系列法則可能在部分情況下失效。歡迎大家一起討論。
下面是做題時間。
普通函數中的this
函數執行后返回另外一個函數中的this(普通函數中)
多層嵌套函數中的this(定時器&箭頭函數)1
多層嵌套函數中的this(定時器&箭頭函數)2
再次說明,該法則為實驗性法則,未進行大范圍的測試,不保證在所有情況下都有一致的結果。如果你發現了法則判斷失敗的情況,歡迎留言,一起探討。
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com