2012年11月8日

Javascript 設計模式(筆記)__(2) 函式

A+
第三章:實字與建構式

建立各種物件比較有效率的方式──

1. 物件

// 舊的方式
var car = new Object();
car.color = "blue";
car.wheels = 4;

// 新的方式
var car = {
color: "blue",
wheels: 4
};


2. 陣列

// 舊的方式
var brand = new Array("BMW", "HONDA", "CIVIC");

// 新的方式
var brand = ["BMW", "HONDA", "CIVIC"];


3. 正規表示式

假設建立一個符合反斜線 "\" 的例子──

// 舊的方式
var re = new RegExp("\\\\", "gm");

// 新的方式
var re = /\\/gm;


第四章:函式

一、函式的型態

1. 定義:

// A. 具名函式表示式
var abc = function abc(x,y) {// code};

// B. 不具名函式表示式
var abc = function (x,y) {// code};

// C. 函式宣告式
function abc(x,y) {// code};


2. 三者差別:

(1) 函數會自動擁有 name 的屬性,A 與 C 會給予 name 屬性 "abc" 的值,B 為不具名函式所以 name 沒有值。當執行 alert(abc.name) 時,A 與 C 會彈出 "abc",而 B 會彈出空字串。

(2) C 的真實位置會被自動移到最前面,例如以下的 code,def 函式還未宣告就能執行,abc 函式是無法執行的。

alert(typeof abc); // 顯示 "undefined"
alert(typeof def); // 顯示 "function"
def(); // 顯示 2
abc(); // 無法執行
var abc = function () {alert(1);};
function def() {alert(2);}


(3) 函式可當作參數,傳遞給其他函式,在適當時機才執行,稱為 callback 模式。常見的範例為 setTimeout,例如設定一秒後執行某個函式──

// 有名稱(name)的函式可直接把 name 當參數
var abc = function () {alert(1);};
setTimeout(abc, 1000);

// 無名稱的(匿名)函式可直接當參數傳遞
setTimeout(function() {
alert(1);
}, 1000);

// 這是錯誤方式,把 name 加上 () 當參數傳遞會立刻執行,而非一秒後執行
setTimeout(abc(), 1000);


二、回傳函式

函式常常用來回傳(return)數值、字串、陣列等,但函式也可回傳特定的函式內容。

// 例(1)
var a = function () {
alert(1);
return function () { alert(2);};
};
var b = a(); // 顯示 1 後,把另外定義的函式內容傳給 b。
b(); // 顯示 2


// 例(2) 回傳函式可儲存其他程式碼無法讀取的資料
var secret = function () {
return function () {
var pw = 1234; // 放在這裡的 pw 很安全,外部程式碼無法呼叫
alert(pw);
};
};

var tellMePw = secret(); // 只能經由 secret 這個函式才能──
tellMePw(); // 顯示 pw 為 1234


三、自我定義的函式

如果函式大部分內容只執行一次,只有小部分需要重複使用,可利用函式自我重新定義的方式,來減少函式的內容,同時也可大大減少記憶體的使用。例如──

var a = function () {
alert(1);
// 其他很多 code
a = function () { alert(2);};
};
a(); // 第一次顯示 1,以及其他 code。
a(); // 第二次以後執行 a() 只會顯示 2


用起來的結果跟「二、回傳函式」例(1) 很像,但微妙的差別是,上個例子若是不斷執行 a(),永遠只會顯示 1,可自行體驗一下,因此本例的寫法才能真正把函式重新定義。


四、立即函式

定義後立即執行的函式,只會使用一次,最重要的用處是 "減少全域變數的使用"。其實這個模式的本質就是函式表示式(無論具名或不具名),只是少了 "var 名稱" 的動作並 "立即執行" 而已。


這個模式還滿常看見、也常常使用,因此不另做筆記,需要詳解可參考這個討論串:「」。

第四章內容較長,故分成兩篇以利閱讀。


Javascript 相關筆記:

沒有留言:

↑TOP

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。