JavaScript函數(shù)模式詳解
在javascript中,函數(shù)是一類對象,這表示他可以作為參數(shù)傳遞給其他函數(shù);此外,函數(shù)還可以提供作用域。
js函數(shù)基礎(chǔ)部分:javascript學(xué)習(xí)筆記(四)function函數(shù)部分
創(chuàng)建函數(shù)的語法
命名函數(shù)表達(dá)式
//命名函數(shù)表達(dá)式
var add = function add(a,b){
return a+b;
};
函數(shù)表達(dá)式
//又名匿名函數(shù)
var add = function(a,b){
return a+b;
};
函數(shù)的聲明
function foo(){
//code here
} //這里可以不需要分號
在尾隨的分號中,函數(shù)表達(dá)式應(yīng)總是使用分號,而函數(shù)的聲明中并不需要分號結(jié)尾.
函數(shù)聲明與表達(dá)式
函數(shù)的提升(hoisting)
函數(shù)聲明的行為并不等同于命名函數(shù)表達(dá)式,其區(qū)別在于提升(hoisting)行為,看下面例子:
<script type="text/javascript">
//全局函數(shù)
function foo(){alert("global foo!");}
function bar(){alert('global bar');}
function hoist(){
console.log(typeof foo);//function
console.log(typeof bar);//undefined
foo();//local foo!
bar();//TypeError: 'undefined' is not a function
//變量foo以及實(shí)現(xiàn)者被提升
function foo(){
alert('local foo!');
}
//僅變量bar被提升,函數(shù)實(shí)現(xiàn)部分 并未被提升
var bar = function(){
alert('local bar!');
};
}
hoist();
</script>
對于所有變量,無論在函數(shù)體的何處進(jìn)行聲明,都會(huì)在內(nèi)部被提升到函數(shù)頂部。而對于函數(shù)通用適用,其原因在于函數(shù)只是分配給變量的對象。
提升,顧名思義,就是把下面的東西提到上面。在JS中,就是把定義在后面的東西(變量或函數(shù))提升到前面中定義。 從上面的例子可以看出,在函數(shù)hoist內(nèi)部中的foo和bar移動(dòng)到了頂部,從而覆蓋了全局foo和bar函數(shù)。局部函數(shù)bar和foo的區(qū)別在于,foo被提升到了頂部且能正常運(yùn)行,而bar()的定義并沒有得到提升,僅有它的聲明被提升,所以,當(dāng)執(zhí)行bar()的時(shí)候顯示結(jié)果為undefined而不是作為函數(shù)來使用。
即時(shí)函數(shù)模式
函數(shù)也是對象,因此它們可以作為返回值。使用自執(zhí)行函數(shù)的好處是直接聲明一個(gè)匿名函數(shù),立即使用,省得定義一個(gè)用一次就不用的函數(shù),而且免了命名沖突的問題,js中沒有命名空間的概念,因此很容易發(fā)生函數(shù)名字沖突,一旦命名沖突以最后聲明的為準(zhǔn)。
模式一:
<script>
(function () {
var a = 1;
return function () {
alert(2);
};
}()());//彈出2,第一個(gè)圓括號自執(zhí)行,第二個(gè)圓括號執(zhí)行內(nèi)部匿名函數(shù)
</script>
模式二:自執(zhí)行函數(shù)變量的指向
<script type="text/javascript">
var result = (function () {
return 2;
})();//這里已執(zhí)行了函數(shù)
alert(result);//result 指向了由自執(zhí)行函數(shù)的返回值2;如果彈出result()會(huì)出錯(cuò)
</script>
模式三:嵌套函數(shù)
<script type="text/javascript">
var result = (function () {
return function () {
return 2;
};
})();
alert(result());//alert(result)的時(shí)候彈出2;alert(result())的時(shí)候彈出function(){return 2}
</script>
模式四:自執(zhí)行函數(shù)把它的返回值賦給變量
var abc = (function () {
var a = 1;
return function () {
return ++a;
}
})();//自執(zhí)行函數(shù)把return后面的函數(shù)返回給變量
alert(abc());//如果是alert(abc)就會(huì)彈出return語句后面的代碼;如果是abc(),則會(huì)執(zhí)行return后面的函數(shù)
模式五:函數(shù)內(nèi)部執(zhí)行自身,遞歸
// 這是一個(gè)自執(zhí)行的函數(shù),函數(shù)內(nèi)部執(zhí)行自身,遞歸
function abc() { abc(); }
回調(diào)模式
回調(diào)函數(shù):當(dāng)你將一個(gè)函數(shù)write()作為一個(gè)參數(shù)傳遞給另一個(gè)函數(shù)call()時(shí),那么在某一時(shí)刻call()可能會(huì)執(zhí)行(或者調(diào)用)write()。這種情況下,write()就叫做回調(diào)函數(shù)(callback function)。
異步事件監(jiān)聽器
回調(diào)模式有許多用途,比如,當(dāng)附加一個(gè)事件監(jiān)聽器到頁面上的一個(gè)元素時(shí),實(shí)際上是提供了一個(gè)回調(diào)函數(shù)的指針,該函數(shù)將會(huì)在事件發(fā)生時(shí)被調(diào)用。如:
document.addEventListener("click",console.log,false);
上面代碼示例展示了文檔單擊事件時(shí)以冒泡模式傳遞給回調(diào)函數(shù)console.log()的
javascript特別適用于事件驅(qū)動(dòng)編程,因?yàn)榛卣{(diào)模式支持程序以異步方式運(yùn)行。
超時(shí)
使用回調(diào)模式的另一個(gè)例子是,當(dāng)使用瀏覽器的window對象所提供的超時(shí)方法:setTimeout()和setInterval(),如:
<script type="text/javascript">
var call = function(){
console.log("100ms will be asked…");
};
setTimeout(call, 100);
</script>
庫中的回調(diào)模式
當(dāng)設(shè)計(jì)一個(gè)js庫時(shí),回調(diào)函數(shù)將派上用場,一個(gè)庫的代碼應(yīng)盡可能地使用可復(fù)用的代碼,而回調(diào)可以幫助實(shí)現(xiàn)這種通用化。當(dāng)我們設(shè)計(jì)一個(gè)龐大的js庫時(shí),事實(shí)上,用戶并不會(huì)需要其中的大部分功能,而我們可以專注于核心功能并提供“掛鉤形式”的回調(diào)函數(shù),這將使我們更容易地構(gòu)建、擴(kuò)展,以及自定義庫方法
Curry化
Curry化技術(shù)是一種通過把多個(gè)參數(shù)填充到函數(shù)體中,實(shí)現(xiàn)將函數(shù)轉(zhuǎn)換為一個(gè)新的經(jīng)過簡化的(使之接受的參數(shù)更少)函數(shù)的技術(shù)?!揪↗avaScript】
簡單來說,Curry化就是一個(gè)轉(zhuǎn)換過程,即我們執(zhí)行函數(shù)轉(zhuǎn)換的過程。如下例子:
<script type="text/javascript">
//curry化的add()函數(shù)
function add(x,y){
var oldx = x, oldy = y;
if(typeof oldy == "undefined"){
return function(newy){
return oldx + newy;
};
}
//完全應(yīng)用
return x+y;
}
//測試
typeof add(5);//輸出"function"
add(3)(4);//7
//創(chuàng)建并存儲(chǔ)一個(gè)新函數(shù)
var add2000 = add(2000);
add2000(10);//輸出2010
</script>
當(dāng)?shù)谝淮握{(diào)用add()時(shí),它為返回的內(nèi)部函數(shù)創(chuàng)建了一個(gè)閉包。該閉包將原始的x和y值存儲(chǔ)到私有變量oldx和oldy中。
現(xiàn)在,我們將可使用任意函數(shù)curry的通用方法,如:
<script type="text/javascript">
//普通函數(shù)
function add(x,y){
return x + y;
}
//將一個(gè)函數(shù)curry化以獲得一個(gè)新的函數(shù)
var newadd = test(add,5);
newadd(4);//9
//另一種選擇,直接調(diào)用新函數(shù)
test(add,6)(7);//輸出13
</script>
何時(shí)使用Curry化
當(dāng)發(fā)現(xiàn)正在調(diào)用同一個(gè)函數(shù)時(shí),并且傳遞的參數(shù)絕大多數(shù)都是相同的,那么該函數(shù)可能是用于Curry化的一個(gè)很好的候選參數(shù)
- js面向?qū)ο笾R妱?chuàng)建對象的幾種方式(工廠模式、構(gòu)造函數(shù)模式、原型模式)
- javascript組合使用構(gòu)造函數(shù)模式和原型模式實(shí)例
- 深入理解JavaScript系列(26):設(shè)計(jì)模式之構(gòu)造函數(shù)模式詳解
- JavaScript中的函數(shù)模式詳解
- JS面向?qū)ο蠡A(chǔ)講解(工廠模式、構(gòu)造函數(shù)模式、原型模式、混合模式、動(dòng)態(tài)原型模式)
- JavaScript面向?qū)ο笤O(shè)計(jì)二 構(gòu)造函數(shù)模式
- JavaScript 函數(shù)模式詳解及示例
相關(guān)文章
JavaScript基礎(chǔ)之Array?forEach使用示例
這篇文章主要為大家介紹了JavaScript基礎(chǔ)之Array?forEach使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12JavaScript indexOf方法入門實(shí)例(計(jì)算指定字符在字符串中首次出現(xiàn)的位置)
這篇文章主要介紹了JavaScript indexOf方法入門實(shí)例,indexOf方法用于計(jì)算指定字符在字符串中首次出現(xiàn)的位置,需要的朋友可以參考下2014-10-10javascript indexOf方法、lastIndexOf 方法和substring 方法
indexOf() 方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置。2009-03-03JavaScript 鍵盤event.keyCode值列表大全
event.keyCode值列表大全,對于需要根據(jù)鍵盤按鍵觸發(fā)相應(yīng)事件的朋友需要。2010-08-08