iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0
Modern Web

網頁前後端寶石庫-礦坑補完計畫系列 第 17

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()


上一篇
Day 16 JavaScript boxing vs unboxing
下一篇
Day 18 Rails MVC
系列文
網頁前後端寶石庫-礦坑補完計畫30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言