匿名函式(Anonymous Function)

「我寫過很多javascript了，也用過很多jQuery的plugin，也有套用過一些framework，來做到一些看起來很炫的特效，對於前端工程，我還欠缺什麼呢？」除了經驗，你需要知道一些方法與技巧，來將這些技巧應用在你的實做上。有一件事情你必須意識到，複雜的前端工程，絕對不是你一個人能夠完成，而是共同合作出來的，因此如何共同開發，如何讓人看懂自己的程式，成了更重要的課題。常常看到很多網站做出很絢麗的特效，但看了一下程式碼，一看就覺得是為求目的而湊出來的程式，做出效果，但往後也無法維護了。一個無法維護的網站，註定會被淘汰的。接下來分享在這條路上走過的經驗，並在此做個紀錄。

##Anonymous Function
匿名函式的應用範圍非常的廣，並且也是javascript的特性之一。使用匿名函式，除了可以將你的函式包起來，避免其他變數的影響。也避免暴露你的程式，讓其他程式任意存取。

1
2
3

(function(){
	//this is a scope
})()

上述是最基本的匿名函式的例子，你可以利用這種方式將你的程式全部包起來，接下來考考各位一個小問題。

1
2
3
4

(function(){
	//this is a scope
	this.a = 'a';
})()

OK，這個例子宣告了一個a屬性，指派到this，這是什麼意思？該如何存取他？在這裡this指向window, 也因此你只要呼叫他即可，例如：

1
2

alert(a); // a
alert(window.a); // a

因此，你可以只將你要public的function or variable，即可避免變數污染，或是function被call來call去到最後很難debug。

##接下來再看一點進階的用法。

1
2
3
4
5
6
7

(function(win){
    //this is a scope
    this.a = 'a';
    win.b = 'b'
})(window)
alert(a);// a
alert(b);// b

是的，你可以將變數或物件當作參數傳入，可以擴充物件，這就是最基本的擴充物件的方法。接下來我們來直接看一個實際的範例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var box = {
    long: 20,
    wide: 30,
    high: 40
};
//get area
(function(box){
    box.area = box.long*box.wide;
})(box);
console.log(box.area); //600
//get volume
(function(box){
    box.volume = box.long*box.wide*box.high;
})(box);
console.log(box.volume); //24000

首先宣告一個box，接著計算他的area與volume，利用匿名函式的特性來將計算與邏輯包裝起來，這種實做方式非常常用到，也可以很容易的共同開發組件。

下集–繼承(待續)