有些時候，毫不能使用箭頭函數

ES6的箭頭函數，在咱們平常的開發中，增長了不少的方便，ES5須要寫三行代碼實現的邏輯，使用箭頭函數，也許只須要一行，代碼開起來清晰、幹練！可是，在某些時候，使用箭頭函數也會給咱們帶來意想不到的麻煩。

在正式開始以前，先來回顧一下，關於箭頭函數須要注意的地方：

1. 箭頭函數內的this對象就是定義時所在的對象，而不是使用時所在的對象。
2. 不能夠看成構造函數，也就是說，不可使用new命令。
3. 不可使用arguments對象，該對象在函數體內不存在。若是要用，能夠用rest參數代替。
4. 不可使用yield命令，所以箭頭函數不能用字Generator函數中。

對象上的方法

調用對象上的數組

話很少說，先上代碼！

let arr
const obj = {
    arr: [1,2,3],
    sun:()=>{
        console.log(this === window) // true
        this.arr.filter(itme=>item+1)
    }
}
obj.sun() // Uncaught TypeError: Cannot read property 'filter' of undefined
複製代碼

很明顯，瀏覽器會報錯，此時的this === window ，可是在全局定義的arr爲undefined！ 總結：箭頭函數會將做用域綁定到window對象！若是須要調用對象上的某個屬性時，不能使用箭頭函數。 解決方法：

const obj = {
    arr: [1,2,3],
    sun(){
        console.log(this === obj) // true
        this.arr.filter(itme=>item+1)
    }
}
obj.sun()
複製代碼

調用原型上的方法

function Myfunc(name){
        this.name = name;
    }
    Myfunc.prototype.sayName = ()=>{
        console.log(this === window) // true
        return this.name
    }
    const me = new Myfunc('hanson')
    me.sayName() // ''
複製代碼

此時的this一樣也指向的window，這種狀況，一樣不適合使用箭頭函數。使用傳統方式，便可完成調用。

function Myfunc(name){
    this.name = name;
}
Myfunc.prototype.sayName = function(){
    return this.name
}
const me = new Myfunc('hanson')
me.sayName() //'hanson'
複製代碼

動態上下文的回調函數

this的一大特性是，能夠根據調用函數的方式更改上下文。也就是說，this指向使用時的對象。可是，箭頭函數的this值是固定的。實際上是，在箭頭函數中，根本不存在this值，致使內部的代碼塊就是外部的代碼塊。this值的固定，在某些須要動態綁定的地方，就變得再也不方便了。

const button = document.getELementById('myButton');
button.addEventListener('click',()=>{
    console.log(this === window);
    this.innerHTML = 'click button';
})
複製代碼

在全局上下文中，this指向window。當點擊事件發生的時候，瀏覽器嘗試使用按鈕上下文調用處理函數，可是箭頭函數不會更改氣預約義的上下文，this.innerHTM至關於window.innerHTML，沒有任何意義。

調用構造函數

在上面的注意事項中，咱們提到了。箭頭函數不能應用在構造函數中。

const Message = (text)=>{
    this.text = text;
}
const msg = new Message('message add') //Uncaught TypeError: Message is not a constructor
複製代碼

在建立構造函數的時候，不能使用構造函數。由於，在使用構造函數建立對象實例時，構造函數的上下文是新建立的實例對象。

語意上的理解

構造函數在某些時候的確能夠減小代碼量，使開發更加簡便。由於箭頭函數能夠省略括號和大括號，甚至能夠省略return。可是在某些時候，若是你的同時跟你配合開發或者在閱讀你寫的代碼時，可能會形成必定的困難。

總結

1. 對象上的方法在調用此對象上的某個屬性時，不要使用箭頭函數。
2. 原型上定義的方法不要使用箭頭函數。
3. 不能使用箭頭函數建立構造函數。
4. 簡短和冗長之間找到一個平衡點。

若是文章對你有一點幫助，不要忘記點贊關注哦！