深入理解JavaScript中的箭頭

ChuJQ發表於2021-02-14
JavaScript

箭頭函式可以使我們的程式碼更加簡潔，如下：

var sum = (a,b) => a+b;

JavaScript 充滿了我們需要編寫在其他地方執行的小函式的情況。

例如：

  • arr.forEach(func) —— forEach 對每個陣列元素都執行 func 。
  • setTimeout(func) —— func 由內建排程器執行。

……還有更多。

JavaScript 的精髓在於建立一個函式並將其傳遞到某個地方。 在這樣的函式中，我們通常不想離開當前上下文。這就是箭頭函式的主戰場啦。

箭頭函式沒有 this 。如果訪問 this ，則會從外 部獲取。

const group = {
  title: "Our Group",
  students: ["John", "Pete", "Alice"],

  showList() {
    this.students.forEach((student) => console.log(`${this.title}:${student}`));
  },
};

group.showList();

如何使用普通函式則會出現錯誤，原因如下：

this指向錯誤，因為函式呼叫的上下文並非是group

 

⚠ 不能對箭頭函式進行 new 操作 不具有 this 自然也就意味著另一個限制：箭頭函式不能用作構造器（constructor）。不能用 new 呼叫它們。

—《現代JavaScript教程》

箭頭函式沒有 “arguments”

當我們需要使用當前的 this 和 arguments 轉發一個呼叫時，這對裝飾器（decorators）來說 非常有用

function defer(f,ms) {
    return function () {
        setTimeout(()=>f.apply(this,arguments),ms);
    }
}
function sayHi(who) {
    console.log(`Hello ${who}`);
}

const sayHiDeferred = defer(sayHi,2000);
sayHiDeferred('Peng');

如何使用普通函式的話，則需要如下這樣：

function defer (f,ms) {
    return function(...args) {
        const ctx = this;
        setTimeout(function() {
            return f.apply(ctx,args);
        },ms);
    }
}

箭頭函式總結：

  • 沒有 this
  • 沒有 arguments
  • 不能使用 new 進行呼叫
  • 它們也沒有 super (在下一篇類繼承中說明)

 

相關文章