call，apply和bind的实现

今天要分享的是call，apply和bind的实现。

首先看一下案例，定义了obj对象和一个函数，并且在函数里面打印当前的参数和this。

  let obj = {
      name: "111",
    };

    function testPrint(one, two) {
      console.log(this);//window
      console.log(this.name, "this.name");//''
      console.log(one, two, "one, two");// 1 2
    }

    testPrint("1", "2");
//由于函数的定义，this的指向是在定义的时候就确定了，所以当前调用的this指向的是window

而call，apply和bind，功能就是改变函数的this指向,是后续传参，所以是XXX.call/apply/bind()的实现

 testPrint.call(obj, "1", "2");
    testPrint.apply(obj, ["1", "2"]); //this=>obj

    testPrint.bind(obj);//不执行
    let fn = testPrint.bind(obj); //this=>obj
    fn("1", "2", "3");

 

不同点：call是单个传递，applay是数组,而bind的是先返回函数，然后函数在调用，是闭包的形式。

实现

   Function.prototype.MyCall = function (thisArg, ...args) {
      //this指的是当前函数 testPrint //因为  Function.prototype，testPrint是子类对象
      let fn = this;
      // 判断调用者是否为函数
      if (typeof fn !== "function") {
        throw new TypeError("Error");
      }
      //当前传入的对象是传入是对象，如果是字符串，那也要是类字符串，类似于java的拆箱装箱
      thisArg = [undefined, null].includes[thisArg] ? window : Object(thisArg);
      //修改引用变成对象调用
      thisArg.fn = fn;
      //如果arg不存在，就将其设置为[],方便结构
      args = args || [];
      //把参数传进去
      let res = thisArg.fn(...args);
      //执行完之后就删除该对象上的属性
      delete thisArg.fn;
      return res;
    };

//apply和call的区别就是传入的是数组，所以我们就改一下传入就好了
  Function.prototype.MyApplay = function (thisArg, args) {
    //同上
  }
//bind就是闭包形式，
    Function.prototype.MyBind = function (thisArg, ...args1) {
      //this指的是当前函数 testPrint
      let fn = this;
      // 判断调用者是否为函数
      if (typeof fn !== "function") {
        throw new TypeError("Error");
      }
      //当前传入的对象是传入是对象，如果是字符串，那也要是类字符串，类似于java的拆箱装箱
      thisArg = [undefined, null].includes[thisArg] ? window : Object(thisArg);

      return function (...args2) {
        //修改引用变成对象调用
        thisArg.fn = fn;
        //如果arg不存在，就将其设置为[],方便结构
        let args = [...args1, ...args2];
        //把参数传进去
        let res = thisArg.fn(...args1, ...args2);
        //执行完之后就删除该对象上的属性
        delete thisArg.fn;
        return res;
      };
    };