JS学习笔记—手写封装call、apply 、 bind 函数和new的实现

一、实现call函数

Function.prototype.myCall = function(context) {
  if (typeof this !== 'function') {
    throw new TypeError('Error')
  }
  //当传入的context为基础类型时，直接挂载fn会报错
  if(typeof context !== 'object') context=new Object(context);

  context = context || window            //context 为可选参数，如果不传的话默认上下文为 window
  context.fn = this                      //给 context 创建一个 fn 属性，并将值设置为需要调用的函数
  const args = [...arguments].slice(1)   //call 可以传入多个参数作为调用函数的参数，所以需要将参数剥离出来
  const result = context.fn(...args)
  delete context.fn                      //调用函数并将对象上的函数删除
  return result
}

二、实现apply函数

Function.prototype.myApply = function(context) {
  if (typeof this !== 'function') {
    throw new TypeError('Error')
  }

  if(typeof context !== 'object') context=new Object(context);

  context = context || window
  context.fn = this
  let result
  // 处理参数和 call 有区别
  if (arguments[1]) {
    result = context.fn(...arguments[1])
  } else {
    result = context.fn()
  }
  delete context.fn
  return result
}

三、实现bind函数

Function.prototype.myBind = function (context) {
  if (typeof this !== 'function') {
    throw new TypeError('Error')
  }
  const _this = this
  const 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))
  }
}

以下是对实现的分析：

• bind 返回了一个函数，对于函数来说有两种方式调用，一种是直接调用，一种是通过 new 的方式
• 对于直接调用来说，这里选择了 apply 的方式实现，但是对于参数需要注意以下情况：因为 bind 可以实现类似这样的代码 f.bind(obj, 1)(2)，所以我们需要将两边的参数拼接起来，于是就有了这样的实现 args.concat(...arguments)
• 对于 new 的情况来说，不会被任何方式改变 this，所以对于这种情况我们需要忽略传入的 this

四、实现一个new

function create() {
  let obj = {}                              //新生成一个对象
  let Con = [].shift.call(arguments)        //获取构造函数
  obj.__proto__ = Con.prototype             //链接到原型
  let result = Con.apply(obj, arguments)    //绑定this并执行构造函数
  return result instanceof Object ? result : obj    //确保返回值为对象
}