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

2021-09-29 00:16:22 字數 1248 閱讀 5467

簡要介紹:箭頭函式中的this,指向與一般function定義的函式不同,箭頭函式this的定義:箭頭函式中的this是在定義函式的時候繫結,而不是在執行函式的時候繫結。

(1)一般函式this指向在執行是繫結  當執行obj.say()時候,this指向的是obj這個物件。

var x=11;

var obj=

}obj.say();

輸出的是22

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

var x=11;

var obj=

}obj.say();

//輸出的值為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

箭頭函式中,this指向的固定化,並不是因為箭頭函式內部有繫結this的機制,實際原因是箭頭函式根本沒有自己的this,導致內部的this就是外層**塊的this。正是因為它沒有this,所以也就不能用作建構函式。

我們可以來模擬es5中的箭頭函式轉化:

// es6

function foo() , 100); } // es5 function foo() , 100); }

所以在定義物件的時候,定義物件屬性,裡面的this指向的一般是全域性,或者這個物件所在的那個環境中的this。

更多專業前端知識,請上

【猿2048】www.mk2048.com

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

簡要介紹 箭頭函式中的this,指向與一般function定義的函式不同,比較容易繞暈,箭頭函式this的定義 箭頭函式中的this是在定義函式的時候繫結,而不是在執行函式的時候繫結。1 何為定義時繫結 我們來看下面這個例子 1 var x 11 var obj obj.say 輸出的是22 一般的...

深入理解 ES6中的 Reflect

reflect是es6為了操作物件而新增的api,為什麼要新增reflect物件呢?它這樣設計的目的是為了什麼?1 將object物件的一些明顯屬於語言內部的方法 比如object.defineproperty 放到reflect物件上,那麼以後我們就可以從reflect物件上可以拿到語言內部的方法...

深入理解ES6 解構

解構時一種打破資料結構,將其拆分為更小部分的過程。解構在實際開發中經常會應用到物件和陣列中。關於解構的基本用法,請參考 es6 變數的宣告及解構賦值 const node let node 對已經宣告的變數賦值 const node let a,b node const obj let obj co...