js中call、apply和bind的區別

標籤：面試   script   作用   題目   str   區別   上下文   遇到   getname   

前言

關於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();    // dog12 dog.getName.call(cat);    // cat13 dog.getName.apply(cat);    // cat14 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...]);

 

js中call、apply和bind的區別