ES6中箭頭函式與普通函式this的區別

2021-08-20 16:13:03 字數 2788 閱讀 1189

普通函式中的this:

1. this總是代表它的直接呼叫者, 例如 obj.func ,那麼func中的this就是obj

2.在預設情況(非嚴格模式下,未使用 'use strict'),沒找到直接呼叫者,則this指的是 window

3.在嚴格模式下,沒有直接呼叫者的函式中的this是 undefined

箭頭函式中的this

預設指向在定義它時,它所處的物件,而不是執行時的物件, 定義它的時候,可能環境是window(即繼承父級的this);

下面通過一些例子來研究一下 this的一些使用場景

示例11

2

3

4

5

6

7

8

9

10

結果是:window

匿名函式,定時器中的函式,由於沒有預設的宿主物件,所以預設this指向window

問題: 如果想要在settimeout中使用這個物件的引用呢?

用乙個 變數提前把正確的 this引用儲存 起來, 我們通常使用that = this, 或者 _this = this來儲存我們需要的this指標!

1

2

3

4

5

6

7

8

9

10

11

12

13

示例21

2

3

4

5

6

7

8

9

10

11

12

13

14

window.val = 1;

varobj =

};

// 說出下面的輸出結果

obj.dbl();

varfunc = obj.dbl;

func();

結果是:2  4  8  8

<1> 12行**呼叫

val變數在沒有指定物件字首,預設從函式中找,找不到則從window中找全域性變數

即 val *=2 就是 window.val *= 2

this.val預設指的是 obj.val ;因為 dbl()第一次被obj直接呼叫

<2>14行**呼叫

func() 沒有任何字首,類似於全域性函式,即  window.func呼叫,所以

第二次呼叫的時候, this指的是window, val指的是window.val

第二次的結果受第一次的影響

示例3.在嚴格模式下的this

1

2

3

4

5

6

7

結果是:undefined

示例4.箭頭函式中的this

1

2

3

4

5

6

7

8

9

10

此時的this是定義它的物件,即繼承父級的this,父級中的this指的是obj,而非window

示例51

2

3

4

5

6

7

8

9

10

11

12

13

14

結果:都是obj

f1繼承父級this指代的obj,不管f1有多層箭頭函式巢狀,都是obj.

示例61

2

3

4

5

6

7

8

9

10

11

12

13

14

結果:window,window

第乙個this:f1呼叫時沒有宿主物件,預設是window

第二個this:繼承父級的this,父級的this指代的是window.

關於ES6中箭頭函式this和普通函式this指向

this代表他的直接呼叫者,例如obj.func,那麼func的this就是obj 在預設情況下 非嚴格模式 沒直接找到呼叫者,則this指的是window 在嚴格模式下,沒有直接呼叫者的函式中的this是 undefined 結果為window 匿名函式,say函式沒有預設的宿主物件,所以預設th...

ES6的箭頭函式this和普通函式的this區別

普通函式中,內層函式不能從外層函式中繼承this的值,在內層函式中,this會是window或者undefined,臨時變數self用來將外部的this值匯入到內部函式中 另外的方式是在內部函式執行.bind this es6中的箭頭函式會直接呼叫的this是繼承父級的this。functionfu...

ES6中箭頭函式的作用

那為什麼在es6中引入了箭頭函式呢?最主要的目的就是解決this指標的問題。我們知道在es6中,我們可以建立乙個class,如果我們預設在其裡面加入乙個函式的話,其必須在呼叫的時候,必須繫結this指標,否則不能訪問當前類的例項裡面的屬性。下面舉乙個具體的例子,為什麼其能解決this指標的問題。比如...