Day 17 JavaScript bind vs call vs apply

• 共同点：
  原本的 this 是指向全域物件 window ，使用 bind、call、apply 可以将 this 指向带入的第一个引数，而第二个引数开始则为一般我们认知上的引数。
• Function.prototype.bind():
  • 必须将他指派为一个物件(函式)。
  • 会建立一个新的函式。
  • 引数可带入多个。

const Olympics = {
  event: "羽球",
  player: "小戴"
}

function play(result, review) {
  console.log(`${this.event}比赛结果: ${this.player}${result}，${review}`)
}
// 写法1:把引数写在 bind 後面
const badmintonResult = play.bind(Olympics, "赢了", "好棒")
badmintonResult()
// 印出：羽球比赛结果: 小戴赢了，好棒

// 写法2:把引数写在已宣告的物件上
const badmintonResult = play.bind(Olympics)
badmintonResult("赢了", "好棒")
// 印出：羽球比赛结果: 小戴赢了，好棒

• Function.prototype.call():
  • 可以直接呼叫，不用将他指派为物件。
  • 不会产生新的函式。
  • 引数可带入多个。

const Olympics = {
  event: "羽球",
  player: "小戴"
}

function play(result, review) {
  console.log(`${this.event}比赛结果: ${this.player}${result}，${review}`)
}

play.call(Olympics, "赢了", "好棒")
// 印出：羽球比赛结果: 小戴赢了，好棒

• Function.prototype.apply():
  • 可以直接呼叫，不用将他指派为物件。
  • 不会产生新的函式。
  • 引数只能带入一组阵列。

const Olympics = {
  event: "羽球",
  player: "小戴"
}
  
function play(result, review) {
  console.log(`${this.event}比赛结果: ${this.player}${result}，${review}`)
}
  
play.apply(Olympics, ["赢了", "好棒"])
// 印出：羽球比赛结果: 小戴赢了，好棒

参考：
[1]Function.prototype.bind()
[2]Function.prototype.call
[3]Function.prototype.apply()