ES6箭頭函式修復ES5中this指向問題

2021-09-02 22:45:27 字數 936 閱讀 6832

長期以來，es5中this物件一直的指向乙個令人頭痛的問題，在物件方法中使用此，必須非常小心例如：

class animal 


says(say), 1000)


}}var animal = new animal()


animal.says('hi')  //undefined says hi
執行上面的**會報錯，這是因為settimeout中的this指向的是全域性物件。所以為了讓它能夠正確的執行，傳統的解決方法有兩種。

第一種是將this傳給self,再用self來指代this

says(say), 1000)
第二種是用bind(this)

says(say).bind(this), 1000)
而用es6中的箭頭函式就沒有這麼麻煩

class animal 


says(say), 1000)


}}var animal = new animal()


animal.says('hi')  //animal says hi
當我們使用箭頭函式時，函式體內的this物件，就是定義時所在的物件，而不是使用時所在的物件。

並不是因為箭頭函式內部有繫結this的機制，實際原因是箭頭函式根本沒有自己的this，它的this是繼承外面的，因此內部的this就是外層**塊的this。

ES6函式比對ES5函式

這裡只做簡單的es6函式與es5函式對比，把es6函式中新增的方法或者用法介紹一下。方便大家學習 記憶。隨著社會發展，瀏覽器肯定會在不久全部支援es6語法，因為現在的ie8使用者都很少了,做web前端將不再受此束縛！其他語言已經支援函式引數預設值，咱們js也不會落後的。例 es6寫法 a 預設值10...

ES5與ES6建構函式

function 函式名 引數 函式名.prototype.方法名 function class 類名 方法名稱 1.定義建構函式 es5 function 函式名定義 es6 class 類名定義 注 class建構函式類名後沒有 2.定義例項化物件屬性和屬性值 es5 function 函式中定...

es6箭頭函式

本例是在了解es6知識後在原來定義函式的基礎上進行理解var searchvalue 查詢匹配物件 var button var input var select button if searchvalue.input undefined button.click else 重新整理 tableli...