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

第三章：實字與建構式

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

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 相關筆記：