js中call()和apply()的使用

雨点打透心脏的1/2处 2021-09-15 03:48 339阅读 0赞

在讲解之前，因为call()和apply()方法的第一个参数传入的是一个对象，一般会用this表示引用对象，所以学习之前一定要先明白this的指向问题，关于this的指向问题，可以查阅链接：[js中this的作用和使用方法][js_this]

1.call()的使用

call()和apply()的作用十分相似，只是参数类型上的差别，以适应不同的使用场景。它们都是为了改变函数运行时的 context（上下文）而存在的，再说的直白一点，就是为了改变函数内部 this 的指向。这样就可以实现继承了。

下面来看一段代码：

Judy.say();输出什么？输出“Judy likes carrot.”

可以看出，我们声明了一个叫Judy的对象，我们并没有在rabbit对象里添加任何属性和方法，但是我们使用call()继承了原本属于animal的属性和方法。就可以做到animal函数所有能做到的事情。

但是如果不用call()方法时，源代码是要这样写：

function animal(name,food){
    	this.name = name;
    	this.food = food;
    	this.say = function(){
    		alert(name + ' likes ' + food +' .');
    	}
    }
    var Judy = new animal('Judy','carrot');
    Judy.say();

输出依旧是“Judy likes carrot.”，所以可以看到call()方法可以实现继承。

这到底是怎么做到的呢？让我们来看看call()的参数：

第一个是一个对象，这个对象将代替Function类里原本的this对象，我们传入的是this，记住，这个this在rabbit函数里指的是未来将要实例化这个函数的对象（有些拗口），当声明了Judy的时候，这个this指的就是Judy。(这里如果还是想不通，可以复习前面讲的this用法)除了第一个参数，后面所有的参数都是传给父函数本身使用的参数。

而apply()和call()功能几乎一样，唯一的区别就是apply()第二个参数只能是数组，这个数组将作为参数传给原函数的参数列表arguments。

而apply使用的场景，更多的使用在这样一个场景：需要将数组转化为参数列表。

例如，push()方法的参数只能是一个或者多个参数，而不能是一个数组，当我们想要将数组B拼接到数组A后面时，传统的做法是遍历数组B，每循环一次就push进数组A后面，这样就浪费了push()可以传多个参数的功能。

但可以这样做：

var list1 = [0,1,2];
    var list2 = [3,4,5];
    [].push.apply(list1,list2);
    console.log(list1);// [0,1,2,3,4,5]

看起来有点糊涂？可以这样理解：

list1调用了属于数组对象的push方法，这个push方法需要传入一个参数列表，而恰好我们有了list2这个数组类型的参数列表，实现了拼接操作。

第三行就相当于：list1.push(3,4,5);

好了，以上就是call()方法和apply()方法的使用，但是一定要注意this的指向问题！

[js_this]: https://blog.csdn.net/charles_tian/article/details/79778872