JavaScript OOP-[轉載]

來自：http://www.matrix.org.cn/blog/liu2liu2/
1. 什麼是JavaScript
JavaScript 是一種描述性的指令碼語言(Script Language)，它可以非常自由地被嵌入到HTML 的檔案之中。使用JavaScript 可以做什麼呢？它的作用很簡單，就是對網頁瀏覽者當前所觸發的事件進行處理或對網頁進行初始化工作。它是事先在網頁中編寫好代碼(或叫做“指令碼”)，然後此代碼伴隨Html檔案一起傳送到用戶端的瀏覽器上，由瀏覽器對這些代碼進行解釋執行，而其執行期間並沒有勞駕伺服器幫忙，這樣就減輕了伺服器的負擔。
許多編程高手都瞧不起JavaScript編程，認為只是小孩子的玩意。的確，JavaScript作為一種指令碼語言，比起其他語言來說，顯得非常簡單，沒有很複雜的文法，沒有龐雜的體系架構。

2. 物件導向編程(Object-Oriented Programming)
一個世界，可以完全由對象組成，而將演算法所基於的世界只用對象表現出來，再進行後續代碼的編寫，這種編程方法就被稱作物件導向的編程思想。
OOP的三大要素：
1． 封裝
2． 繼承
3． 多態

3. JavaScript如何?OOP
3.1. 封裝(Wrap)
JavaScript的對象封裝，主要依靠function來實現。以下是一個簡單的樣本：
//*********************************************
// 定義Pet(寵物)對象
//*********************************************
function Pet() {
//名稱
this.name = null;
//顏色
this.color = null;
//擷取名稱
this.getName = function() {
return this.name;
};
//設定名稱
this.setName = function(newName) {
this.name = newName;
};
//擷取顏色
this.getColor = function() {
return this.color;
};
//設定顏色
this.setColor = function(newColor) {
this.color = newColor;
};
//定義一個需要實現的方法
this.getFood = null;
//擷取寵物的描述資訊
this.toString = function() {
return "The pet is " + this.name +",it's "+this.color+",and it likes "+this.getFood()+".";
};
}
3.2. 繼承(inheritance)
JavaScript的繼承的實現主要依靠prototype(原型)來實現，下面為Pet類編寫一個子類。

//*********************************************
// 定義Cat(貓)對象
//*********************************************
function Cat() {
//實現Pet中定義的getFood方法
this.getFood = function() {
return "fish";
};
}

//聲明Cat的原型，即Cat的父類
Cat.prototype = new Pet;

多層次繼承
//*********************************************
// 定義PersianCat(波斯貓)對象
//*********************************************
function PersianCat() {
}

//聲明PersianCat的原型，即PersianCat的父類
PersianCat.prototype = new Cat;
3.3. 重載(override)與多態(Polymorphism)
//重載Pet的toString方法
PersianCat.prototype.toString = function() {
return "It's just a persian cat.";
};

注意：Override和Overload的區別，JavaScript是不支援Overload的，原因是……你自己想想吧。

JavaScript是一種弱類型的語言，所以不要把它與C++、JAVA等語言進行比較。
4. 附錄
4.1. 完整的樣本
4.1.1. Pet.js
//*********************************************
// 定義Pet(寵物)對象
//*********************************************
function Pet() {
//名稱
this.name = null;
//顏色
this.color = null;
//擷取名稱
this.getName = function() {
return this.name;
};
//設定名稱
this.setName = function(newName) {
this.name = newName;
};
//擷取顏色
this.getColor = function() {
return this.color;
};
//設定顏色
this.setColor = function(newColor) {
this.color = newColor;
};
//定義一個需要實現的方法
this.getFood = null;
//擷取寵物的描述資訊
this.toString = function() {
return "The pet is " + this.name +",it's "+this.color+",and it likes "+this.getFood()+".";
};
}

//*********************************************
// 定義Cat(貓)對象
//*********************************************
function Cat() {
//實現Pet中定義的getFood方法
this.getFood = function() {
return "fish";
};
}

//聲明Cat的原型，即Cat的父類
Cat.prototype = new Pet;

//*********************************************
// 定義PersianCat(波斯貓)對象
//*********************************************
function PersianCat() {
}

//聲明PersianCat的原型，即PersianCat的父類
PersianCat.prototype = new Cat;

//重載Pet的toString方法
PersianCat.prototype.toString = function() {
return "It's just a persian cat.";
};

//*********************************************
// 定義Dog(狗)對象
//*********************************************
function Dog() {
//實現Pet中定義的getFood方法
this.getFood = function() {
return "bone";
};
}

//聲明Dog的原型，即Dog的父類
Dog.prototype = new Pet;
4.1.2. Pet.htm
<script language="javascript" src="Pet.js" >
</ script >
< script language="javascript">
//定義一個Cat對象
var cat = new Cat();
cat.setName("MiMi");
cat.setColor("white");

//定義一個Dog對象
var dog = new Dog();
dog.setName("WangWang");
dog.setColor("yellow");

//定義一個PersianCat對象
var persianCat = new PersianCat();

//定義數組，儲存上面的三個對象
var pets = new Array(3);
pets[0] = cat;
pets[1] = dog;
pets[2] = persianCat;

//測試程式
for(var i=0,size=pets.length;i<size;i++) {
alert(pets[i].toString());
}
</script>
4.1.3. 運行結果

彈出三個對話方塊，分別如下：
The pet is MiMi,it's white,and it likes fish.
The pet is WangWang,it's yellow,and it likes bone.
It's just a persian cat.
本樣本在IE6.0下測試通過。