简单聊聊JS中call和apply的原码及区别

前言

在JavaScript中，每个函数对象都带有call()和apply()方法，即Function.prototype.call()和Function.prototype.apply()，这两个方法都是挂载在原型上的。

call

上一期我们比较详细的记录了手写call

我们在简单回顾一下：
定义：call()使用一个指定的this值和单独给出的一个或多个参数来调用一个函数。

//直接写简化版的咯，想看详细版的小伙伴可以看上一期，写的很详细的哟~
Function.prototype.call = function(context, ...args) {// 判断是否是undefined和nullif (typeof context === 'undefined' || context === null) {context = window}let fnSymbol = Symbol()context[fnSymbol] = thislet fn = context[fnSymbol](...args)delete context[fnSymbol] return fn
}

测试示例

var value = 2;
var obj = {value:1
};
function bar(name,age){return{value:this.value,name:name,age:age}
}
bar.call(obj,null);//1
console.log(bar.call(obj,'ken',12));
//{ value: 1, name: 'ken', age: 12 }

apply

apply的实现跟call类似，只是入参不一样，apply为数组。
定义：apply()方法调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数。

Function.prototype.apply = function(context,arr){var context = Object(context)||window;context.fn = this;var result;if(!arr){result = context.fn();}else{result = context.fn(...arr);}delete context.fn;return result;
}

最简化版方式：

Function.prototype.apply2 = function(context,args){//判断是否是undefined和nullif(typeof context === 'undefined' || context === null){context = window;}let fnSymbol = Symbol();context[fnSymbol] = this;let fn = context[fnSymbol](...args);delete context[fnSymbol];return fn;
}

测试示例

var value = 2;
var obj = {value:1
};
function bar(name,age){return{value:this.value,name:name,age:age}
}
console.log(bar.call(obj,'kin',13));
{ value: 1, name: 'kin', age: 13 }

区别

1、相同点：
call和apply两个方法最主要的作用就是改变this指向。

---

2、不同点：
传递的参数不同
call()方法接收的是参数列表，而apply()方法接收的是一个参数数组。

---

使用方法：

• call:
  - function.call(thisArg,arg1,arg2,…)
• apply:
  - function.apply(thisArg,[argsArray])

参数说明：
thisArg:函数在运行时的this值，如果函数处于非严格模式下，则指定为null或undefined时会自动替换为指向全局对象。
arg1,arg2,…和[argsArray]：函数接收的参数列表。

来吧！让满满的知识装进脑袋里，继续让我们脑子里的知识发光发热！