JavaScript中5種調(diào)用函數(shù)的方法

第第頁(yè)JavaScript中5種調(diào)用函數(shù)的方法JavaScript中5種調(diào)?函數(shù)的?法

這篇?章詳細(xì)的介紹了Javascript中各種函數(shù)調(diào)?的?法及其原理，對(duì)于理解JavaScript的函數(shù)有很?的幫助！

JavaScript，調(diào)?函數(shù)的5種?法

?次??次的，我發(fā)現(xiàn)，那些有bug的Javascript代碼是由于沒有真正理解Javascript函數(shù)是如何?作?導(dǎo)致的(順便說(shuō)?下，許多那樣的代碼是我寫的).JavaScript擁有函數(shù)式編程的特性,當(dāng)我們選擇?對(duì)它的時(shí)候，這將成為我們前進(jìn)的阻礙.

作為初學(xué)者，我們來(lái)測(cè)試五種函數(shù)調(diào)?的?法，從表?來(lái)看我們會(huì)認(rèn)為那些函數(shù)與C#中函數(shù)的作??常相似，但是我們?會(huì)?可以看到還是有?常重要的不同的地?的，忽視這些差異?疑會(huì)導(dǎo)致難于跟蹤的bug。?先讓我們創(chuàng)建?個(gè)簡(jiǎn)單的函數(shù)，這個(gè)函數(shù)將在將在下?中使?，這個(gè)函數(shù)僅僅返回當(dāng)前的this的值和兩個(gè)提供的參數(shù).

復(fù)制代碼代碼如下:

scripttype="text/javascript"

functionmakeArray(arg1,arg2){

return[this,arg1,arg2];

}

predict/script

最常?的?法，但不幸的，全局的函數(shù)調(diào)?

當(dāng)我們學(xué)習(xí)Javascript時(shí)，我們了解到如何?上??例中的語(yǔ)法來(lái)定義函數(shù)。

，我們也知道調(diào)?這個(gè)函數(shù)?常的簡(jiǎn)單，我們需要做的僅僅是:

復(fù)制代碼代碼如下:

makeArray('one','two');

//=[window,'one','two']

Waitaminute.What'sthatwindow

alert(hodThatDoesntExist);

/

/=undefined

alert(typeofwindow.makeArray);

//=

window.makeArray('one','two');

//=[window,'one','two']

我說(shuō)最普遍的調(diào)??法是不幸的是因?yàn)樗鼘?dǎo)致我們聲明的函數(shù)默認(rèn)是全局的.我們都知道全局成員不是編程的最佳實(shí)踐.這在JavaScript?是特別的正確，在JavaScript中避免使?全局的成員，你是不會(huì)為之后悔的.

JavaScript函數(shù)調(diào)?規(guī)則1

在沒有通過(guò)明確所有者對(duì)象?直接調(diào)?的函數(shù)中，如myFunction()，將導(dǎo)致this的值成為默認(rèn)對(duì)象（瀏覽器中的窗?）。

函數(shù)調(diào)?

讓我們現(xiàn)在創(chuàng)建?個(gè)簡(jiǎn)單的對(duì)象，使?makeArray函數(shù)作為它的?個(gè)?法，我們將使?json的?式來(lái)聲明?個(gè)對(duì)象，我們也來(lái)調(diào)?這個(gè)?法

復(fù)制代碼代碼如下:

//creatingtheobject

vararrayMaker={

品質(zhì)因數(shù)someProperty:'somevaluehere',

make:makeArray

};

//invokethemake()method

arrayMaker.make('one','two');

//=[arrayMaker,'one','two']

//alternativesyntax,usingsquarebrackets

arrayMaker['make']('one','two');

//=[arrayMaker,'one','two']

看到這?的不同了吧,this的值變成了對(duì)象本?.你可能會(huì)疑問(wèn)原始的函數(shù)定義并沒有改變，為何它不是window了呢.好吧，這就是函數(shù)在JSavacript中傳遞的?式，函數(shù)在JavaScript?是?個(gè)標(biāo)準(zhǔn)的數(shù)據(jù)類型，確切的說(shuō)是?個(gè)對(duì)象.你可以傳遞它們或者復(fù)制他們.就好像整個(gè)函數(shù)連帶參數(shù)列表和函數(shù)體都被復(fù)制，且被分配給了arrayMaker?的屬性make，那就好像這樣定義?個(gè)arrayMaker:

復(fù)制代碼代碼如下:

vararrayMaker={

someProperty:'somevaluehere',

make:function(arg1,arg2){

return[this,arg1,arg2];

}

};

JavaScript函數(shù)調(diào)?規(guī)則2

在?個(gè)使??法調(diào)?語(yǔ)法，像Function()或者obj['myFunction']()，這時(shí)this的值為obj

這是事件處理代碼中bug的主要源頭，看看這些例?

復(fù)制代碼代碼如下:

inputtype="button"value="Button1"id="btn1"/

inputtype="button"value="Button2"id="btn2"/

