談一談js中call()和apply()方法

在最近看的js書中，提及到了，Math對象，有max和min方法，當我們想要將這個方法適用數(shù)組的時候可以這樣適用。

var value = [1,2,3,4,5]
var max = Math.max.apply(Math,values);

之前對apply和call的只是知道是一種繼承的方式，但是并沒有深入，理解，于是我決定仔細研究研究。

call, apply都屬于Function.prototype的一個方法,它是JavaScript引擎內(nèi)在實現(xiàn)的,因為屬于Function.prototype,所以每個Function對象實例,也就是每個方法都有call, apply屬性.既然作為方法的屬性,那它們的使用就當然是針對方法的了.這兩個方法是容易混淆的,因為它們的作用一樣,只是使用方式不同.

call方法:
語法：call([thisObj[,arg1[, arg2[, [,.argN]]]]])
定義：調用一個對象的一個方法，以另一個對象替換當前對象。
說明：
call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數(shù)的對象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對象。
如果沒有提供 thisObj 參數(shù)，那么 Global 對象被用作 thisObj。

apply方法
語法：apply([thisObj[,argArray]])
定義：應用某一對象的一個方法，用另一個對象替換當前對象。
說明：
如果 argArray 不是一個有效的數(shù)組或者不是 arguments 對象，那么將導致一個 TypeError。
如果沒有提供 argArray 和 thisObj 任何一個參數(shù)，那么 Global 對象將被用作 thisObj， 并且無法被傳遞任何參數(shù)

相同點：兩個方法產(chǎn)生的作用是完全一樣的。

不同點：方法傳遞的參數(shù)不同。

function Animation(){
     this.name = "Animal";    
     this.showName = function(){    
        console.log(this.name);    
    }    
}

function Cat(){
    this.name = 'Cat';
}

let cat = new Cat();
let animation = new Animation();

animation.showName.apply(cat);

從結果中可以看出call和apply都可以讓Cat對象調用Animation對象的showName方法，并且修改了this的當前作用對象。

畫重點
|

每個函數(shù)都包含兩個非繼承而來的方法：apply()和call()。

他們的用途相同，都是在特定的作用域中調用函數(shù)。

接收參數(shù)方面不同，apply()接收兩個參數(shù)，一個是函數(shù)運行的作用域(this)，另一個是參數(shù)數(shù)組。
call()方法第一個參數(shù)與apply()方法相同，但傳遞給函數(shù)的參數(shù)必須列舉出來

eg:

window.firstName = "diz"; 
window.lastName = "song"; 
var myObject = { firstName: "my", lastName: "Object" }; 
function HelloName() { 
　　console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!"); 
} 
HelloName.call(window); //huo .call(this); 
HelloName.call(myObject); 

運行結果如下:

Hello diz song glad to meet you! 
Hello my Object glad to meet you! 

其實不難發(fā)現(xiàn)apply()和call()的真正用武之地是能夠擴充函數(shù)賴以運行的作用域

因此在es5中有bind()方法
eg:

window.color = "red"; 
var o = { color: "blue" }; 
function sayColor(){ 
alert(this.color); 
} 
var OSayColor = sayColor.bind(o); 
OSayColor(); //blue