JavaScript中的apply和call函數(shù)詳解
第一次翻譯技術(shù)文章,見笑了!
翻譯原文:
Function.apply and Function.call in JavaScript
第一段略。
每個(gè)JavaScript函數(shù)都會(huì)有很多附屬的(attached)方法,包括toString()、call()以及apply()。聽起來(lái),你是否會(huì)感到奇怪,一個(gè)函數(shù)可能會(huì)有屬于它自己的方法,但是記住,JavaScript中的每個(gè)函數(shù)都是一個(gè)對(duì)象??匆幌?這篇文章 ,復(fù)習(xí)一下(refresher)JavaScript特性。你可能還想知道JavaScript中函數(shù)和方法的區(qū)別。我認(rèn)為“函數(shù)”和“方法”的描述,僅僅是JavaScript的習(xí)慣約定而已。函數(shù)立足于它們自己(例如:alert()),而方法是函數(shù)內(nèi)部一個(gè)對(duì)象的屬性(dictionary),我們通過對(duì)象來(lái)調(diào)用方法。每個(gè)JavaScript對(duì)象都有一個(gè)toString()方法,下面通過代碼舉例說明,在一個(gè)函數(shù)對(duì)象中,我們可以使用toString()方法。
function foo(){
alert('x');
}
alert(foo.toString());
因?yàn)楹瘮?shù)都是對(duì)象,它們有自己的屬性和方法。我們可以把它們看作數(shù)據(jù)(data)。這篇文章,我們只關(guān)注兩個(gè)函數(shù)的方法apply()以及call()。
我們從下面的代碼開始:
var x = 10;
function f(){
alert(this.x);
}
f();
我們定義了一個(gè)全局函數(shù)f()。f()通過this關(guān)鍵字訪問變量x,但是需要注意的是,我們不能通過一個(gè)對(duì)象的實(shí)例來(lái)調(diào)用這個(gè)函數(shù)。this指向的是什么對(duì)象呢?this會(huì)指向這個(gè)全局對(duì)象。我們的變量x就是在這個(gè)全局對(duì)象中定義的。上面的代碼能夠正常運(yùn)行,運(yùn)行結(jié)果會(huì)顯示一個(gè)對(duì)話框,對(duì)話框中顯示10。
我們可以通過this來(lái)調(diào)用call()和apply()。正如下面的例子展示如何使用call():
var x = 10;
var o = { x : 15};
function f(){
alert(this.x);
}
f();
f.call(o);
首先調(diào)用f()將會(huì)顯示10的對(duì)話框,因?yàn)閠his這個(gè)時(shí)候指向的是全局對(duì)象。然后我們調(diào)用f函數(shù)的call()方法,傳入的參數(shù)是o,運(yùn)行結(jié)果顯示的是o中x屬性的值15。call()方法會(huì)用它的第一個(gè)參數(shù)作為f函數(shù)的this指針。也就是說,我們會(huì)告訴運(yùn)行時(shí),f函數(shù)中的this指向的是哪個(gè)對(duì)象。
this跳轉(zhuǎn)聽起來(lái)有些滑稽,甚至對(duì)于C++、Java以及C#程序員來(lái)說有些反常。這些都是ECMAScript中有趣的部分。
通過call()也可以給函數(shù)傳遞參數(shù):
var x = 10;
var o = { x : 15};
function f(){
alert(this.x);
}
f();
f.call(o);
apply()和call()類似的,只是apply()要求第二個(gè)參數(shù)必須是一個(gè)數(shù)組。這個(gè)數(shù)組會(huì)作為參數(shù)傳遞給目標(biāo)函數(shù)。
var x = 10;
var o = {x : 15};
function f(message) {
alert(message);
alert(this.x);
}
f('invoking f');
f.apply(o, ['invoking f through apply']);
apply()方法是很有用的,因?yàn)槲覀兛梢詣?chuàng)建一個(gè)函數(shù)而不用去關(guān)心目標(biāo)方法的參數(shù)。這個(gè)函數(shù)可以通過apply()的第二個(gè)數(shù)組參數(shù)來(lái)傳遞額外的參數(shù)給方法。
var o = {x : 15};
function f1(message1) {
alert(message1 + this.x);
}
function f2(message1, message2) {
alert(message1 + (this.x * this.x) + message2);
}
function g(object, func, args) {
func.apply(object, args);
}
g(o, f1, ['the value of x = ']);
g(o, f2, ['the value of x squared = ', '. Wow!']);
這樣的語(yǔ)法有點(diǎn)問題。為了調(diào)用apply()方法,我們強(qiáng)制目標(biāo)函數(shù)使用數(shù)組中的參數(shù)。幸運(yùn)的是,有一個(gè)方法可以讓這種語(yǔ)法更簡(jiǎn)單。在此之前,我們必須先介紹一個(gè):參數(shù)標(biāo)識(shí)符。
在JavaScript中,其實(shí)每個(gè)函數(shù)都有一個(gè)可變長(zhǎng)度的參數(shù)列表。這意味著,即使一個(gè)函數(shù)只有一個(gè)參數(shù)的時(shí)候,我們也可以傳遞5個(gè)參數(shù)給它。下面的代碼不會(huì)有錯(cuò)誤,而且結(jié)果顯示的是“H”。
function f(message) {
alert(message);
}
f('H', 'e', 'l', 'l', 'o');
在f()中,如果我們不想去接受其他的參數(shù),我們可以用關(guān)鍵字arguments。arguments代表一個(gè)參數(shù)對(duì)象,它有一個(gè)代表長(zhǎng)度的屬性類似于數(shù)組。
function f(message) {
// message的值和arguments[0]是一樣的
for(var i = 1; i < arguments.length; i++){
message += arguments[i];
}
alert(message);
}
// 結(jié)果顯示“Hello”
f('H', 'e', 'l', 'l', 'o');
你應(yīng)該知道,嚴(yán)格來(lái)講,arguments不是一個(gè)數(shù)組。arguments有一個(gè)length屬性,但是沒有split、push、pop方法。在前面的g()函數(shù)中,我們可以從arguments中拷貝需要的參數(shù),組成數(shù)組,然后把這個(gè)數(shù)組傳遞給apply()。
var o = {x : 15};
function f(message1, message2) {
alert(message1 + ( this.x * this.x) + message2);
}
function g(object, func) {
// arguments[0] = object
// arguments[1] = func
var args = [];
for(var i = 2; i < arguments.length; i++) {
args.push(arguments[i]);
}
func.apply(object, args);
}
g(o, f, 'The value of x squared = ', '. Wow!');
當(dāng)我們調(diào)用g(),we can pass additional arguments as parameters instead of stuffing the arguments into an array。
相關(guān)文章
jQuery插件實(shí)現(xiàn)表格隔行變色及鼠標(biāo)滑過高亮顯示效果代碼
這篇文章主要介紹了jQuery插件實(shí)現(xiàn)表格隔行變色及鼠標(biāo)滑過高亮顯示效果代碼,涉及jQuery針對(duì)頁(yè)面元素動(dòng)態(tài)操作及響應(yīng)鼠標(biāo)事件動(dòng)態(tài)修改頁(yè)面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-02-02
jquery分頁(yè)插件jquery.pagination.js使用方法解析
這篇文章主要針對(duì)js分頁(yè)插件jquery.pagination.js使用方法進(jìn)行解析,很實(shí)用的分頁(yè)插件,感興趣的小伙伴們可以參考一下2016-04-04
使用jQuery.form.js/springmvc框架實(shí)現(xiàn)文件上傳功能
這篇文章主要介紹了使用jQuery.form.js/springmvc框架實(shí)現(xiàn)文件上傳功能,非常具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-05-05
基于jQuery實(shí)現(xiàn)仿百度首頁(yè)選項(xiàng)卡切換效果
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)仿百度首頁(yè)選項(xiàng)卡切換效果的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05
基于jQuery實(shí)現(xiàn)仿微博發(fā)布框字?jǐn)?shù)提示
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)仿微博發(fā)布框字?jǐn)?shù)提示的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07
JQuery中使用.each()遍歷元素學(xué)習(xí)筆記
這篇文章主要介紹了jquery中使用.each()遍歷元素學(xué)習(xí)筆記,本文從實(shí)際項(xiàng)目經(jīng)驗(yàn)總結(jié)而來(lái),需要的朋友可以參考下2014-11-11
Jquery實(shí)現(xiàn)仿騰訊娛樂頻道焦點(diǎn)圖(幻燈片)特效
這篇文章主要介紹了Jquery實(shí)現(xiàn)仿騰訊娛樂頻道焦點(diǎn)圖(幻燈片)特效,需要的朋友可以參考下2015-03-03

