定義 ECMAScript規範為所有函數都包含兩個方法(這兩個方法非繼承而來), call 和 apply 。這兩個函數都是在特定的作用域中調用函數,能改變函數的作用域，實際上是改變函數體內 this 的值 。 用法 我們看到通過方法本身的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 框架底層的話會看到好多地方都有大量用到。
