深入理解ES6箭頭函式中的this

簡要介紹：箭頭函式中的this，指向與一般function定義的函式不同，比較容易繞暈，箭頭函式this的定義：箭頭函式中的this是在定義函式的時候繫結，而不是在執行函式的時候繫結。

1、何為定義時繫結

我們來看下面這個例子：

(1)

var x=11;
var obj=
}obj.say();
輸出的是22

一般的定義函式跟我們的理解是一樣的，執行的時候決定this的指向，我們可以知道當執行obj.say()時候，this指向的是obj這個物件。

(2)

var x=11;
var obj=
}obj.say();
//輸出的值為11

這樣就非常奇怪了如果按照之前function定義應該輸出的是22,而此時輸出了11，那麼如何解釋es6中箭頭函式中的this是定義時的繫結呢？

所謂的定義時候繫結，就是this是繼承自父執行上下文中的this，比如這裡的箭頭函式中的this.x，箭頭函式本身與say平級以key:value的形式，也就是箭頭函式本身所在的物件為obj，而obj的父執行上下文就是window，因此這裡的this.x實際上表示的是window.x，因此輸出的是11。

類似的還有：

(3)

var a=11
function
test1();
b();
}var x=new test1(); //
輸出11

箭頭函式情況：

var a=11;
function
test2()
b();
}var x=new test2();//
輸出22

很奇怪對不對，我是這樣理解的，es6中定義的時候繫結this的具體含義，箭頭函式沒有自己的this，應該繼承的是父執行上下文裡面的this，切忌是父執行上下文！！！這樣就很多箭頭函式中的指向不明確就迎刃而解了。

注意：簡單物件（非函式）是沒有執行上下文的！

注意點

let obj2 =,
c: function
(n) ;
return
f.call(m,n);
}};console.log(obj2.b(1));  //
11console.log(obj2.c(1)); //
11

2.箭頭函式沒有原型屬性

var a = ()=>
function
b()console.log(a.prototype);  
//undefined
console.log(b.prototype);   //

箭頭函式不能當做generator函式,不能使用yield關鍵字

原文：參考文章：

深入理解ES6箭頭函式中的this

深入理解ES6箭頭函式中的this

深入理解 ES6中的 Reflect

深入理解ES6 解構

深入理解ES6箭頭函式中的this

深入理解ES6箭頭函式中的this

深入理解 ES6中的 Reflect

深入理解ES6 解構

相關推薦