DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> JavaScript 函數模式詳解及示例
JavaScript 函數模式詳解及示例
編輯:JavaScript基礎知識     

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

在javascript中,函數是一類對象,這表示他可以作為參數傳遞給其他函數;此外,函數還可以提供作用域。

創建函數的語法

命名函數表達式

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

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

可見,他們引用的是同一函數,但這只在函數體內有效。

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

但是,你不能通過調用bar()來調用該函數。

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

函數表達式

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

為變量 add 賦的值是函數定義本身。這樣,add 就成了一個函數,可以在任何地方調用。

函數的聲明

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

在尾隨的分號中,函數表達式應總是使用分號,而函數的聲明中並不需要分號結尾。

聲明式函數與函數表達式的區別在於:在JS的預編譯期,聲明式函數將會先被提取出來,然後才按順序執行js代碼:

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

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

由於聲明函數都會在全局作用域構造時候完成,因此聲明函數都是window對象的屬性,這就說明為什麼我們不管在哪裡聲明函數,聲明函數最終都是屬於window對象的原因了。

在javascript語言裡任何匿名函數都是屬於window對象。在定義匿名函數時候它會返回自己的內存地址,如果此時有個變量接收了這個內存地址,那麼匿名函數就能在程序裡被使用了,因為匿名函數也是在全局執行環境構造時候定義和賦值,所以匿名函數的this指向也是window對象

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

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

函數聲明與表達式

函數的提升(hoisting)

函數聲明的行為並不等同於命名函數表達式,其區別在於提升(hoisting)行為,看下面例子:

<script type="text/javascript">
 //全局函數
 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以及實現者被提升
  function foo(){
   alert('local foo!');
  }

  //僅變量bar被提升,函數實現部分 並未被提升
  var bar = function(){
   alert('local bar!');
  };
 }
 hoist(); 
</script>

對於所有變量,無論在函數體的何處進行聲明,都會在內部被提升到函數頂部。而對於函數通用適用,其原因在於函數只是分配給變量的對象。

提升,顧名思義,就是把下面的東西提到上面。在JS中,就是把定義在後面的東西(變量或函數)提升到前面中定義。 從上面的例子可以看出,在函數hoist內部中的foo和bar移動到了頂部,從而覆蓋了全局foo和bar函數。局部函數bar和foo的區別在於,foo被提升到了頂部且能正常運行,而bar()的定義並沒有得到提升,僅有它的聲明被提升,所以,當執行bar()的時候顯示結果為undefined而不是作為函數來使用。

即時函數模式

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

模式一:

<script>
 (function () {
  var a = 1;
  return function () {
   alert(2);
  };
 }()());//彈出2,第一個圓括號自執行,第二個圓括號執行內部匿名函數
</script>

模式二:自執行函數變量的指向

<script type="text/javascript">
  var result = (function () {
   return 2;
  })();//這裡已執行了函數

  alert(result);//result 指向了由自執行函數的返回值2;如果彈出result()會出錯
</script>

模式三:嵌套函數

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

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

模式四:自執行函數把它的返回值賦給變量

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

模式五:函數內部執行自身,遞歸

// 這是一個自執行的函數,函數內部執行自身,遞歸
function abc() { abc(); }

回調模式

回調函數:當你將一個函數write()作為一個參數傳遞給另一個函數call()時,那麼在某一時刻call()可能會執行(或者調用)write()。這種情況下,write()就叫做回調函數(callback function)。

異步事件監聽器

回調模式有許多用途,比如,當附加一個事件監聽器到頁面上的一個元素時,實際上是提供了一個回調函數的指針,該函數將會在事件發生時被調用。如:

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

javascript特別適用於事件驅動編程,因為回調模式支持程序以異步方式運行。

超時

使用回調模式的另一個例子是,當使用浏覽器的window對象所提供的超時方法:setTimeout()和setInterval(),如:

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

庫中的回調模式

當設計一個js庫時,回調函數將派上用場,一個庫的代碼應盡可能地使用可復用的代碼,而回調可以幫助實現這種通用化。當我們設計一個龐大的js庫時,事實上,用戶並不會需要其中的大部分功能,而我們可以專注於核心功能並提供“掛鉤形式”的回調函數,這將使我們更容易地構建、擴展,以及自定義庫方法

Curry化

Curry化技術是一種通過把多個參數填充到函數體中,實現將函數轉換為一個新的經過簡化的(使之接受的參數更少)函數的技術。———【精通JavaScript】

簡單來說,Curry化就是一個轉換過程,即我們執行函數轉換的過程。如下例子:

<script type="text/javascript">
 //curry化的add()函數
 function add(x,y){
  var oldx = x, oldy = y;
  if(typeof oldy == "undefined"){
   return function(newy){
    return oldx + newy;
   };
  }
  //完全應用
  return x+y;
 }
 //測試
 typeof add(5);//輸出"function"
 add(3)(4);//7
 //創建並存儲一個新函數
 var add2000 = add(2000);
 add2000(10);//輸出2010
</script>

當第一次調用add()時,它為返回的內部函數創建了一個閉包。該閉包將原始的x和y值存儲到私有變量oldx和oldy中。

現在,我們將可使用任意函數curry的通用方法,如:

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

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

何時使用Curry化

當發現正在調用同一個函數時,並且傳遞的參數絕大多數都是相同的,那麼該函數可能是用於Curry化的一個很好的候選參數

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved