2021-07-02-[筆記]ES6語法介紹(箭頭函式與傳統函式)

前言：
主要就紀錄一下目前 JavaScript 常用，但自己又不熟悉的筆記。

---

參考資料：
靠北 JS - This的運作
JavaScript This 系列文：this 與物件的關係

---

箭頭函式寫法教學

// #1 改寫傳統函式
var callSomeone = function(someone) {
  return someone + '吃飯了'
}
console.log(callSomeone('小明')) //小明吃飯了

// 將以下改寫成 Arrow Function，並嘗試縮寫形式
// 寫法1：目前最常使用的箭頭函式形式
var callSomeone = (someone) => {
  return someone + '吃飯了'
}
console.log(callSomeone('小明')) //小明吃飯了

// 寫法2：若程式碼為表達式則可以省略return和 {}
// 表達式簡單來說就會是回傳值
var callSomeone = someone => someone + '吃飯了';
console.log(callSomeone('小明')) //小明吃飯了

// 寫法3：單行情況會自動return，若沒有傳入參數則可以使用下面寫法
var callSomeone = () => '小明' + '吃飯了'
console.log(callSomeone()) //小明吃飯了

// 寫法4：若傳入參數數量為複數則不可以省略（）
var callSomeone = (a,b) => a+b
console.log(callSomeone(1,2)) //3

this 綁定差異

先講結論：
傳統 this的呼叫方式函就是看 在哪個物件下被呼叫
如下圖概念：

程式碼

var name = '全域阿婆'
var auntie = {
            name: '漂亮阿姨',
            callName: function() {
              console.log('1', this.name, this); // 1 漂亮阿姨
              window.setTimeout(function () {
                console.log('2', this.name); // 2 全域阿婆
                console.log('3', this); // 3 auntie 這個物件
              }, 10);
            },
          }
          auntie.callName();

var name = '全域阿婆'
var auntie = {
            name: '漂亮阿姨',
            callName: () => {
              console.log('1', this.name, this); // 1 全域阿婆 Window
              window.setTimeout(function () {
                console.log('2', this.name); // 2 全域阿婆
                console.log('3', this); //  3 window 這個物件
              }, 10);
            },
          }
          auntie.callName();

補充：為何setTimeout取得this是全域阿婆呢？
因為，他的上層是window啊

使用箭頭函示的this

一段好記憶的說明：「箭頭函式沒有自己的 this」
討論說明

小結論

1. 箭頭函式本身沒有 arguments，但還是可以透過其餘參數取得
2. 箭頭函式沒有自己的 this 。這點在實際開發時，一定要特別注意。
3. 箭頭涵式不能被建構函式所應用
4. 無法透過 call、apply、bind 重新綁定 this

常見錯誤

1. 箭頭函示回傳物件
const objectFn = () => { data:1} //undefined
console.log(objectFn());

改寫如下，回傳物件是記得加上括號
const objectFn = () => ({ data:1})

2. 運算式後方不能直接加入箭頭函式
let num = 0;
const operatorFn = num || () => 1;
console.log(operatorFn());

改寫如下，回傳物件是記得加上括號
const operatorFn = num || (() => 1);

3. 箭頭函示 this 指向不同
const object = {
   myName :' 小明',
   callName : function(){
     console.log(this.name); //小明
   }
}

object.callName();

const object = {
   myName :' 小明',
   callName : () => {
     console.log(this.name); //undefined
   }
}

object.callName();