JavaScript #26 — ES6 Arrow Functions 箭頭函式 & this

Thomas Hung

Published in

Thomas 學習筆記

7 min readJul 30, 2020

箭頭函式是 ES6 新的語法，是用來定義一個函式。

那過去的函式語法為:

function foo(params_1, params_2, params_N) {
 //陳述式
}

箭頭函式語法

(params_1 , params_2, params_N) => { return 陳述式 };

範例:

let func = (a, b, c) => { return a + b + c };console.log(func(1, 2, 3));  //6

如果參數只有一個時可以改成:

params => { return 陳述式 };  //可以省略參數小括號 ()

範例:

let func = x => { return x * 3 };console.log(func(5)); //15

或沒有參數時可以改成:

() => { return 陳述式 }; // 如沒有參數時必須保留空的小括號 ()，不能省略

範例:

let func = () => { return 13 }; console.log(func()); //13

如果陳述式只有一行時可以改成:

params => 陳述式;  //可以省略陳述式大括號 {} 並且保有 return 特性

範例:

let func = x => x * 3;console.log(func(5)); //15

如果使用箭頭函式回傳物件時，需用括號將內容括起來:

params => ({boo : 'bar'})  //{boo: "bar"}才能正常顯示

範例:

let func = () => { name: 'abc'};console.log(func()); //如沒有用括號將內容括起來會回傳 undefinedlet func1 = () => ({ name: 'abc'});console.log(func1()); //{name: "abc"}

傳統函式 & 箭頭函式

let funcA = function () {
 console.log(this);
};let funcB = () => {
 console.log(this);
};funcA(); //WindowfuncB(); //Window

在傳統函式與箭頭函式執行 this 時，都是指向全域環境中的 window 物件。

let name = '全域';let obj = {
 name: '區域',
 funcA: function () {
  //此區產生 function 作用域
  console.log(this); // this 指向 此物件 obj
  console.log(this.name); //'區域'
  setTimeout(function () {
   console.log(this); //Window
   console.log(this.name); //'全域'
  }, 1000);
 },
 funcB: () => {
  console.log(this); //Window
  console.log(this.name); //'全域'
  setTimeout(function () {
   console.log(this); //Window
   console.log(this.name); //'全域'
  }, 1000);
 },
 funcC: function () {
  //此區產生 function 作用域
  let that = this; //將 this 佔存至 that 以致於它們的記憶位址會一樣
  setTimeout(function () {
   console.log(that); // this 指向 此物件 obj
   console.log(that.name); //'區域'
  }, 1000);
 },
 funcD: function () {
  //此區產生 function 作用域
  setTimeout(() => {
  //使用箭頭函式可以強制指定 this 為此物件
  console.log(this); // this 指向 此物件 obj
  console.log(this.name); //'區域'
  }, 1000);
 },
 funcE() {
  //此縮寫方式與傳統作法是一樣的
  console.log(this); // this 指向 此物件 obj
  console.log(this.name); //'區域'
  setTimeout(() => {
   //使用箭頭函式可以強制指定 this 為 obj 此物件
   console.log(this); // this 指向 此物件 obj
   console.log(this.name); //'區域'
  }, 1000);
 },
};obj.funcA();obj.funcB();obj.funcC();obj.funcD();obj.funcE();

setTimeout : 在傳統函式中執行時須等 function (){} 內執行完最後才開始執行，此時執行環境為全域環境所以 this 會指向 window 物件。
function : 在傳統函式執行時會產生一個作用域。

顯式綁定 (Explicit Binding) & 箭頭函式

let obj = { name: 'abc' };let funcA = function () {
 console.log(this);
};let funcB = () => {
 console.log(this);
};funcA.call(obj); //{name: "abc"}funcB.call(obj); //WindowfuncA.apply(obj); //{name: "abc"}funcB.apply(obj); //Window

如上述使用箭頭函式透過顯式綁定中的 call 與 apply 時還是會指向全域 window ，所以在使用箭頭函式時須注意。

DOM 的監聽事件

const div = document.querySelector('div');div.addEventListener('click', () => {
 console.log(this); //window
});

在監聽事件中使用箭頭函式時，在當中的 this 會指向全域 window。

原型 Prototype

function Name(name) {
 this.name = name;
}function Age(age) {
 this.age = age;
}Name.prototype.callname = function () {
 console.log(this.name);
};Age.prototype.callage = () => {
 console.log(this.age);
};let mike = new Name('mike');let mikeAge = new Age(45);mike.callname(); //mikemikeAge.callage(); //undefined

在原型 Prototype 上使用箭頭函式此 this 會指向全域 window 物件，但在全域物件下沒有 window.age 所以回傳 undefined。

參考 : This (上)、This (下)、JavaScript ES6 Arrow Functions 箭頭函數、鐵人賽：箭頭函式 (Arrow functions)、什麼是箭頭函數（arrow function）、箭頭函式

以上是我對 JavaScript ES6 Arrow Functions 箭頭函數 & this 的學習筆記 😉。

***如果有任何想法，也歡迎留言與我分享~***

***也謝謝你(妳)的閱讀，覺得有幫助的話別忘了順手拍個手喔！***

JavaScript #26 — ES6 Arrow Functions 箭頭函式 & this

Written by Thomas Hung