前端高级javascript进阶之call、apply原理

两年多的前端小菜鸟一枚，之前都是看别人写的文章，一直没有产出属于自己脑子里的东西，从今日便开始自己的写作之旅，不喜勿喷（想写出像别的大佬一样的文采，可惜没有）

call和apply的不同只是在于传的第二个参数不同而已，call的第二个参数是一个一个的，apply传的参数是数组。

一、call的实现原理

• call的特点

1.  改变当前函数this指向
2. 执行当前函数

• call的原理

          函数都可以调用call，说明call是函数原型上的方法，所有的实例都可以调用，即Function.prototype.call;其次，若第一个参数没有传进来，在全局环境下，那么默认this指向window（浏览器）/global(node)，传入call的第一个参数是this指向的对象，根据obj.foo(),foo()中的this指向obj,因此我们可以这样调用函数thisArgs.func(...args),所以相应的func中的this就指向了thisArgs,然后返回执行结果。

Function.prototype._call = function() {
    let [thisArgs, ...args] = arguments;

    if(!thisArgs) {
        thisArgs = typeof window === 'undefined' ? global : window;
    }
    
    thisArgs.func = this; //核心
    
    let result = thisArgs.func(...args); //执行函数，执行this();

    delete thisArgs.func;
    return thisArgs;
}

let obj = {
    name: 'wf'
}

function fn (age, name) {
    console.log(this);
    console.log(age, name)
}

fn._call(obj, 26, 'hello') // wf 26 hello

二、apply的实现原理

• 和call的实现原理一样，只是处理参数不同而已

  Function.prototype._apply = function() { let [thisArgs, args] = arguments; let result;

  if(!thisArgs) {
      thisArgs = typeof window === 'undefined' ? global : window;
  }
      
  thisArgs.func = this; //核心
  

  if(!args) { result = thisArgs.func(); } else { result = thisArgs.func(...args) } delete thisArgs.func; return thisArgs; } let obj = { name: 'wf' }

  function fn (age, name) { console.log(this); console.log(age, name) }

  fn._apply(obj, [26, 'hello']) // wf 26 hello

接下来想搞明白函数柯里化实现bind原理。路漫漫其修远兮，吾将上下而求索。