免費(fèi)AI編程助手
JavaScript中的apply()方法和call()方法使用介紹
javascript中apply和call方法的作用及區(qū)別說(shuō)明
call和apply的說(shuō)明
1、call，apply都屬于Function.prototype的一個(gè)方法，它是JavaScript引擎內(nèi)在實(shí)現(xiàn)的，因?yàn)閷儆贔unction.prototype，所以每個(gè)Function對(duì)象實(shí)例(就是每個(gè)方法)都有call，apply屬性。既然作為方法的屬性，那它們的使用就當(dāng)然是針對(duì)方法的了，這兩個(gè)方法是容易混淆的，因?yàn)樗鼈兊淖饔靡粯?，只是使用方式不同?/p>
2、語(yǔ)法：foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments) == this.foo(arg1, arg2, arg3);
3、相同點(diǎn)：兩個(gè)方法產(chǎn)生的作用是完全一樣的。
4、不同點(diǎn)：方法傳遞的參數(shù)不同。
實(shí)例代碼
<script type="text/javascript">
function A(){
this.flag = 'A';
this.tip = function(){
alert(this.flag);
};
}
function B(){
this.flag = 'B';
}
var a = new A();
var b = new B();
//a.tip.call(b);
a.tip.apply(b);
</script>三、代碼解釋(即說(shuō)明apply和call作用)
1、實(shí)例代碼定義了兩個(gè)函數(shù)A和B，A中包含flag屬性和tip屬性(這個(gè)屬性賦值一個(gè)函數(shù))，B中有一個(gè)flag屬性。
2、分別創(chuàng)建A和B的對(duì)象a和b。
3、無(wú)論是a.tip.call(b);和a.tip.apply(b);運(yùn)行的結(jié)果都是彈出B。
4、從結(jié)果中可以看出call和apply都可以讓B對(duì)象調(diào)用A對(duì)象的tip方法，并且修改了this的當(dāng)前作用對(duì)象。
JavaScript中的apply()方法和call()方法使用介紹
1、每個(gè)函數(shù)都包含兩個(gè)非繼承而來(lái)的方法：apply()和call()。
2、他們的用途相同，都是在特定的作用域中調(diào)用函數(shù)。
3、接收參數(shù)方面不同，apply()接收兩個(gè)參數(shù)，一個(gè)是函數(shù)運(yùn)行的作用域(this)，另一個(gè)是參數(shù)數(shù)組。
call()方法第一個(gè)參數(shù)與apply()方法相同，但傳遞給函數(shù)的參數(shù)必須列舉出來(lái)。
例1：
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); 運(yùn)行結(jié)果為：
Hello diz song glad to meet you!
Hello my Object glad to meet you! 例2：
function sum(num1, num2) {
return num1 + num2;
}
console.log(sum.call(window, 10, 10)); //20
console.log(sum.apply(window,[10,20])); //30 分析：在例1中，我們發(fā)現(xiàn)apply()和call()的真正用武之地是能夠擴(kuò)充函數(shù)賴以運(yùn)行的作用域，如果我們想用傳統(tǒng)的方法實(shí)現(xiàn)，請(qǐng)見(jiàn)下面的代碼：
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(); //Hello diz song glad to meet you!
myObject.HelloName = HelloName;
myObject.HelloName(); //Hello my Object glad to meet you! 見(jiàn)加紅的代碼，我們發(fā)現(xiàn)，要想讓HelloName()函數(shù)的作用域在對(duì)象myObject上，我們需要?jiǎng)討B(tài)創(chuàng)建myObject的HelloName屬性，此屬性作為指針指向HelloName()函數(shù)，這樣，當(dāng)我們調(diào)用myObject.HelloName()時(shí)，函數(shù)內(nèi)部的this變量就指向myObjecct，也就可以調(diào)用該對(duì)象的內(nèi)部其他公共屬性了。
通過(guò)分析例2，我們可以看到call()和apply()函數(shù)的真正運(yùn)用之處，在實(shí)際項(xiàng)目中，還需要根據(jù)實(shí)際靈活加以處理！
一個(gè)小問(wèn)題：再看一看函數(shù)中定義函數(shù)時(shí)，this變量的情況
function temp1() {
console.log(this); //Object {}
function temp2() {
console.log(this); //Window
}
temp2();
}
var Obj = {};
temp1.call(Obj); //運(yùn)行結(jié)果見(jiàn)上面綠色的注釋?。。?！ 執(zhí)行結(jié)果與下面的相同：
function temp1() {
console.log(this);
temp2();
}
function temp2() {
console.log(this);
}
var Obj = {};
temp1.call(Obj);
支持此方法的瀏覽器有IE9+、Firefox4+、Safari5.1+、Opera12+、Chrome。它是屬于ECMAScript5的方法。直接看例子：
window.color = "red";
var o = { color: "blue" };
function sayColor(){
alert(this.color);
}
var OSayColor = sayColor.bind(o);
OSayColor(); //blue 這里，sayColor()調(diào)用bind()方法，并傳入o對(duì)象，返回了OSayColor()函數(shù)，在OSayColor()中，this的值就為o對(duì)象。
更多建議：