Function.prototype.bind 實現原理

Function.prototype.bind

方法說明

做用同call和apply同樣，在指定對象上執行指定方法，不一樣點在於：
一、bind返回的是一個可執行函數
二、經過bind實現偏函數

源碼關鍵點在於

一、閉包：緩存bind方法的參數（上下文對象和參數列表）
二、返回可執行函數
三、可執行函數的內部經過apply方法實現對象和方法的綁定
四、偏函數的關鍵在於閉包（緩存bind方法的參數）和第二次函數調用時參數的拼接

源碼

Function.prototype.myBind = function (ctx, ...bindArgs) {
  // ctx、fnObj和args會造成閉包，fnObj是函數對象，即: test.bind(obj, arg1， arg2)中的test
  const fnObj = this
  return function (...fnArgs) {
    // 具體的函數綁定是經過apply方法實現的
    return fnObj.apply(ctx, [...bindArgs, ...fnArgs])
  }
}

// 示例
const obj = {
  name: 'I am obj'
}
function test (arg1, arg2) {
  return `${this.name}, ${arg1} ${arg2} !!`
}
// 綁定
const fn = test.bind(obj, 'hello', 'world')
const resFn = fn()
console.log(resFn)  // I am obj, hello world !!
// 偏函數
const pFn = test.bind(obj, 'hello')
const resPfn = pFn('world')
console.log(resPfn)    // I am obj, hello world !!