原生JS 之 this指向問題

平時用this有些混亂,所以寫個總結。

沒有箭頭函數之前,我們說this就是函數運行時所在的環境對象,但是在箭頭函數中this就是定義時所在的對象,先說大家熟知的:函數運行時所在的環境對象。

1、作爲函數調用,this指向全局對象

 

2、作爲對象的方法調用,該對象即爲調用上下文,this指向該對象。

 

3、作爲構造函數調用,構造函數試圖初始化這個新創建的對象,並將這個對象作爲其調用上下文,this 指向這個新創建的對象。

 

4、通過函數的call/apply方法間接調用, call/apply方法的第一個參數是調用上下文,在函數體內,通過this獲得對它的引用。

 

箭頭函數中this對象就是定義時所在的作用域,也就是說箭頭函數本身沒有this,內部的this就是外層代碼塊作用域中的this。

5、獨立函數

該箭頭函數在全局環境中定義,即this指向window

 

6、對象的方法

如上所示,foo在全局中定義,所以this指向window,那麼如何使this指向obj?

根據上一篇介紹,當函數作爲對象的方法調用時this指向該對象,可以這樣改寫:

func在foo調用時定義,此時的foo所在作用域爲obj,因此this指向obj

 

7、構造函數,因箭頭函數沒有this,固不能用作構造函數,否則會報錯

 

 

8、bind/call

如上:func定義在全局,因此打印0,同對象方法,我們可以通過如下改寫,打印出1

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章