手动实现 JavaScript 之 apply、call、bind

JavaScript 的 apply、call和bind方法用来更改函数内部的this指向，从而达到借调方法的目的，应用场景非常广泛。现在我们手动实现这几个方法，加深对原型和函数的理解。

Function.prototype.apply

apply 可以传入两个参数，第一个是函数的this，另外一个是函数的参数，类型是数组

Function.prototype.applyFn = function(context) {
   // 如果context不存在则为window
   context = context || window;
   // 将函数赋值给 context
   context.fn = this
   // 取第二个参数
   var args = arguments[1] || [];
   // 执行这个函数
   var result = context.fn(...args);
   // 移除 fn
   delete context.fn;
   // 返回结果
   return result;
}

Function.prototype.call

call 与 apply 唯一的区别是 call 可以传多个参数

Function.prototype.callFn = function(context, ...args) {
   // 直接利用 applyFn 来实现 call
  return this.applyFn(context, args);
}

Function.prototype.bind

bind 传参和 call 一样，区别是 bind 返回的是一个函数

Function.prototype.bindFn = function(context, ...args){
  var that = this
   // 直接利用 applyFn 来实现 bind
  return function(...inArgs) {
    return that.applyFn(context, [...args, ...inArgs])
  }
}

希望对大家有所帮助。