JavaScript 物件(OO)寫法基本介紹。

FishFactory Paradigm

下面的寫法讓你做出一個Fish的物件。

var Fish= new Object;  

Fish.color = 'red';  

Fish.size = 4;  

Fish.type= '淡水';  

Fish.showColor = function() {  
     alert(this.color);  
};  

但可能你需要的產生很多 Fish 物件，這種方式只能一個個寫他的屬性跟方法，那是一件非常可怕的事情。

現在把他修改一下，把他包起來，讓他比較像我們在C++或JAVA的樣子。

function createCar() {

var Fish= new Object;

Fish.color = 'red';

Fish.size= 4;

Fish.type = '淡水';  

Fish.showColor = function() {
    alert(this.color);
};

return Fish;

};

var Fish1= createCar();
var Fish2 = createCar();                   

可是這樣還是一樣Fish1跟Fish2 完全一樣，並沒有太大的幫助。還是要寫好多個。

這樣是有一點物件導向的味道了，但是我們如果不用 new 這個關鍵字，感覺缺乏了 Semantic 的意義。

Constructor paradigm

如前述的問題，我們改寫一下，讓 Fish函式成為一個建構式，可以很方便地用一個 new 的關鍵字製造出許多的 Objects

function Fish(iColor,iSize,iType) {

this.color = iColor;

this.Size = iSize;

this.Type = iType;

this.showColor = function() {

alert(這條的魚的顏色是 ' + this.color);

};

};

var Fish1 = new Fish('red', 4, '淡水');

var Fish2 = new Fish('blue', 3, '海水');

Fish1.show();

這樣有沒有就比較接近JAVA或C++的物件格式了，上述的程式碼會跳出Alert 這條的魚的顏色是red。

上述的寫法是目前最容易看到的寫法之一，也是一般網路上最常見的寫法。

Hybrid Constructor / Prototype Paradigm

上述的寫法是目前最容易看到的寫法之一。但是有些人會考量到效能面，如 showColor() 這個方法，每次 instantiate 時，裡面所有的屬性與方法都會被複製一份。其實我們可以讓這個方法只產生一次、而且被共用。但是並不是所有狀況都適用。

function Fish(iColor,iSize,iType) {

this.color = iColor;

this.Size = iSize;

this.Type = iType;

this.showColor = function() {

alert(這條的魚的顏色是 ' + this.color);

};

};

Fish.prototype.showColor = function() {

alert(這條的魚的顏色是 ' + this.color);

};

var Fish1 = new Fish('red', 4, '淡水');

var Fish2 = new Fish('blue', 3, '海水');

Fish1.show();

雖然這樣的效能比較好，但原則上我個人是比較喜歡包裝在一個 constructor 內，在撰寫期間比較容易觀看，但是要看程適應用的層面。

Prototype paradigm

眼尖的人會看到 Hybrid 這個字，所以我還是介紹一下 Prototype 的寫法

//先有一個空的 function  
function Fish() {  

};  

//再利用 prototype 的方式幫這個 Car() 新增屬性及方法  

Fish.prototype.color = 'red';  

Fish.prototype.doors = 4;  

Fish.prototype.mpg = 23;  

Fish.prototype.showColor = function() {  
    alert(這隻魚顏色是 ' + this.color); 
};   

//無法用參數...   

var Fish1 = new Fish();   

var Fish2 = new Fish(); 

這種寫法有一個很討厭的缺點，就是沒辦法利用參數設定屬性。必須在 Instantiate 物件後再 Assign。我是從來沒用過這個寫法，而且有時候後面的人加東西，就會整個一團亂。

後來我也看了很多文章，我覺得下面這樣的寫法，是我覺得比較好，也比較容易debug的方法。

function Fish(iColor,iSize,iType) {

// 因為 this 容易產生誤解，所以指定為 oComponent 
MyObj=this;

MyObj.color = iColor;

MyObj.Size = iSize;

MyObj.Type = iType;

//下面這樣的宣告模式跟Public 的意思是一樣的。
MyObj.showColor = function() {

alert(這條的魚的顏色是 ' + MyObj.color);

};

//這樣的宣告模式..就跟private是一樣的
var showSize= function(sMethod,sParameters){

alert(這條的魚的的類型 ' + MyObj.Type);

};

};

var Fish1 = new Fish('red', 4, '淡水');

var Fish2 = new Fish('blue', 3, '海水');

Fish1.showColor();

//這行是會有錯誤的
Fish2.showSize();

希望這篇文章對你有幫助，順便付上一個網址，是我看完那些資料之後，整理出來的。希望對你是有幫助的。

我之後會再補上一篇 有Var跟沒有的差別。

http://www.josephjiang.com/presentation/OOJS/object-oriented-paradigms.html#section1