[JS] 箭頭函式 Arrow Functions 和 this

前言

箭頭函式(Arrow Functions)是一個ES6的新語法，對我來說前前後後接觸js，一直有碰到this，但要詳細解釋還是很難，因此想藉由這篇讓我更加深this的觀念，會整理出this在箭頭函式的差別與其他this的觀念。另外感謝Kuro大的文章，讓我更容易了解this，分享連結在下面。

箭頭函式(Arrow Functions)

箭頭函式(Arrow Functions)是一個ES6的新語法，與傳統function類似，有點像是傳統function更簡短寫法，但沒有 arguments 參數，this上也有差別。

//傳統函式
let helloName = function(name) {
  return `hello, ${name}`;
}

// 箭頭函式
var helloName = (name) => {
  return `hello, ${name}`;
}

// 單一行陳述則可以不加 {}
var helloName = (name) => `hello, ${name}`;

// 只有一個參數則可以不加 ()
var helloName = name => `hello, ${name}`;
console.log(helloName('John'));

// 沒有任何參數時則必須加 ()
var helloName = () => `hello`;

// 有{}時 必須加上return，否則沒有回傳功能
var helloName = name => {
 `hello, ${name}`; // return  `hello, ${name}`;
} 
console.log(helloName('John'));  //undefined

關於this

傳統函式 this不等於function

this是傳統函式function執行時，自動生成的一個內部物件。隨著執行呼叫場合的不同，所指向的值也會不同。

> 預設綁定(Default Binding) this 指向全域物件

當沒有特定指明 this 的情況下，預設綁定 (Default Binding) this 為 「全域物件」，也就是 window。

• 直接執行呼叫函式 Simple Call
  無論把function宣告在哪邊，只要是一般的Simple Call，this指向為 全域物件window。
• 立即函式(IIFE)理論上也是直接呼叫，this也是指向全域
• 非同步的事件 (setTimeout, Ajax等)中callback function 的this也是指向全域。

> 隱含的綁定(Implicit Binding) 透過物件執行呼叫函式

透過物件執行函式時，this指向為該物件。

var obj = {
  fn1: function(){
    console.log(this); 
    var fn2 = function(){
      console.log(this); //this 為 window
    };
    fn2(); //Simple Call
  }
};
obj.fn1(); //透過物件執行呼叫函式 this 為 obj

• 若宣告嚴格模式的話(use strict)，會禁止 this 自動指定為全域物件，this則會變成 undefined。

var obj = {
  fn1: function(){
    "use strict";
    console.log(this);
    var fn2 = function(){
      console.log(this); //undefined
    };
    fn2();
  }
};
obj.fn1();

• 透過DOM物件來呼叫function時，this也是同樣指向該DOM物件
  (event.currentTarget)

重新指向 this

vm, that, self

非同步的事件 (setTimeout, Ajax等)中 callback function 的this指向全域window，因此若我們需要把this指回DOM物件，一般常見的作法是用一個變數(vm, that, self)來代替要指回的this

> 明確綁定(Explicit Binding) bind(),call(),apply()

bind()
在function後面加上 .bind(this) 就可以強制將 () 內的物件帶入至 callback function 內

let familyBaker = {
  mom: 'Nicole Baker',
  dad: 'Tom Baker'
};

let familyName = function () {
  console.log(this.mom);
};

familyName();  // 未指定this 則會指向全域
familyName.bind(familyBaker)();  //指向Baker ㄧ家 Nicole Baker

call()
apply()

在function後面加上 .call() 或 .apply()來呼叫function，指定第一個帶入的參數作為該function執行呼叫時的this，兩者的差別只在於參數寫法，第一個都是指定this，.call()的第2.3.4…個參數用逗號隔開。.apply()第二個參數為陣列，陣列則可以帶入好幾個參數。

function add(a, b) {
  return a + b;
}
console.log(add(1, 2));						// 3
console.log(add.call(null, 1, 2));			// 3, this = null
console.log(add.apply(null, [1, 2]));   // 3, this = null

var animals = [
  {species: 'Lion', name: 'King'},
  {species: 'Whale', name: 'Fail'}
];

for (var i = 0; i < animals.length; i++) {
  (function (i) { 
    this.print = function () { 
      console.log('#' + i  + ' ' + this.species + ': ' + this.name); 
    } 
    this.print();
  }).call(animals[i], i); //參數1綁定animals[i]為this
}

> new 綁定 - 建構式的調用 (As a constructor)

當一個 function 前面帶有 new 被呼叫時，會發生：

1. 會產生一個新的物件 (物件被建構出來)
2. 這個新建構的物件會被設為該function this的綁定目標，也就是 this 會指向新的物件。
3. 除非這個 function 指定回傳 (return) 了他自己的替代物件，否則這個透過 new 產生的物件會被自動回傳。

var mom = '媽咪'
function findMom (name) {
  this.mom = name
  console.log(this);
  console.log(this.mom);
}

findMom('AAA'); //this會指向到全域 全域的mom會替換成AAA
var newFindMom = new findMom('BBB'); 
//建構了一個新物件 並把this指向newFindMom 
console.log(newFindMom.mom); // BBB

箭頭函式 this

回到上面說的箭頭函式，this會依據語彙環境的父層區域(parent scope)來綁定。簡單的說法是，箭頭函式沒有this，this指向往上一層找，一般若上層為預設綁定(Default Binding)，則指向全域window。

舉例 四種找媽函式 呼叫方式皆為family物件中呼叫 family.findMom1();

var findMom1 = function () {
    console.log(this.mom); //區域媽咪 傳統函式this指向family
    setTimeout(function () {
      console.log(this.mom);  //全域媽咪 非同步回呼沒特別指定指向全域
    }, 1000);
  };

var findMom2 = function () {
    console.log(this.mom); //區域媽咪 傳統函式this指向family
    setTimeout(() => {
      console.log(this.mom); //區域媽咪 箭頭函式的parent scope是傳統函式function this 指向family
    }, 1000);
  };

var findMom3 = () => {
    console.log(this.mom); //全域媽咪 箭頭函式的parent scope是全域window this也就指向全域window
    setTimeout(function () {
      console.log(this.mom); //全域媽咪 非同步回呼沒特別指定指向全域
    }, 1000);
  };

var findMom4 = () => {
    console.log(this.mom); //全域媽咪 箭頭函式的parent scope是全域window this也就指向全域window
    setTimeout(() => {
      console.log(this.mom); //全域媽咪 箭頭函式的parent scope是全域window this也就指向全域window
    }, 1000);
  };

var mom = '全域媽咪';

var family = {
    findMom1, 
    findMom2,
    findMom3,
    findMom4,
    mom: '區域媽咪'
};

family.findMom1();
family.findMom2();
family.findMom3();
family.findMom4();

DOM物件的例子：

同理在Vue中，使用Ajax回呼用箭頭函式指向為上一層parent scope，便可以使用this呼叫到data

參考資料

• JavaScript ES6 Arrow Functions 箭頭函數
• 鐵人賽：箭頭函式 (Arrow functions)
• this是甚麼?
• 談談 JavaScript 中的 “this” 和它的問題
• JavaScript ES6 中的箭頭函數（arrow function）及對 this 的影響
• 鐵人賽：JavaScript 的 this 到底是誰？
• 重新認識 JavaScript: Day 20 What’s “THIS” in JavaScript (鐵人精華版)
• Function 內的 this 到底是哪個 this