使用原生JavaScript实现call、apply和bind

思路

在JavaScript中this的指向问题中提到，作为对象方法的调用。函数还可以作为某个对象的方法调用，这时this就指这个上级对象。也就是我们平时说的，谁调用，this就指向谁。

实现方法：在传入的参数中传入一个方法，然后执行这个方法，最后删除该方法（为了保持对象的前后一致性）。

call

var obj = {
    age ; 10
}
var fn = function(){
    this.value = 100;
}
/**
将newCall绑定在Function的原型上 context:上下文 即this
...rest ES6语法糖 用来取代arguments
*/
Function.prototype.newCall = function(context,...rest){
    if( context instanceof Object ){
        context = context || window;
    }else{
        context = Object.create(null);
    }
    //使用symbal 避免原来的context上有函数fn
    const fn = Symbal();
    context[fn] = this;//此时this 谁调用 指向谁
    context[fn](...rest);//context 调用fn,改变this指向
    delete context[fn];//删除fn属性 保持原对象的统一
}
var fun = function(){
    console.log(this.age);//10
    // fn.newCall(this);
    //console.log(this.value); 100
}

fun.newCall(fn);

apply

和call类似，只是传参的不同，不多说 ，直接上代码：

Function.prototype.newCall = function(context,parames){
    if( context instanceof Object ){
        context = context || window;
    }else{
        context = Object.create(null);
    }
    //使用symbal 避免原来的context上有函数fn
    const fn = Symbal();
    context[fn] = this;//此时this 谁调用 指向谁
    context[fn](parames);//context 调用fn,改变this指向
    delete context[fn];//删除fn属性 保持原对象的统一
}

bind

bind和call、apply的区别，这里不再多做赘述。直接上代码：

Function.prototype.bind = function (context,...innerArgs) {
  var self = this
  return function (...finnalyArgs) {
    return self.call(context,...innerArgs,...finnalyArgs)
  }
}