js中callapply和bind的区别

Posted 2020-10-31 hyacinth-zqz

前言

关于js中call、apply和bind这三者的区别，这应该是一个老生常谈的问题，也是前端面试时经常会遇到的一道题目，因此也抽空把它理一遍。

作用

call、apply和bind都是一个javascript中的方法，他们的共同作用就是改变函数执行时的上下文，即改变函数执行时this的指向。我们来看下面的例子：

 1 function Animal(name) {
 2     this.name = name;
 3 }
 4 Animal.prototype.getName = function() {
 5     console.log(this.name);
 6 }
 7 var dog = new Animal(‘dog‘);
 8 var cat = {
 9     name: ‘cat‘
10 };
11 dog.getName();    // dog
12 dog.getName.call(cat);    // cat
13 dog.getName.apply(cat);    // cat
14 dog.getName.bind(cat)();    // cat

上面的例子中，一开始 getName 方法中this的指向是dog对象，所以第一次执行时输出的是‘dog‘，但在使用call、apply和bind分别改变getName执行时的上下文，this的指向就变成了cat对象，因此此时输出的name是cat对象的name即 ‘cat‘。

区别

尽管call、apply和bind三个方法的作用都是改变函数执行时this的指向，但它们在使用上还是有一定的区别。

（1）call、apply与bind的区别

　　call和apply都是改变函数的上下文this的指向后立即执行该函数，而bind则是返回改变上下文this后的一个函数。

（2）call和apply两者的区别

　　call和apply的第一个参数都是要改变的上下文对象，call从第二个参数开始以及后面的参数都是以参数列表的形式展现，而apply则是把除了要改变的上下文对象外的其他参数放在一个数组作为它的第二个参数。

1 fn.call(obj, arg1, arg2, arg3...);

2 fn.apply(obj, [arg1, arg2, arg3...]);