new、call、apply、bind实现的原理，是你理解的那样吗？

前言

在项目开发过程中，对于函数封装时，在调用函数内部方法时，有可能是window调用这时就会报错，常使用call，apply，bind来绑定this指向。

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： 返回的值必须为对象
    }

New方法校验

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)）

• 把调用函数fn的上下文指向obj
• 形参a,b等是以逗号分隔传进去
• 执行函数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 // 返回结果
    }

Call方法校验

 // 浏览器环境下
    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