JavaScript 函式筆記

喔要做法令易讀器於是翻了JavaScript的文章，筆記一些如下：

可省略的參數

1
2
3
4
5
6
function abridgable(param1, param2) {
    if(typeof param2 == "undefined")
        param2 = "default value";
    return param1 + param2;
}
alert(abridgable("haha "));

變動引數數量

1
2
3
4
5
6
7
8
9
10
11
function foo() {
    switch(arguments.length) {
    case 0: console.log("There is no arguments."); return;
    case 1: console.log("There's only one argument."); break;
    default: console.log(arguments.length + " arguments.");
    }
    var arg0 = arguments[0];
    console.log("The first argument is: " + arg0);
    /// 跟C系列的char *argv[0]不同，
    /// 第零個並不是程式／函數名稱，而是函數的第一個引數
}

把匿名函數指派給變數

1
2
3
4
anony = function() {
    /// 相當於 function anony() { /* */ }
    /// 這只是函數的宣告，並不會執行
}

直接執行匿名參數

1
2
3
4
result = (function() {
    /// 相當於「宣告後馬上執行」
    /// 因為是匿名，不用擔心函數名稱跟別人相同
})();

匿名函數的其他寫法

易混淆，不建議使用

1
2
3
4
5
6
(function() {
    /// 這個寫法「一定」要加最外面的小括號
}());
result = function(){
    /// 或是一定得將執行結果馬上也丟給別的變數或函數
}();

用匿名函數回傳函數

1
2
3
4
5
6
7
8
9
var arr = Array();
for(var i = 0; i < 10; ++i) {
    arr[i] = function() {
        var tmp = i; /// 指派後，tmp對於arr[x]即是固定的
        return function() {
            return tmp; /// 即使i變動了，tmp也不會變動
        }
    }();
}

若是直接return i; 那麼之後arr3也只會得到10（即最後的i的值）

覆寫既存函數

以覆寫onLoad事件為例

1
2
3
4
5
6
if(window.onload) old_onload = window.onload;
else old_onload = function(){};
window.onload = function() {
    old_onload();
    alert("頁面讀取完畢");
}

用匿名函數覆寫既存函數

幫parseInt()加上基本的中文對照

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
parseInt = function() {
    var orig = parseInt;
    /// 區域變數不會真的消失，只是外部無法存取
    var chinese = "零一二三四五六七八九";
    return function() {
        var result = orig.apply(this, arguments);
        if(!isNaN(result)) return result;
        var str = arguments[0].replace(/\s/g, "");
        for(var i = 0; i < 10; ++i) {
            var re = new RegExp(chinese.charAt(i), "g");
            str = str.replace(re, String(i));
        }
        return orig(str, 10);
    }
}(); /// 注意是「用匿名函數回傳函數」的方式
alert(parseInt("七五三三九六七"));

用JSON宣告物件

1
2
3
4
5
6
7
8
9
10
11
12
13
objA = {
    /// 在「只需要一個這樣的物件」時很好用
    var1: "public member variable",
    var2: "you can see it as attribute",
    func1: function() {
        /// member function
    },
    func2: function() {
        /// member function
    }
};
objA.var1 = "other value";
objA.func1(); /// 執行物件的成員函數

用匿名函數來回傳物件

1
2
3
4
5
6
7
8
9
objB = function() {
    alert("objB");
    return { /// 同樣用JSON宣告物件
        var1: "public",
        func1: function() {
            alert("member function");
        }
    };
}(); /// 即「宣告後馬上執行」

不想用匿名函數的話當然也可以

1
2
3
4
5
6
7
8
9
10
11
ClassB = function() { /// 想像成這就是建構子
    alert("constructor");
    return {
        var1: "public",
        func1: function() {
            alert("not constructor");
        }
    }
}
insB = ClassB();
insB2 = ClassB(); /// 也就方便宣告兩個以上相同結構的物件

