new,call,apply,bind方法的实现原理

javascript中new,call,apply,bind等方法是我们经常要使用到，在伪数组转数组、函数传参、继承等场景中，都离不开他们。这里就不具体讨论他们的使用方法，我们将研究他们的实现方式，重写属于我们自己的方法，让大家重新认识他们的实现过程，使我们在开发中知其然，知其所以然！

new的实现

我们用new实例化一个构造函数，生成一个实例对象，而new到底做了什么呢，主要分为以下五步：

• 1: 获取构造函数
• 2：创建一个新对象；
• 3：将函数的作用域赋给新对象（这里实际上就是生产了一个新的上下文）
• 4：执行函数中的代码（为新对象添加属性、方法）
• 5：返回值，无返回值或者返回一个非对象值时，则将创建的新对象返回，否则会将返回值作为新对象返回。（也就是说一定会返回一个对象回来，这一步可以从下面的代码得结论）

    function MyNew() {
      let Constructor = Array.prototype.shift.call(arguments); // 1：取出构造函数

      let obj = {} // 2：执行会创建一个新对象

      obj.__proto__ = Constructor.prototype // 3：该对象的原型等于构造函数prototype

      var result = Constructor.apply(obj, arguments) // 4： 执行函数中的代码

      return typeof result === 'object' ? result : obj // 5： 返回的值必须为对象
    }

• MyNew方法校验

    function Man(name, age) {
      this.name = name
      this.age = age
    }
    var tom = new Man('tom', 20)
    var mike = MyNew(Man, 'mike', 30)
    console.log(tom  instanceof Man, mike instanceof Man) // true true

call的实现

call方法的实现主要有以下三步，比如 fn.call(obj, a, b) ：

• 1： 把调用函数fn的上下文指向obj
• 2： 形参a,b等是以逗号分隔传进去
• 3: 执行函数fn，并返回结果

    Function.prototype.myCall = function (context) {
      context = context ? Object(context) : window 
      context.fn = this // 重置上下文
      let args = [...arguments].slice(1) // 截取参数a,b
      let r = context.fn(...args) // 执行函数
      delete context.fn // 删除属性，避免污染
      return r // 返回结果
    }

• myCall方法校验

    // 浏览器环境下
    var a = 1, b = 2;
    var obj ={a: 10,  b: 20}
    function test(key1, key2){
      console.log(this[key1] + this[key2]) 
    }
    test('a', 'b') // 3
    test.myCall(obj, 'a', 'b') // 30
    

apply的实现

apply方法和call方法大同小异，唯一差别就是，apply传入的参数是数组格式。

    // apply 原理
    Function.prototype.myApply = function (context) {
      context = context ? Object(context) : window
      context.fn = this
      let args = [...arguments][1]
      if (!args) {
        return context.fn()
      }
      let r = context.fn(...args)
      delete context.fn;
      return r
    }

• apply方法校验

    // 浏览器环境下
    var a = 1, b = 2;
    var obj ={a: 10,  b: 20}
    function test(key1, key2){
      console.log(this[key1] + this[key2]) 
    }
    test('a', 'b') // 3
    test.myCall(obj, ['a', 'b']) // 30  注意这里是传入数组 ['a', 'b']

bind方法实现

bind方法和call、apply方法的差别是，他们都改变了上下文，但是bind没有立即执行函数。

    // bind 原理
    Function.prototype.Mybind = function (context) {
      let _me = this
      return function () {
        return _me.apply(context)
      }
    }

• bind方法校验

    var a = 1, b = 2;
    var obj ={a: 10,  b: 20}
    function test(key1, key2){
      console.log(this[key1] + this[key2]) 
    }
    var fn = test.bind(obj)
    fn('a', 'b') // 30

好了，介绍完了，如果觉得对你有帮助，点个赞哈，嘿嘿！

参考文章来源：

• 掘金： 《call,apply,bind,new实现原理》