箭頭函式 arrow function｜筆記 by Sz

tags: Sz 課前 Vue新手夏令營

• Vue 新手夏令營 課程頁面
• 筆記入口

( (parameter) => {<自帶 return>})

• Arrow Function 的特性
  • ()： parameter 若只有一個的話，可省略
  • {}： 只有一行的話，可省略
  • 自帶 return
  • 本身無自己的 this 指向，看外層

箭頭函式的 this 指向

• 沒有自己的 this，看上層 function 的 this 是誰
• 沒有上層 function 那就是看全域

先複習傳統的 function 裡的 this

• this 是指看呼叫時，是誰呼叫這個 function 的
• callback function 通常是在全域下被呼叫的

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

箭頭函式裡面出現 this

箭頭函式內的 this 跟等同於包住他的外層 function 的 this

var name = '全域'
const person = {
  name: '小明',
  callName: function () { 
    console.log('1', this.name); // 1 小明
    setTimeout (() => {
      console.log('2', this.name); // 2 跟外層的 this.name 一樣都是小明
      console.log('3', this); // 3 跟外層的 this 一樣都是 person
    }, 10);
  },
}
person.callName(); 

沒有被 function 包住的箭頭函式

沒有上層 function 那就是看全域

var name = '全域'
const person = {
  name: '小明',
  callName: () => { 
    console.log(this.name); // 沒有外部 function 參考，this 會指向全域
  },
}
person.callName();

上章this 的幾種狀況指向不如預期的話題

• 先讓 this 在外層設定指向其他變數：vm (Vue 中指的 ViewModel)
• 使用箭頭函式

先讓 this 設定指向其他變數：vm

在 function 外面抓取外部的 vm
再將 vm 帶進去 function 內部

var obj4 = {
  someone: '物件 4',
  fn() {
    const vm = this; // vm 在 Vue 中意指 ViewModel
    setTimeout(function () {
      console.log(this.someone);
    });
  }
}
obj4.fn();

直接改用箭頭函式

用箭頭函式的特性，會直接讀取外層的 this

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