js中call、apply和bind的區別

前言

關於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...]);