免費AI編程助手
JavaScript中的apply()方法和call()方法使用介紹
javascript中apply和call方法的作用及區(qū)別說明
call和apply的說明
1、call，apply都屬于Function.prototype的一個方法，它是JavaScript引擎內(nèi)在實現(xiàn)的，因為屬于Function.prototype，所以每個Function對象實例(就是每個方法)都有call，apply屬性。既然作為方法的屬性，那它們的使用就當(dāng)然是針對方法的了，這兩個方法是容易混淆的，因為它們的作用一樣，只是使用方式不同。
2、語法：foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments) == this.foo(arg1, arg2, arg3);
3、相同點：兩個方法產(chǎn)生的作用是完全一樣的。
4、不同點：方法傳遞的參數(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>三、代碼解釋(即說明apply和call作用)
1、實例代碼定義了兩個函數(shù)A和B，A中包含flag屬性和tip屬性(這個屬性賦值一個函數(shù))，B中有一個flag屬性。
2、分別創(chuàng)建A和B的對象a和b。
3、無論是a.tip.call(b);和a.tip.apply(b);運行的結(jié)果都是彈出B。
4、從結(jié)果中可以看出call和apply都可以讓B對象調(diào)用A對象的tip方法，并且修改了this的當(dāng)前作用對象。
JavaScript中的apply()方法和call()方法使用介紹
1、每個函數(shù)都包含兩個非繼承而來的方法：apply()和call()。
2、他們的用途相同，都是在特定的作用域中調(diào)用函數(shù)。
3、接收參數(shù)方面不同，apply()接收兩個參數(shù)，一個是函數(shù)運行的作用域(this)，另一個是參數(shù)數(shù)組。
call()方法第一個參數(shù)與apply()方法相同，但傳遞給函數(shù)的參數(shù)必須列舉出來。
例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); 運行結(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()的真正用武之地是能夠擴充函數(shù)賴以運行的作用域，如果我們想用傳統(tǒng)的方法實現(xià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! 見加紅的代碼，我們發(fā)現(xiàn)，要想讓HelloName()函數(shù)的作用域在對象myObject上，我們需要動態(tài)創(chuàng)建myObject的HelloName屬性，此屬性作為指針指向HelloName()函數(shù)，這樣，當(dāng)我們調(diào)用myObject.HelloName()時，函數(shù)內(nèi)部的this變量就指向myObjecct，也就可以調(diào)用該對象的內(nèi)部其他公共屬性了。
通過分析例2，我們可以看到call()和apply()函數(shù)的真正運用之處，在實際項目中，還需要根據(jù)實際靈活加以處理！
一個小問題：再看一看函數(shù)中定義函數(shù)時，this變量的情況
function temp1() {
console.log(this); //Object {}
function temp2() {
console.log(this); //Window
}
temp2();
}
var Obj = {};
temp1.call(Obj); //運行結(jié)果見上面綠色的注釋?。。。?執(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對象，返回了OSayColor()函數(shù)，在OSayColor()中，this的值就為o對象。
更多建議：