JavaScript設(shè)計模式的作用是提高代碼的重用性，可讀性，使代碼更容易的維護和擴展

在javascript中，函數(shù)是一類對象，這表示他可以作為參數(shù)傳遞給其他函數(shù)；此外，函數(shù)還可以提供作用域。

創(chuàng)建函數(shù)的語法

命名函數(shù)表達式

//命名函數(shù)表達式
var add = function add(a,b){
 return a+b;
};

var foo = function bar() {
 console.log(foo === bar);
};
foo();//true

可見，他們引用的是同一函數(shù)，但這只在函數(shù)體內(nèi)有效。

var foo = function bar() {};
console.log(foo === bar);//ReferenceError: bar is not defined

但是，你不能通過調(diào)用bar()來調(diào)用該函數(shù)。

var foo = (function bar() {
 console.log(foo === bar);
})();//false

函數(shù)表達式

//又名匿名函數(shù)
var add = function(a,b){
 return a+b;
};

為變量 add 賦的值是函數(shù)定義本身。這樣，add 就成了一個函數(shù)，可以在任何地方調(diào)用。

函數(shù)的聲明

function foo(){
 //code here
} //這里可以不需要分號

在尾隨的分號中，函數(shù)表達式應(yīng)總是使用分號，而函數(shù)的聲明中并不需要分號結(jié)尾。

聲明式函數(shù)與函數(shù)表達式的區(qū)別在于：在JS的預(yù)編譯期，聲明式函數(shù)將會先被提取出來，然后才按順序執(zhí)行js代碼：

console.log(f1);//[Function: f1]
console.log(f2);//undefined，Javascript并非完全的按順序解釋執(zhí)行，而是在解釋之前會對Javascript進行一次“預(yù)編譯”，在預(yù)編譯的過程中，會把定義式的函數(shù)優(yōu)先執(zhí)行

function f1(){
 console.log("I am f1");
}
var f2 = function (){
 console.log("I am f2");
};

由于聲明函數(shù)都會在全局作用域構(gòu)造時候完成，因此聲明函數(shù)都是window對象的屬性，這就說明為什么我們不管在哪里聲明函數(shù)，聲明函數(shù)最終都是屬于window對象的原因了。

在javascript語言里任何匿名函數(shù)都是屬于window對象。在定義匿名函數(shù)時候它會返回自己的內(nèi)存地址，如果此時有個變量接收了這個內(nèi)存地址，那么匿名函數(shù)就能在程序里被使用了，因為匿名函數(shù)也是在全局執(zhí)行環(huán)境構(gòu)造時候定義和賦值，所以匿名函數(shù)的this指向也是window對象

var f2 = function (){
 console.log("I am f2");
};
console.log(f2());//I am f2

(function(){
 console.log(this === window);//true
})();

函數(shù)聲明與表達式

函數(shù)的提升（hoisting）

函數(shù)聲明的行為并不等同于命名函數(shù)表達式，其區(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以及實現(xiàn)者被提升
  function foo(){
   alert('local foo!');
  }

  //僅變量bar被提升，函數(shù)實現(xiàn)部分 并未被提升
  var bar = function(){
   alert('local bar!');
  };
 }
 hoist(); 
</script>

對于所有變量，無論在函數(shù)體的何處進行聲明，都會在內(nèi)部被提升到函數(shù)頂部。而對于函數(shù)通用適用，其原因在于函數(shù)只是分配給變量的對象。

提升，顧名思義，就是把下面的東西提到上面。在JS中，就是把定義在后面的東西（變量或函數(shù)）提升到前面中定義。 從上面的例子可以看出，在函數(shù)hoist內(nèi)部中的foo和bar移動到了頂部，從而覆蓋了全局foo和bar函數(shù)。局部函數(shù)bar和foo的區(qū)別在于，foo被提升到了頂部且能正常運行，而bar()的定義并沒有得到提升，僅有它的聲明被提升，所以，當執(zhí)行bar()的時候顯示結(jié)果為undefined而不是作為函數(shù)來使用。

即時函數(shù)模式

函數(shù)也是對象，因此它們可以作為返回值。使用自執(zhí)行函數(shù)的好處是直接聲明一個匿名函數(shù)，立即使用，省得定義一個用一次就不用的函數(shù)，而且免了命名沖突的問題，js中沒有命名空間的概念，因此很容易發(fā)生函數(shù)名字沖突，一旦命名沖突以最后聲明的為準。

