js 中 call、apply、bind 区别以及模拟实现

call、apply、bind 三个方法都是为了改变 this 指向，作用是相同的，只是传参和调用方式不同。

call：接受一个参数列表

apply：接受一个参数数组

bind：返回一个函数，需要执行调用

let obj = {
    a:'aaa'
}
function testFn(number1, number2) {
    console.log(this.a, number1, number2)
}
testFn.call(obj, 123, 456)
testFn.apply(obj, [123, 456])
testFn.bind(obj)(123,456)

上面三行代码执行输出是一样的，需要仔细观察调用和传参的方式

aaa 123 456
aaa 123 456
aaa 123 456

call 的模拟实现

思路：

• 不传入第一个参数，默认为window
• 让传入的对象添加一个函数，执行完之后删除
• 使用 arguments 接受参数，对应于传递给函数的参数的类数组对象

Function.prototype.myCall = function (context) {
    context = context || window
    // 给 新对象 添加一个属性fn = this,这里的 this 指向 testFn
    // testFn.call(obj, '123', '456') => obj.fn = testFn
    context.fn = this
    // 将 context 后面的参数取出来
    let args = [...arguments].slice(1)
    // testFn.call(obj, '123', '456') => obj.fn('123', '456')
    let result = context.fn(...args)
    // 删除 fn
    delete context.fn
    return result
}
// 执行，对比一下效果
testFn.myCall(obj, 123, 456)

apply 模拟实现

思路和call是一样的，只是接收参数不一样

Function.prototype.myApply = function (context) {
    context = context || window
    // 给 新对象 添加一个属性fn = this,这里的 this 指向 testFn
    // testFn.call(obj, '123', '456') => obj.fn = testFn
    context.fn = this

    let result
    // 需要判断是否存储第二个参数
    // 如果存在，就将第二个参数展开
    if (arguments[1]) {
      result = context.fn(...arguments[1])
    } else {
      result = context.fn()
    }
  
    // 删除 fn
    delete context.fn
    return result
}
// 执行
testFn.myApply(obj, [123, 456])

bind 的模拟实现

bind 需要注意的是返回一个函数，并用apply调用

Function.prototype.myBind = function (context) {
    if (typeof this !== 'function') {
        throw new TypeError('Error')
      }
      let _this = this
      let args = [...arguments].slice(1)
      // 返回一个函数
      return function F() {
        // 因为返回了一个函数， new F() 执行
        if (this instanceof F) {
          return new _this(...args, ...arguments)
        }
        // 返回一个包装好的函数
        return _this.apply(context, args.concat(...arguments))
      } 
}

// 执行
testFn.myBind(obj)(123,456)