箭頭函式與this(下) - call、apply、bind

函式的內建方法與關鍵字

在箭頭函式與 this(上)中提到，箭頭函式沒有這些方式可以用 :

• this
• arguments
• call()
• apply()
• bind()

這篇我們要來看這些東西原本是怎麼運作的。

關鍵字 this

複習一下 this 的運作 :

var person = {
  name: 'Vic',
  age: 18,
  whoAmI: function(){
    console.log(`我是${this.name}，今年${this.age}歲`)
  }
}
person.whoAmI()
// 由於是在物件呼叫此函式的，所以往上一層尋找時(非箭頭函式)，會找到此物件的屬性值

關鍵字 arguments

• 一般函式內建的關鍵字之一
• 可以將傳入的參數值抓取出來形成一個類陣列物件

function sum(a, b) {
  console.log(arguments[0])
  console.log(typeof(arguments))
}
sum(2, 4)
// 2
// "object"

內建函式 call、apply、bind的共通點

• JS的內建函式
• 它們都與 this 有所關聯
• 不需要在函式中自訂參數就能將變數塞進 this
• 若有多個值，函式的第一個參數位置為 this
• 也就是說(this, 參數1, 參數2, 以此類推)

接下來，我們來看，call()、apply()以及 bind() 如何與 this 運作。

內建函式 call

• 單純將參數值傳入

function sum(a) {
  console.log(`this為${this}`)
  console.log(`第二個是${a}`)
  console.log(this + a)
}
sum.call(2, 4)
// "this為2"
// "第二個是4"
// 6

內建函式 apply

• 傳入的型態必須是陣列
• 功能上與 call 無異

function sum(a, b) {
  console.log(`陣列中第一個是${a}`)
  console.log(`this為${this}`)
  console.log(`陣列中第二個是${b}`)
  console.log(this + a + b)
}
let array = [2, 4]
sum.apply(1, array)
// "陣列中第一個是2"
// "this為1"
// "陣列中第二個是4"
// 7

內建函式 bind

• bind() 將建立一個新的函式

// 範例一
// bind會建立一個新的函式
// this會對應傳入的參數 newPerson
var name = 'Jay'
function display(){
  console.log(this.name)
}
var newPerson = {
  name: 'Vic'
}
var newDisplay = display.bind(newPerson)
display() // Jay
newDisplay() // Vic
// 新的函式會執行 console.log(newPerson.name)

// 範例二
// 若有多個值，bind的參數第一順位為 'this'
function sum(a) {
  console.log(`第一個是${this}`)
  console.log(`第二個是${a}`)
  console.log(this + a)
}
let plusTwo = sum.bind(2, 4)
plusTwo()
// "第一個是2"
// "第二個是4"
// 6

箭頭函式與 this

我們了解到箭頭函式沒有自己的 this，相對的也就沒有上述的那三種內建函式可供使用，也無法使用 arguments，但可以改用其餘參數來達成目的。箭頭函式與一般函式的運用，還是得看實際情況來做使用。

參考來源

1. realdennis - [JavaScript] 函數原型最實用的 3 個方法 — call、apply、bind
2. Schaos - 一次搞懂前端面試最愛問的 apply、bind、call
3. Henry Chang - JavaScript - call，apply，bind