inputtype="button"value="Button3"id="btn3"onclick="buttonClicked();"/

scripttype="text/javascript"

functionbuttonClicked(){

vartext=(this===window)?'window':this.id;

alert(text);

}

varbutton1=ElementById('btn1');

varbutton2=ElementById('btn2');

/script

點(diǎn)擊第?個(gè)按鈕將會(huì)顯?”btn”因?yàn)樗?個(gè)?法調(diào)?,this為所屬的對(duì)象(按鈕元素)點(diǎn)擊第?個(gè)按鈕將顯?”window”因?yàn)閎uttonClicked是被直接調(diào)?的(不像obj.buttonClicked().)這和我們第三個(gè)按鈕，將事件處理函數(shù)直接放在標(biāo)簽?是?樣的.所以點(diǎn)擊第三個(gè)按鈕的結(jié)果是和第?個(gè)?樣的.

使?像jQuery的JS庫(kù)有這樣的優(yōu)點(diǎn)，當(dāng)在jQuery?定義了?個(gè)事件處理函數(shù),JS庫(kù)會(huì)幫助重寫this的值以保證它包含了當(dāng)前事件源元素的引?,

復(fù)制代碼代碼如下:mum

//使?jQuery

$('#btn1').click(function(){

alert(this.id);//jQueryensures'this'willbethebutton

});

jQuery是如何重載this的值的呢?繼續(xù)閱讀

另外兩個(gè):apply()和call()

你越多的使?JavaScript的函數(shù)，你就越多的發(fā)現(xiàn)你需要傳遞函數(shù)并在不同的上下??調(diào)?他們，就像Qjuery在事件處理函數(shù)?所做的?樣，你往往經(jīng)常需要重置this的值.記住我告訴你的，在Javascript中函數(shù)也是對(duì)象，函數(shù)對(duì)象包含?些預(yù)定義的?法，其中有兩個(gè)便是apply()和call()，我們可以使?它們來(lái)對(duì)this進(jìn)?重置.

復(fù)制代碼代碼如下:

vargasGuzzler={year:2023,model:'DodgeBailout'};

makeArray.apply(gasGuzzler,['one','two']);

//=[gasGuzzler,'one','two']

makeArray.call(gasGuzzler,'one','two');

//=[gasGuzzler,'one','two']

這兩個(gè)?法是相似的，不同的是后?的參數(shù)的不同,Function.apply()是使??個(gè)數(shù)組來(lái)傳遞給函數(shù)的,?Function.call()是將這些參數(shù)獨(dú)?傳遞的，在實(shí)踐中你會(huì)發(fā)現(xiàn)apply()在?多數(shù)情況下更?便.

JSavacript函數(shù)調(diào)?規(guī)則3windowsme

如果我們想在不復(fù)制函數(shù)到?個(gè)?法?想重載this的值的時(shí)候，我們可以使?myFunction.apply(obj)或myFunction.call(obj).

構(gòu)造器

我不想深?研究在Javascript中類型的定義，但是在此刻我們需要知道在Javascript中沒有類,?且任何

?個(gè)?定義的類型需要?個(gè)初始化函數(shù)，使?原型對(duì)象(作為初始化函數(shù)的?個(gè)屬性)定義你的類型也是?個(gè)不錯(cuò)的主義，讓我們來(lái)創(chuàng)建?個(gè)簡(jiǎn)單的類型

復(fù)制代碼代碼如下:

//聲明?個(gè)構(gòu)造器

functionArrayMaker(arg1,arg2){

this.someProperty='whatever';

this.theArray=[this,arg1,arg2];

海倫英語(yǔ)}

//聲明實(shí)例化?法

ArrayMtotype={

someMethod:function(){

alert('someMethodcalled');

鏈?zhǔn)椒磻?yīng)

},

getArray:function(){注會(huì)考試科目

returnthis.theArray;

}

};

varam=newArrayMaker('one','two');

varother=newArrayMaker('first','cond');

托福成績(jī)查詢

//=[am,'one','two']

?個(gè)?常重要并值得注意的是出現(xiàn)在函數(shù)調(diào)?前?的new運(yùn)算符，沒有那個(gè)，你的函數(shù)就像全局函數(shù)?樣，且我們創(chuàng)建的那些屬性都將是創(chuàng)建在全局對(duì)象上(window),?你并不想那樣，另?個(gè)話題是，因?yàn)樵谀愕臉?gòu)造器?沒有返回值，所以如果你忘記使?new運(yùn)算符，將導(dǎo)致你的?些變量被賦值為unde

英語(yǔ)詞匯fined.因?yàn)檫@個(gè)原因，構(gòu)造器函數(shù)以?寫字母開頭是?個(gè)好的習(xí)慣，這可以作為?個(gè)提醒，讓你在調(diào)?的時(shí)候不要忘記前?的new運(yùn)算符.

忽略不計(jì)帶著這樣的??，初始化函數(shù)?的代碼和你在其他語(yǔ)??寫的初