JavaScript 中通過call或者apply用來代替另一個對象調(diào)用一個方法陨享,將一個函數(shù)的對象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對象推盛。簡單的說就是改變函數(shù)執(zhí)行的上下文峦阁,這是最基本的用法。兩個方法基本區(qū)別在于傳參不同耘成。
用法:
-
call(obj,arg1,arg2,arg3);
call第一個參數(shù)傳對象榔昔,可以是null驹闰。參數(shù)以逗號分開進行傳值,參數(shù)可以是任何類型撒会。 -
apply(obj,[arg1,arg2,arg3]);
apply第一個參數(shù)傳對象嘹朗,參數(shù)可以是數(shù)組或者arguments 對象。
使用
這兩個方法通常被用來類的繼承和回調(diào)函數(shù)
作用一诵肛、類的繼承:
apply示例1:
/*定義一個人類*/
function Person(name,age) {
this.name=name; this.age=age;
}
/*定義一個學生類*/
functionStudent(name,age,grade) {
Person.apply(this,arguments); this.grade=grade;
}
//創(chuàng)建一個學生類
var student=new Student("qian",21,"一年級");
//測試
alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade);
//大家可以看到測試結(jié)果name:qian age:21 grade:一年級
//學生類里面我沒有給name和age屬性賦值啊,為什么又存在這兩個屬性的值呢,這個就是apply的神奇之處.
分析:
Person.apply(this,arguments);
this:在創(chuàng)建對象在這個時候代表的是student
arguments:是一個數(shù)組,也就是[“qian”,”21”,”一年級”];
也就是通俗一點講就是:用student去執(zhí)行Person這個類里面的內(nèi)容,在Person這個類里面存在this.name等之類的語句,這樣就將屬性創(chuàng)建到了student對象里面
call示例1:
在Studen函數(shù)里面可以將apply中修改成如下:
Person.call(this,name,age);
這樣就ok了
call示例2
function Person(name, age) {
this.name = name;
this.age = age;
this.alertName = function () {
alert(this.name);
}
this.alertAge = function () {
alert(this.age);
}
}
function webDever(name, age, sex) {
Person.call(this, name, age);
this.sex = sex;
this.alertSex = function () {
alert(this.sex);
}
}
var test = new webDever("愚人碼頭", 28, "男");
test.alertName();//愚人碼頭
test.alertAge();//28
test.alertSex();//男
這樣 webDever類就繼承Person類屹培,Person.call(this,name,age) 的 意思就是使用 Person構(gòu)造函數(shù)(也是函數(shù))在this對象下執(zhí)行,那么 webDever就有了Person的所有屬性和方法怔檩,test對象就能夠直接調(diào)用Person的方法以及屬性了
作用二褪秀、回調(diào)函數(shù):
call 和 apply在回調(diào)行數(shù)中也非常有用,很多時候我們在開發(fā)過程中需要對改變回調(diào)函數(shù)的執(zhí)行上下文薛训,最常用的比如ajax或者定時什么的媒吗,一般情況下,Ajax都是全局的许蓖,也就是window對象下的蝴猪。
來看這個例子:
function Album(id, title, owner_id) {
this.id = id;
this.name = title;
this.owner_id = owner_id;
}
Album.prototype.get_owner = function (callback) {
var self = this;
$.get('/owners/' + this.owner_id, function (data) {
callback && callback.call(self, data.name);
});
};
var album = new Album(1, '生活', 2);
album.get_owner(function (owner) {
alert('The album' + this.name + ' belongs to ' + owner);
});
在這:
album.get_owner(function (owner) {
alert('The album' + this.name + ' belongs to ' + owner);
});
中的 this.name就能直接取到album對象中的name屬性了调衰。
什么情況下用apply,什么情況下用call
在給對象參數(shù)的情況下,如果參數(shù)的形式是數(shù)組的時候,比如apply示例里面?zhèn)鬟f了參數(shù)arguments,這個參數(shù)是數(shù)組類型,并且在調(diào)用Person的時候參數(shù)的列表是對應一致的(也就是Person和Student的參數(shù)列表前兩位是一致的) 就可以采用 apply , 如果我的Person的參數(shù)列表是這樣的(age,name),而Student的參數(shù)列表是(name,age,grade),這樣就可以用call來實現(xiàn)了,也就是直接指定參數(shù)列表對應值的位置(Person.call(this,age,name,grade));
apply的一些其他巧妙用法
細心的人可能已經(jīng)察覺到,在我調(diào)用apply方法的時候,第一個參數(shù)是對象(this), 第二個參數(shù)是一個數(shù)組集合,
在調(diào)用Person的時候,他需要的不是一個數(shù)組,但是為什么他給我一個數(shù)組我仍然可以將數(shù)組解析為一個一個的參數(shù),
這個就是apply的一個巧妙的用處,可以將一個數(shù)組默認的轉(zhuǎn)換為一個參數(shù)列表([param1,param2,param3] 轉(zhuǎn)換為 param1,param2,param3) 這個如果讓我們用程序來實現(xiàn)將數(shù)組的每一個項,來裝換為參數(shù)的列表,可能都得費一會功夫,借助apply的這點特性,所以就有了以下高效率的方法:
- Math.max 可以實現(xiàn)得到數(shù)組中最大的一項
因為Math.max 參數(shù)里面不支持Math.max([param1,param2])
也就是數(shù)組 膊爪。
但是它支持Math.max(param1,param2,param3…)
,所以可以根據(jù)剛才apply的那個特點來解決var max=Math.max.apply(null,array)
,這樣輕易的可以得到一個數(shù)組中最大的一項
(apply會將一個數(shù)組裝換為一個參數(shù)接一個參數(shù)的傳遞給方法)
這塊在調(diào)用的時候第一個參數(shù)給了一個null,這個是因為沒有對象去調(diào)用這個方法,我只需要用這個方法幫我運算,得到返回的結(jié)果就行,.所以直接傳遞了一個null過去 - Array.prototype.push 可以實現(xiàn)兩個數(shù)組合并
同樣push方法沒有提供push一個數(shù)組,但是它提供了push(param1,param,…paramN) 所以同樣也可以通過apply來裝換一下這個數(shù)組,即:
vararr1=new Array("1","2","3");
vararr2=new Array("4","5","6");
Array.prototype.push.apply(arr1,arr2);
也可以這樣理解,arr1調(diào)用了push方法,參數(shù)是通過apply將數(shù)組裝換為參數(shù)列表的集合.
通常在什么情況下,可以使用apply類似Math.min等之類的特殊用法:
一般在目標函數(shù)只需要n個參數(shù)列表,而不接收一個數(shù)組的形式([param1[,param2[,…[,paramN]]]]),可以通過apply的方式巧妙地解決這個問題!