以上應該夠用了，不過如果想要更多的話：

支援私有成員的物件

以「計數器」為例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function ClassC() {
    var counter = 0; /// 私有變數，外部不能使用
    var logger = function() { /// 私有函數，外部不能呼叫
        console.log(counter);
    }
    return { /// 依舊回傳JSON
        name: "name",
        inc: function() {
            ++counter;    /// 公開函數可以存取私有變數
            logger(); /// 公開函數可以呼叫私有函數
            return counter;
        }
    }
}
insC = ClassC();
alert(insC.inc()); /// 相當於 alert(1);
insC.counter; /// undefined
insC.logger; /// undefined
insC.logger(); /// TypeError: Object has no method 'abc'

insC.logger = "lalala"; /// 這樣不會出錯
insC.inc(); /// 即使inc()所呼叫的logger()看似已被複寫，這樣也依舊可以執行

以上依舊可以用匿名函數的方式寫

1
2
3
4
5
6
7
8
9
10
11
12
13
objC = function () {
    var counter = 0;
    var logger = function() {console.log(counter);}
    return {
        name: "name",
        inc: function() {
            ++counter;
            logger();
            return counter;
        }
    }
}();
alert(objC.inc()); /// 相當於 alert(1);

用new宣告

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function ClassD() {
    var privateVar = "private";
    this.weirdVar = "weirdo"; /// 詳候述

    globalVar = "global";  /// 單純複習一下
    globalFunc = function() {
        /// 全域函數
    }

    this.weirdFunc = function() {
        /// 詳候述
    }
    var privateFunc1 = function() {
        /// 私有成員函數
    }
    function privateFunc2() {
        /// 私有成員函數（不是全域喔）
    }
}
objD = ClassD(); /// objD會undefined，weirdVar 和 weirdFunc 是全域變數／函數
insD = new ClassD; /// weirdVar 和 weirdFunc 是類別的公開成員
insD2 = new ClassD(); /// 與上同

前述宣告方式如果有回傳值時，要特別小心

1
2
3
4
5
6
7
8
9
function ClassE() {
    var privateVar = "private";
    var privateFunc = function() { return "pFunc"; }
    this.weirdVar = "weirdo";
    this.weirdFunc = function() { return "wFunc"; }
    return returnValue;
}
e1 = ClassE();
e2 = new ClassE();
  • 如果 returnValue 是函數、陣列、物件（null除外），那麼：
    • e1 與 e2 均等同 returnValue
    • weirdVar 和 weirdFunc 是全域
    • 如果是物件，即同於前述 ClassC 的用法，可在 returnValue 中存取 privateVar 和 privateFunc
  • 如果 returnValue 是數字（含NaN）、布林、字串、null、未定義（即直接return;），那麼：
    • e1 是 returnValue，weirdVar 和 weirdFunc 消失無蹤
    • e2 是物件，weirdVar 和 weirdFunc 是公開成員

用 prototype

如果需要擴充既存實體，或是繼承其他類別，則需要此。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function ClassF(){
    alert("constructor"); /// 可以沒有內容，但是必須宣告為function
}
ClassF.prototype = {
    var1: "public member variable",
    var2: "you can see it as attribute",
    func1: function() {
        /// member function
    },
    func2: function() {
        /// member function
    }
}
insF = new ClassF();
ClassF.prototype.addedFunc = function() {
    alert("new function");
}
insF.addedFunc(); /// 即使 insF 早於 addedFunc 宣告，前者仍可順利使用後者

prototype 的應用範例

1
2
String.prototype.alert=function() { alert(this); }
"application".alert();

Getter & Setter

例如Array元件的length表現的像個public member variable，但其實是個getter，不能直接覆寫。

1
2
3
4
5
6
7
8
9
10
11
function Field(val){
    var value = val;

    this.__defineGetter__("value", function(){
        return value;
    });

    this.__defineSetter__("value", function(val){
        value = val;
    });
}

參考資料