如何理解和熟练运用js中的call及apply？

Posted 2020-10-18

在前端开发过程中，我们经常需要改变this指向，通常我们想到的就是用call方法，但是对于call的理解很多人不是很清晰，那么下面小提莫就给大家详细说一说call和apply的详细知识。

call的第一个参数传对象，参数可以是任何类型（包括null）。例：call(obj,arg1,arg2,arg3)

apply第一个参数传对象，参数可以是数组或者arguments对象。例：apply(obj,[arg1,arg2,arg3])

call和apply是为了动态改变this而出现的，当一个object没有某个方法，但是其他的有，我们可以借助call或apply用其它对象的方法来操作。

例如，我们经常会这样定义：

1 function Teemo(){
2 this.gift="mushroom";
3 this.say=function(){
4 　　　　console.log("I love "+this.gift);
5 　　}
6 }
7 var smallTeemo = new Teemo;
8 smallTeemo.say();

但是如果我们有一个对象Heimerdinger= {gift:"battery"}，我们不想对它重新定义say方法，那么我们可以通过call或apply用smallTeemo的say方法：smallTeemo.say.call(Heimerdinger)；

为了方便记忆：

提莫种蘑菇，大头摆炮台，安妮召唤熊。

有天大头想种蘑菇了

提莫.种蘑菇.call(大头，蘑菇)

大头就能种蘑菇了

提莫调皮了，也想召唤熊

安妮.召唤熊.call(提莫，熊)

就这样记住了。