深刻理解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 (在下一篇類繼承中說明)