簡介:箭頭函數中的這個不同於壹般函數定義的函數。arrow函數中this的定義:this是在函數定義時綁定的,而不是在函數執行時綁定的。
(1)執行時指向綁定的通用函數。運行obj.say()時,這指向對象obj。
var x = 11;
var obj={
x:22,
跟大家講:function(){
console.log(this.x)
}
}
obj . say();
//console.log輸出是22(2)所謂的定義時間綁定,就是這個是從父執行上下文繼承的!!比如這裏的箭頭函數中的this.x是key:value的形式,即箭頭函數本身的對象是obj,obj的父執行上下文是window,所以這裏的this.x實際上代表window.x,所以輸出是11。
var x = 11;
var obj={
x:22,
說:()= & gt{
console . log(this . x);
}
}
obj . say();
//輸出值是11。類似地:
(3)
var a=11
函數test1(){
this.a = 22
設b=function(){
console . log(this . a);
};
b();
}
var x = new test 1();輸出11
箭頭功能情況:
var a = 11;
函數test2(){
this.a = 22
設b =()= & gt;{console.log(this.a)}
b();
}
var x = new test 2();
//輸出22很奇怪吧?我是這樣理解的。在ES6中定義時綁定this的具體含義應該是在父執行上下文中繼承this,而不應該是父執行上下文!!!這樣就解決了很多箭頭函數中指向不清的問題。
註意:簡單對象(非函數)沒有執行上下文!
在箭頭函數中深刻理解這壹點
在arrow函數中,這個點的固定化並不是因為arrow函數內部有綁定this的機制,實際原因是arrow函數根本沒有自己的this,導致內部的this是外部代碼塊的this。因為它沒有this,所以不能用作構造函數。
我們可以模擬ES5中的箭頭函數轉換:
// ES6
函數foo() {
setTimeout(()= & gt;{
console.log('id:',this . id);
}, 100);
}
// ES5
函數foo() {
var _ this = this
setTimeout(function () {
console.log('id:',_ this . id);
}, 100);
}所以在定義壹個對象的時候,要定義對象屬性,這裏的this壹般指的是全局的情況或者這個對象所在的環境中的this。
相信看完這個案例,妳已經掌握了方法。更多精彩請關註Gxl上其他相關文章!
推薦閱讀:
JS是如何操作來改變電臺的狀態的?
如何將引導表設置為高度的百分比
var foo = function () {}和function foo()的區別