call、apply、bind仿实现

call的仿实现

call的用法

var a = {
  name: 123,
  myfn(...arg) {
    console.log(this.name);
    var argarr = Array.from(arguments);
    console.log(argarr);
  },
};

var fool = {
  name: "fool",
  foolfn() {
    console.log(this.name);
  },
};

//用法
a.myfn.call(); //调用call不传参数，
a.myfn.call(fool); //将fool作为this的绑定对象
a.myfn.call(fool,1,2,3); //将fool作为this的绑定对象,并传递参数

打印结果如下

call打印结果.png

思路分析

• call函数是所有函数共同的方法，故应当添加到Function的原型对象上
• 将call参数分为两部分，参数一用于指定this对象，参数二用于接受函数原本调用传递的参数
  实现代码

var name = 'window' 
var a = {
  name: 123,
  myfn(...arg) {
    console.log('this：'+ this);
    console.log(this.name);
    // var argarr = Array.from(arguments);
    console.log(...arg);
  },
};

var fool = {
  name: "fool",
  foolfn() {
    console.log(this);
  },
};

/* a.myfn.call();
a.myfn.call(fool,1,2,2); */
Function.prototype.myCall = function (thisArg, ...argArray) {
//结合下面代码的调用情况来看，curFn就是a.myfn
  var curFn = this;
//这一步给绑定对象加了一个属性：要执行的函数（原生实现是用c++完成的，并没有这一步，这里是用js模拟）
  thisArg.fn = curFn;
  thisArg.fn(...argArray);
  delete thisArg.fn;
};

a.myfn.myCall(fool, 1, 2, 3);

打印结果如下：

myCall.png