JavaScript：掌握箭頭函式，優雅簡約的程式寫作

🌟 箭頭函數是 ES6 的新語法，能夠有效縮短傳統函式寫法

傳統函式 VS 箭頭函式情境說明

直接透過一個例子來進行比較更快瞭解，透過箭頭函式縮短傳統函式。
情境：我想快速將陣列中的每個元素都變成兩倍(map 對原陣列進行操作產生一個新的陣列)。

傳統函式

javascript

const arr = [1, 2, 3, 4, 5];
const resultarr = arr.map(function(item){
  return item * 2
})
console.log(resultarr)

顯示如下：

javascript

[2,4,6,8,10]

箭頭函式

方法 1：省略 function 替換成箭頭函數的方式。

javascript

const arr = [1, 2, 3, 4, 5];
const resultarr = arr.map((item) =>{
  return item * 2
})
console.log(resultarr)

方法 2：省略 function + 省略 return。

javascript

const arr = [1, 2, 3, 4, 5];
const resultarr = arr.map((item) => (item * 2))
console.log(resultarr)

方法 3：當確定僅有一個參數(item)，不可為空或超過一個參數，可以省略成以下寫法。

javascript

const arr = [1, 2, 3, 4, 5];
const resultarr = arr.map(item => item * 2)
console.log(resultarr)

this 指向差別-箭頭函式沒有自己的 this 指向

當看到 this 的時候自動忽視包覆他的函式

傳統函式的 this 指向

javascript

var name = '全域'
const person = {
  name: '小明',
  callName() {
    setTimeout(function () {
      console.log(this.name); // 2
    });
  },
}
person.callName();

顯示如下：

javascript

全域

案例 1.回調函數遇到箭頭函式

當看到 this 的時候自動忽視包覆他的函式(setTimeout)，可以想像成 this.name 又變成在 callName 函式之下，因此這時候 this.name 就會從全域變數變成指向 person 物件下的 name。

javascript

var name = '全域'
const person = {
  name: '小明',
  callName() {
    setTimeout(() => {
      console.log(this.name); // 2
    });
  },
}
person.callName();

顯示如下：

javascript

小明

案例 2.傳統函式遇到箭頭函式(單層)

使用箭頭函式會直接跳出當前包覆的 function(callName)，也就是目前並沒有人調用 person 本身，因此 this 會指向全域。

javascript

var name = '全域'
const person = {
  name: '小明',
  callName: () => {
    console.log(this.name);
  },
}
person.callName();

顯示如下：

javascript

全域

案例 3.傳統函式遇到箭頭函式(雙層)

this.name 跳脫包覆他的 callName 函式，變成直接在 callMe 下面，因此 callMe 被 person 呼叫使用，this 將會指向 person。

javascript

var name = '全域'
const person = {
  name: '小明',
  callMe() {
    const callName = () => {
      console.log(this.name); // 請尋找箭頭所在的作用域為何？
    };
    callName();
  }
}
person.callMe();

顯示如下：

javascript

小明

this 指向實戰作法，讓 this 取得正確的值

回調函式使用傳統函式的寫法一般指向全域

javascript

var someone = '全域';
var obj4 = {
  someone: '物件 4',
  fn() {
    setTimeout(function () {
      console.log(this.someone);
    });
  }
}
obj4.fn();

顯示如下：

javascript

全域

修改方式 1.利用其他變數取代當前 this

透過在 fn 使用變數儲存當前 this 位置指向 fn，在回調函式中使用該變數以讓 this 指向 obj4，取得物件 4 的值。

javascript

var someone = '全域';
var obj4 = {
  someone: '物件 4',
  fn() {
    const that = this
    setTimeout(function () {
      console.log(that.someone);
    });
  }
}
obj4.fn();

顯示如下：

javascript

物件 4

修改方式 2.使用箭頭函數

透過箭頭函數忽視函式 setTimeout，讓 this 變成在 fn 函式下，this 就會指向使用 fn 的 obj4，進而取得 obj4 下的 someone。

javascript

var someone = '全域';
var obj4 = {
  someone: '物件 4',
  fn() {
    setTimeout(() => {
      console.log(this.someone);
    });
  }
}
obj4.fn();

顯示如下：

javascript

物件 4

留言