箭頭函式適合於無複雜邏輯或者無副作用的純函式場景下，例如：用在 map、reduce、filter 的回撥函式定義中
箭頭函式的亮點是簡潔，但在有多層函式巢狀的情況下，箭頭函式反而影響了函式的作用範圍的識別度，這種情況不建議使用箭頭函式
箭頭函式要實現類似純函式的效果，必須剔除外部狀態。所以箭頭函式不具備普通函式里常見的 this、arguments 等，當然也就不能用 call()、apply()、bind() 去改變 this 的指向

箭頭函式不適合定義物件的方法（物件字面量方法、物件原型方法、構造器方法），因為箭頭函式沒有自己的 this，其內部的 this 指向的是外層作用域的 this

const json = {
    bar: 1,
    fn: () => console.log(this.bar)
};

json.fn();  //-> undefined
// this 並不是指向 json 這個物件，而是再往上到達全域性作用域

function Foo() {
    this.bar = 1;
}
Foo.prototype.fn = () => console.log(this.foo);

const foo = new Foo();
foo.fn();  //-> undefined
// this 並不是指向 Foo，根據變數查詢規則，回溯到了全域性作用域

const Message = (text) => {  
    this.text = text;
};
var helloMessage = new Message('Hello World!');  
console.log(helloMessage.text); //-> Message is not a constructor
// 不可以當作建構函式，也就是說，不可以使用 new 命令

箭頭函式不適合定義結合動態上下文的回撥函式（事件繫結函式），因為箭頭函式在宣告的時候會繫結靜態上下文

const button = document.querySelector('button');
button.addEventListener('click', () => {  
    this.textContent = 'Loading...';
});
// this 並不是指向預期的 button 元素，而是 window

箭頭函式適用場景及需要注意的地方

相關文章