模式一：

<script>
 (function () {
  var a = 1;
  return function () {
   alert(2);
  };
 }()());//彈出2，第一個圓括號自執(zhí)行，第二個圓括號執(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()會出錯
</script>

模式三：嵌套函數(shù)

<script type="text/javascript">
  var result = (function () {
   return function () {
    return 2;
   };
  })();

 alert(result());//alert(result)的時候彈出function(){return 2}
</script>

模式四：自執(zhí)行函數(shù)把它的返回值賦給變量

var abc = (function () {
   var a = 1;
   return function () {
    return ++a;
   }
  })();//自執(zhí)行函數(shù)把return后面的函數(shù)返回給變量
 alert(abc());//如果是alert(abc)就會彈出return語句后面的代碼；如果是abc(),則會執(zhí)行return后面的函數(shù)

模式五：函數(shù)內(nèi)部執(zhí)行自身，遞歸

// 這是一個自執(zhí)行的函數(shù)，函數(shù)內(nèi)部執(zhí)行自身，遞歸
function abc() { abc(); }

回調(diào)模式

回調(diào)函數(shù)：當你將一個函數(shù)write()作為一個參數(shù)傳遞給另一個函數(shù)call()時，那么在某一時刻call()可能會執(zhí)行（或者調(diào)用）write()。這種情況下，write()就叫做回調(diào)函數(shù)（callback function）。

異步事件監(jiān)聽器

回調(diào)模式有許多用途，比如，當附加一個事件監(jiān)聽器到頁面上的一個元素時，實際上是提供了一個回調(diào)函數(shù)的指針，該函數(shù)將會在事件發(fā)生時被調(diào)用。如：

document.addEventListener("click",console.log,false);
上面代碼示例展示了文檔單擊事件時以冒泡模式傳遞給回調(diào)函數(shù)console.log()的

javascript特別適用于事件驅(qū)動編程，因為回調(diào)模式支持程序以異步方式運行。

超時

使用回調(diào)模式的另一個例子是，當使用瀏覽器的window對象所提供的超時方法：setTimeout()和setInterval()，如：

<script type="text/javascript">
 var call = function(){
  console.log("100ms will be asked…");
 };
 setTimeout(call, 100);
</script>

庫中的回調(diào)模式

當設(shè)計一個js庫時，回調(diào)函數(shù)將派上用場，一個庫的代碼應(yīng)盡可能地使用可復用的代碼，而回調(diào)可以幫助實現(xiàn)這種通用化。當我們設(shè)計一個龐大的js庫時，事實上，用戶并不會需要其中的大部分功能，而我們可以專注于核心功能并提供“掛鉤形式”的回調(diào)函數(shù)，這將使我們更容易地構(gòu)建、擴展，以及自定義庫方法

Curry化

Curry化技術(shù)是一種通過把多個參數(shù)填充到函數(shù)體中，實現(xiàn)將函數(shù)轉(zhuǎn)換為一個新的經(jīng)過簡化的（使之接受的參數(shù)更少）函數(shù)的技術(shù)。———【精通JavaScript】

簡單來說，Curry化就是一個轉(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)建并存儲一個新函數(shù)
 var add2000 = add(2000);
 add2000(10);//輸出2010
</script>

當?shù)谝淮握{(diào)用add()時，它為返回的內(nèi)部函數(shù)創(chuàng)建了一個閉包。該閉包將原始的x和y值存儲到私有變量oldx和oldy中。

現(xiàn)在，我們將可使用任意函數(shù)curry的通用方法，如：

<script type="text/javascript">
 //普通函數(shù)
 function add(x,y){
  return x + y;
 }
 //將一個函數(shù)curry化以獲得一個新的函數(shù)
 var newadd = test(add,5);
 newadd(4);//9

 //另一種選擇，直接調(diào)用新函數(shù)
 test(add,6)(7);//輸出13
</script>

何時使用Curry化

當發(fā)現(xiàn)正在調(diào)用同一個函數(shù)時，并且傳遞的參數(shù)絕大多數(shù)都是相同的，那么該函數(shù)可能是用于Curry化的一個很好的候選參數(shù)

最新評論