快捷導(dǎo)航

JavaScript實(shí)現(xiàn)手寫call/apply/bind的示例代碼

更新時(shí)間：2023年02月08日 11:31:01 作者：mick

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)手寫call/apply/bind的方法，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)JavaScript有一定的幫助，需要的可以參考一下

call

call的作用是啥

我們首先看一個(gè)案例

let foo = {
  value: 1
}

function bar() {
  console.log(this.value)
}

bar.call(foo) //1

可以總結(jié)兩個(gè)點(diǎn)：

call改變了bar的this指向，指向了foo
bar被執(zhí)行了那我們是不是可以理解為是這樣的情況呢

let foo = {
  value: 1,
  bar: function() {
    console.log(this.value)
  }
}
foo.bar()

我們可以看到這個(gè)時(shí)候this就指向了foo,但是多了一個(gè)屬性，那再把這個(gè)屬性刪掉就是咯。所以我們的思路可以是這樣的：

將函數(shù)設(shè)置成foo的屬性
執(zhí)行這個(gè)函數(shù)
刪除這個(gè)函數(shù) 暫時(shí)可以先寫成這樣

Function.prototype.myCall = function (context) {
  context.fn = this
  context.fn()
  delete context.fn
}

現(xiàn)在我們再回到最初的案例，然后加上參數(shù)

let foo = {
  value: 1
}

function bar(name, age) {
  console.log(this.value)
  console.log(name)
  console.log(age)
}

bar.call(foo, "mick", 18)
// 1
// mick
// 18

那我們就可以把call去除第一個(gè)參數(shù)，然后剩下的參數(shù)在執(zhí)行的時(shí)候添加進(jìn)去就好了

Function.prototype.myCall = function (context) {
  context.fn = this
  const args = [...arguments].slice(1)
  context.fn(...args)
  delete context.fn
}

我們修改下案例

var value = 1
function bar() {
  console.log(this.value)
}

bar.call(null) // 1

當(dāng)綁定的this指向?yàn)閚ull的時(shí)候，則認(rèn)識(shí)指向了window

let foo = {
  value: 1
}

function bar(name, age) {
  return {
    value: this.value,
    name,
    age
  }
}

console.log(bar.call(foo, "mick", 18))
// { value: 1, name: 'mick', age: 18 }

如果函數(shù)有返回值，我們實(shí)現(xiàn)的call不能僅僅是執(zhí)行了，也要有返回值。

Function.prototype.myCall = function (context) {
  context = context || window
  context.fn = this
  const args = [...arguments].slice(1)
  const res = context.fn(...args)
  delete context.fn
  return res
}

這樣就實(shí)現(xiàn)了一個(gè)call

總結(jié)

將函數(shù)設(shè)置成要指向的那個(gè)this的屬性
執(zhí)行這個(gè)函數(shù)
刪除這個(gè)屬性
考慮參數(shù)問題
考慮this為null的情況
考慮下返回值

apply

apply和call差不多，只是入?yún)⒉灰粯?，apply的參數(shù)是數(shù)組

Function.prototype.myApply = function (context, arr) {
  context = context || window
  context.fn = this
  var res
  if (!arr) {
    res = context.fn()
  } else {
    res = context.fn(...arr)
  }
  delete context.fn
  return res
}

bind

MDN上解釋的bind為：bind() 方法創(chuàng)建一個(gè)新的函數(shù)，在 bind() 被調(diào)用時(shí)，這個(gè)新函數(shù)的 this 被指定為 bind() 的第一個(gè)參數(shù)，而其余參數(shù)將作為新函數(shù)的參數(shù)，供調(diào)用時(shí)使用。我們可以得出兩個(gè)點(diǎn):

返回一個(gè)新的函數(shù)
可以傳入?yún)?shù)

先看下案例：

var foo = {
  value: 1
}

function bar(name, age) {
  console.log(this.value)
  console.log(name)
  console.log(age)
}

var bindFoo = bar.bind(foo, "mick")

bindFoo(18)
// 1
// mick
// 18

可以看到 bind的參數(shù)和返回的bindFoo的參數(shù)是合并的,而改變this可以利用apply來實(shí)現(xiàn)

Function.prototype.myBind = function (context) {
  const self = this
  const args = [...arguments].slice(1)
  return function () {
    const bindArgs = [...arguments].slice()
    return self.apply(context, args.concat(bindArgs))
  }
}

然而bind還有一個(gè)特點(diǎn)。在MDN上這樣說到：綁定函數(shù)自動(dòng)適應(yīng)于使用new操作符去構(gòu)造一個(gè)由目標(biāo)函數(shù)創(chuàng)建的新實(shí)例。當(dāng)一個(gè)綁定函數(shù)是用來構(gòu)建一個(gè)值的，原來提供的 this 就會(huì)被忽略。不過提供的參數(shù)列表仍然會(huì)插入到構(gòu)造函數(shù)調(diào)用時(shí)的參數(shù)列表之前。

所以當(dāng)執(zhí)行bind被返回的那個(gè)函數(shù)被當(dāng)做構(gòu)造函數(shù)的時(shí)候，bind綁定的this值就會(huì)失效。我們看下案例：

var value = 2

var foo = {
  value: 1
}

function bar(name, age) {
  this.hobby = "studying"
  console.log(this.value)
  console.log(name)
  console.log(age)
}

bar.prototype.friend = "randy"

var bindFoo = bar.bind(foo, "mick")

var obj = new bindFoo(18)
// undefined
// mick
// 18

console.log(obj.hobby)
console.log(obj.friend)
// studying
// randy

可以看出this失效了，所以我們要完善一下

Function.prototype.myBind = function (context) {
  const self = this
  const args = [...arguments].slice(1)
  var fBound = function () {
    const bindArgs = [...arguments].slice()
    // 用apply 實(shí)現(xiàn)this的綁定
    return self.apply(
      this instanceof fBound ? this : context,
      args.concat(bindArgs)
    )
  }

  fBound.prototype = this.prototype

  return fBound
}

首先加了this instanceof fBound 這個(gè)主要是為了判斷fBound是不是被當(dāng)做構(gòu)造函數(shù)使用的，如果是，那么將綁定函數(shù)的this指向該實(shí)例。fBound.prototype = this.prototype修改fBound的prototype是為了綁定函數(shù)的prototype,實(shí)例就可以繼承綁定函數(shù)原型中的值了。這也是為什么new bindFoo的實(shí)例能夠訪問bar原型的屬性。

優(yōu)化

fBound.prototype = this.prototype，當(dāng)我直接修改fBound的prototype的時(shí)候，也會(huì)直接修改綁定函數(shù)bar的prototype。這時(shí)候我們就需要一個(gè)空函數(shù)來中轉(zhuǎn)：

Function.prototype.myBind = function (context) {
  const self = this
  const args = [...arguments].slice(1)

  var fNOP = function () {}
  var fBound = function () {
    const bindArgs = [...arguments].slice()
    // 用apply 實(shí)現(xiàn)this的綁定
    return self.apply(
      this instanceof fNOP ? this : context,
      args.concat(bindArgs)
    )
  }

  fNOP.prototype = this.prototype
  fBound.prototype = new fNOP()

  return fBound
}