1. 程式人生 > >JavaScript筆記:最詳細的call函式和apply函式用法總結

JavaScript筆記:最詳細的call函式和apply函式用法總結

昨天聽了一堂直播,裡面有教到關於forEach函式的原始碼編寫,提到了call()和apply()函式,有點懵,這才發現之前我學的太快了,有很多細節沒有注意,當進行實戰時才發現漏了一些東西,現在開始查漏補缺。

今天就好好總結一下call()和apply()方法的應用。首先,這兩個函式的作用完全一樣,都是呼叫建構函式來構造自己的物件,並且還能夠改變this的指向,區別就只是傳參形式不一樣。

/*apply()方法*/
function.apply(thisObj[, argArray])

/*call()方法*/
function.call(thisObj[, arg1[, arg2[
, [,...argN]]]]);

apply:呼叫一個物件的一個方法,用另一個物件替換當前物件。例如:B.apply(A, arguments);即A物件應用B物件的方法。

call:呼叫一個物件的一個方法,用另一個物件替換當前物件。例如:B.call(A, args1,args2);即A物件呼叫B物件的方法。

call()

call函式,能夠接收兩個引數一個是Object,一個是args(預設引數),這個args是一個個零散的引數,用逗號隔開。

Function.call(Object,"引數列表");

這兩個引數會被傳遞給被呼叫call方法的函式Function,並按Function的程式執行(引數列表的順序對應的是Function裡形參的順序,名稱可以不一樣)。
Object會替代Function裡的this,args作為實參傳入被Function執行。

看一個call函式的例子:

function Say(word,sentence) {
    this.word = word;
    this.sentence = sentence;
}
function Eat(food,drinks) {
    this.food = food;
    this.drinks = drinks;
}
function People(word,sentence,food,drinks) {
	Say.call(this,word,sentence);
	Eat.call(this,food,drinks);
}
var xiaoming =
new People("hello","how are you","bread","milk"); ----------------------------------------------------------- console.log(xiaoming); People {word: "hello", sentence: "how are you", food: "bread", drinks: "milk"}

這裡相當於構建了兩個簡單的基礎框架,People直接呼叫。當通過People例項化一個物件xiaoming時,People裡面的call函式裡的this就是xiaoming,這個xiaoming帶著實參通過call方法,傳入到被呼叫的建構函式裡,取代了被呼叫函式中的this,執行完建構函式後,將結果返回。

這裡注意一下,call裡的第一位引數this不是非得寫成this,任何Object都可以,它的目的是把被呼叫函式裡的this改變成這個call裡所傳進去的這個this物件。

只不過在這裡,用this恰好可以表示我們要傳進去的物件,也就是被例項化的物件,就是這麼個邏輯。

apply()

apply()的第一個引數作用和call()是一樣的,只不過apply()的第二個引數是個args,obj和args同樣被傳入到被呼叫建構函式中執行,返回結果。

args可以是陣列或類陣列,apply函式把這個集合中的元素作為引數傳遞給被呼叫的函式。

Function.apply(Object,args);

還是利用上邊的例子來進行演示:

function Say(word,sentence) {
    this.word = word;
    this.sentence = sentence;
}
function Eat(food,drinks) {
    this.food = food;
    this.drinks = drinks;
}
function People(word,sentence,food,drinks) {
	Say.apply(this,[word,sentence]); //引數列表改為陣列
	Eat.apply(this,[food,drinks]);
}
var xiaoming = new People("hello","how are you","bread","milk");
-----------------------------------------------------------
console.log(xiaoming); //輸出結果不變
People {word: "hello", sentence: "how are you", food: "bread", drinks: "milk"}

總結

call函式和apply函式都是呼叫建構函式例項化自己的物件,並能夠改變this指向,區別在於傳參形式的不同。