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

tankII發表於2021-09-09
  • 箭頭函式適合於無複雜邏輯或者無副作用的純函式場景下,例如:用在 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

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/1795/viewspace-2808103/,如需轉載,請註明出處,否則將追究法律責任。

相關文章