詳解 JavaScript的 call() 和 apply()

定義

ECMAScript規範爲全部函數都包含兩個方法(這兩個方法非繼承而來), call 和 apply 。這兩個函數都是在特定的做用域中調用函數,能改變函數的做用域，其實是改變函數體內 this 的值 。

call 和 apply

語法	定義	說明
call(thisObj，Object)	調用一個對象的一個方法，以另外一個對象替換當前對象。	call 方法能夠用來代替另外一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變爲由 thisObj 指定的新對象.若是沒有提供 thisObj 參數，那麼 Global 對象被用做 thisObj
apply(thisObj，[argArray])	應用某一對象的一個方法，用另外一個對象替換當前對象。	若是 argArray 不是一個有效的數組或者不是 arguments 對象，那麼將致使一個 TypeError。若是沒有提供 argArray 和 thisObj 任何一個參數，那麼 Global 對象將被用做 thisObj， 而且沒法被傳遞任何參數

用法

調用函數，傳遞參數

//定義一個add 方法 function add(x, y) { return x + y; } //用call 來調用 add 方法 function myAddCall(x, y) { //調用 add 方法 的 call 方法 return add.call(this, x, y); } //apply 來調用 add 方法 function myAddApply(x, y) { //調用 add 方法 的 applly 方法 return add.apply(this, [x, y]); } console.log(myAddCall(10, 20)); //輸出結果30 console.log(myAddApply(20, 20)); //輸出結果40

咱們看到經過方法自己的call 和 apply 執行了該函數。

改變函數做用域

var name = '小白'; var obj = {name:'小紅'}; function sayName() { return this.name; } console.log(sayName.call(this)); //輸出小白 console.log(sayName. call(obj)); //輸入小紅

咱們改變了函數運行的做用域， 經過綁定不一樣的對象，函數內部 this 也不一樣。最終輸入結果纔會這樣。

高級用法，實現 js 繼承

//父類 Person function Person() { this.sayName = function() { return this.name; } } //子類 Chinese function Chinese(name) { //藉助 call 實現繼承 Person.call(this); this.name = name; this.ch = function() { alert('我是中國人'); } } //子類 America function America(name) { //藉助 call 實現繼承 Person.call(this); this.name = name; this.am = function() { alert('我是美國人'); } } //測試 var chinese = new Chinese('成龍'); //調用 父類方法 console.log(chinese.sayName()); //輸出 成龍 var america = new America('America'); //調用 父類方法 console.log(america.sayName()); //輸出 America

區別

• 參數不一樣, apply 傳入的是一個參數數組，也就是將多個參數組合成一個參數數組， call 從第二個參數開始依次傳入.
• apply 能夠直接將當前函數的arguments對象做爲apply的第二個參數傳入

結束語

call 和 apply 最大的好處:方便咱們解耦，對象不須要和方法有任何的耦合性，能使咱們寫出更好的面相對象程序。
你們若是看一些 js 框架底層的話會看到好多地方都有大量用到。