JavaScript OOP

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来实现。以下是一个简单的示例：

<SPAN style="COLOR: green">//*********************************************<BR></SPAN><SPAN style="COLOR: green">// 定义Pet(宠物)对象<BR></SPAN><SPAN style="COLOR: green">//*********************************************<BR></SPAN><SPAN style="COLOR: blue">function</SPAN> Pet() {<BR>    <SPAN style="COLOR: green">//名称<BR></SPAN>    <SPAN style="COLOR: blue">this</SPAN>.name = <SPAN style="COLOR: blue">null</SPAN>;<BR>    <SPAN style="COLOR: green">//颜色<BR></SPAN>    <SPAN style="COLOR: blue">this</SPAN>.color = <SPAN style="COLOR: blue">null</SPAN>;<BR>    <SPAN style="COLOR: green">//获取名称<BR></SPAN>    <SPAN style="COLOR: blue">this</SPAN>.getName = <SPAN style="COLOR: blue">function</SPAN>() {<BR>        <SPAN style="COLOR: blue">return</SPAN> <SPAN style="COLOR: blue">this</SPAN>.name;<BR>    };<BR>    <SPAN style="COLOR: green">//设置名称<BR></SPAN>    <SPAN style="COLOR: blue">this</SPAN>.setName = <SPAN style="COLOR: blue">function</SPAN>(newName) {<BR>        <SPAN style="COLOR: blue">this</SPAN>.name = newName;<BR>    };<BR>    <SPAN style="COLOR: green">//获取颜色<BR></SPAN>    <SPAN style="COLOR: blue">this</SPAN>.getColor = <SPAN style="COLOR: blue">function</SPAN>() {<BR>        <SPAN style="COLOR: blue">return</SPAN> <SPAN style="COLOR: blue">this</SPAN>.color;<BR>    };<BR>    <SPAN style="COLOR: green">//设置颜色<BR></SPAN>    <SPAN style="COLOR: blue">this</SPAN>.setColor = <SPAN style="COLOR: blue">function</SPAN>(newColor) {<BR>        <SPAN style="COLOR: blue">this</SPAN>.color = newColor;<BR>    };<BR>    <SPAN style="COLOR: green">//定义一个需要实现的方法<BR></SPAN>    <SPAN style="COLOR: blue">this</SPAN>.getFood = <SPAN style="COLOR: blue">null</SPAN>;<BR>    <SPAN style="COLOR: green">//获取宠物的描述信息<BR></SPAN>    <SPAN style="COLOR: blue">this</SPAN>.<SPAN style="COLOR: teal">toString</SPAN> = <SPAN style="COLOR: blue">function</SPAN>() {<BR>        <SPAN style="COLOR: blue">return</SPAN> <SPAN style="COLOR: maroon">"The pet is "</SPAN> + <SPAN style="COLOR: blue">this</SPAN>.name +<SPAN style="COLOR: maroon">",it's "</SPAN>+<SPAN style="COLOR: blue">this</SPAN>.color+<SPAN style="COLOR: maroon">",and it likes "</SPAN>+<SPAN style="COLOR: blue">this</SPAN>.getFood()+<SPAN style="COLOR: maroon">"."</SPAN>;<BR>    };<BR>}<BR>  

 

3.2. 继承(inheritance)

JavaScript的继承的实现主要依靠prototype(原型)来实现，下面为Pet类编写一个子类。

 

<SPAN style="COLOR: green">//*********************************************<BR></SPAN><SPAN style="COLOR: green">// 定义Cat(猫)对象<BR></SPAN><SPAN style="COLOR: green">//*********************************************<BR></SPAN><SPAN style="COLOR: blue">function</SPAN> Cat() {<BR>    <SPAN style="COLOR: green">//实现Pet中定义的getFood方法<BR></SPAN>    <SPAN style="COLOR: blue">this</SPAN>.getFood = <SPAN style="COLOR: blue">function</SPAN>() {<BR>        <SPAN style="COLOR: blue">return</SPAN> <SPAN style="COLOR: maroon">"fish"</SPAN>;<BR>    };<BR>}<BR><BR><SPAN style="COLOR: green">//声明Cat的原型，即Cat的父类<BR></SPAN>Cat.<SPAN style="COLOR: teal">prototype</SPAN> = <SPAN style="COLOR: blue">new</SPAN> Pet;<BR><BR>多层次继承<BR><SPAN style="COLOR: green">//*********************************************<BR></SPAN><SPAN style="COLOR: green">// 定义PersianCat(波斯猫)对象<BR></SPAN><SPAN style="COLOR: green">//*********************************************<BR></SPAN><SPAN style="COLOR: blue">function</SPAN> PersianCat() {<BR>}<BR><BR><SPAN style="COLOR: green">//声明PersianCat的原型，即PersianCat的父类<BR></SPAN>PersianCat.<SPAN style="COLOR: teal">prototype</SPAN> = <SPAN style="COLOR: blue">new</SPAN> Cat;<BR><SPAN style="COLOR: maroon">3</SPAN><SPAN style="COLOR: maroon">.3</SPAN>.    重载(override)与多态(Polymorphism)<BR><SPAN style="COLOR: green">//重载Pet的toString方法<BR></SPAN>PersianCat.<SPAN style="COLOR: teal">prototype</SPAN>.<SPAN style="COLOR: teal">toString</SPAN> = <SPAN style="COLOR: blue">function</SPAN>() {<BR>    <SPAN style="COLOR: blue">return</SPAN> <SPAN style="COLOR: maroon">"It's just a persian cat."</SPAN>;<BR>};<BR>




注意：Override和Overload的区别，JavaScript是不支持Overload的，原因是……你自己想想吧。



JavaScript是一种弱类型的语言，所以不要把它与C++、JAVA等语言进行比较。 

 
 

  
  4. 附录
 
 

 
 

  
  4.1. 完整的示例
 
 

 
 

  
  4.1.1. Pet.js
 
 
<SPAN style="COLOR: green">//*********************************************<BR></SPAN><SPAN style="COLOR: green">// 定义Pet(宠物)对象<BR></SPAN><SPAN style="COLOR: green">//*********************************************<BR></SPAN><SPAN style="COLOR: blue">function</SPAN> Pet() {<BR>    <SPAN style="COLOR: green">//名称<BR></SPAN>    <SPAN style="COLOR: blue">this</SPAN>.name = <SPAN style="COLOR: blue">null</SPAN>;<BR>    <SPAN style="COLOR: green">//颜色<BR></SPAN>    <SPAN style="COLOR: blue">this</SPAN>.color = <SPAN style="COLOR: blue">null</SPAN>;<BR>    <SPAN style="COLOR: green">//获取名称<BR></SPAN>    <SPAN style="COLOR: blue">this</SPAN>.getName = <SPAN style="COLOR: blue">function</SPAN>() {<BR>        <SPAN style="COLOR: blue">return</SPAN> <SPAN style="COLOR: blue">this</SPAN>.name;<BR>    };<BR>    <SPAN style="COLOR: green">//设置名称<BR></SPAN>    <SPAN style="COLOR: blue">this</SPAN>.setName = <SPAN style="COLOR: blue">function</SPAN>(newName) {<BR>        <SPAN style="COLOR: blue">this</SPAN>.name = newName;<BR>    };<BR>    <SPAN style="COLOR: green">//获取颜色<BR></SPAN>    <SPAN style="COLOR: blue">this</SPAN>.getColor = <SPAN style="COLOR: blue">function</SPAN>() {<BR>        <SPAN style="COLOR: blue">return</SPAN> <SPAN style="COLOR: blue">this</SPAN>.color;<BR>    };<BR>    <SPAN style="COLOR: green">//设置颜色<BR></SPAN>    <SPAN style="COLOR: blue">this</SPAN>.setColor = <SPAN style="COLOR: blue">function</SPAN>(newColor) {<BR>        <SPAN style="COLOR: blue">this</SPAN>.color = newColor;<BR>    };<BR>    <SPAN style="COLOR: green">//定义一个需要实现的方法<BR></SPAN>    <SPAN style="COLOR: blue">this</SPAN>.getFood = <SPAN style="COLOR: blue">null</SPAN>;<BR>    <SPAN style="COLOR: green">//获取宠物的描述信息<BR></SPAN>    <SPAN style="COLOR: blue">this</SPAN>.<SPAN style="COLOR: teal">toString</SPAN> = <SPAN style="COLOR: blue">function</SPAN>() {<BR>        <SPAN style="COLOR: blue">return</SPAN> <SPAN style="COLOR: maroon">"The pet is "</SPAN> + <SPAN style="COLOR: blue">this</SPAN>.name +<SPAN style="COLOR: maroon">",it's "</SPAN>+<SPAN style="COLOR: blue">this</SPAN>.color+<SPAN style="COLOR: maroon">",and it likes "</SPAN>+<SPAN style="COLOR: blue">this</SPAN>.getFood()+<SPAN style="COLOR: maroon">"."</SPAN>;<BR>    };<BR>}<BR><BR><SPAN style="COLOR: green">//*********************************************<BR></SPAN><SPAN style="COLOR: green">// 定义Cat(猫)对象<BR></SPAN><SPAN style="COLOR: green">//*********************************************<BR></SPAN><SPAN style="COLOR: blue">function</SPAN> Cat() {<BR>    <SPAN style="COLOR: green">//实现Pet中定义的getFood方法<BR></SPAN>    <SPAN style="COLOR: blue">this</SPAN>.getFood = <SPAN style="COLOR: blue">function</SPAN>() {<BR>        <SPAN style="COLOR: blue">return</SPAN> <SPAN style="COLOR: maroon">"fish"</SPAN>;<BR>    };<BR>}<BR><BR><SPAN style="COLOR: green">//声明Cat的原型，即Cat的父类<BR></SPAN>Cat.<SPAN style="COLOR: teal">prototype</SPAN> = <SPAN style="COLOR: blue">new</SPAN> Pet;<BR><BR><SPAN style="COLOR: green">//*********************************************<BR></SPAN><SPAN style="COLOR: green">// 定义PersianCat(波斯猫)对象<BR></SPAN><SPAN style="COLOR: green">//*********************************************<BR></SPAN><SPAN style="COLOR: blue">function</SPAN> PersianCat() {<BR>}<BR><BR><SPAN style="COLOR: green">//声明PersianCat的原型，即PersianCat的父类<BR></SPAN>PersianCat.<SPAN style="COLOR: teal">prototype</SPAN> = <SPAN style="COLOR: blue">new</SPAN> Cat;<BR><BR><SPAN style="COLOR: green">//重载Pet的toString方法<BR></SPAN>PersianCat.<SPAN style="COLOR: teal">prototype</SPAN>.<SPAN style="COLOR: teal">toString</SPAN> = <SPAN style="COLOR: blue">function</SPAN>() {<BR>    <SPAN style="COLOR: blue">return</SPAN> <SPAN style="COLOR: maroon">"It's just a persian cat."</SPAN>;<BR>};<BR><BR><SPAN style="COLOR: green">//*********************************************<BR></SPAN><SPAN style="COLOR: green">// 定义Dog(狗)对象<BR></SPAN><SPAN style="COLOR: green">//*********************************************<BR></SPAN><SPAN style="COLOR: blue">function</SPAN> Dog() {<BR>    <SPAN style="COLOR: green">//实现Pet中定义的getFood方法<BR></SPAN>    <SPAN style="COLOR: blue">this</SPAN>.getFood = <SPAN style="COLOR: blue">function</SPAN>() {<BR>        <SPAN style="COLOR: blue">return</SPAN> <SPAN style="COLOR: maroon">"bone"</SPAN>;<BR>    };<BR>}<BR><BR><SPAN style="COLOR: green">//声明Dog的原型，即Dog的父类<BR></SPAN>Dog.<SPAN style="COLOR: teal">prototype</SPAN> = <SPAN style="COLOR: blue">new</SPAN> Pet;<BR>  

//*********************************************// 定义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
 
 
print?<script language=<SPAN style="COLOR: maroon">"javascript"</SPAN> src=<SPAN style="COLOR: maroon">"Pet.js"</SPAN> ><BR></ script ><BR>< script language=<SPAN style="COLOR: maroon">"javascript"</SPAN>><BR><SPAN style="COLOR: green">//定义一个Cat对象<BR></SPAN><SPAN style="COLOR: blue">var</SPAN> cat = <SPAN style="COLOR: blue">new</SPAN> Cat();<BR>cat.setName(<SPAN style="COLOR: maroon">"MiMi"</SPAN>);<BR>cat.setColor(<SPAN style="COLOR: maroon">"white"</SPAN>);<BR><BR><SPAN style="COLOR: green">//定义一个Dog对象<BR></SPAN><SPAN style="COLOR: blue">var</SPAN> dog = <SPAN style="COLOR: blue">new</SPAN> Dog();<BR>dog.setName(<SPAN style="COLOR: maroon">"WangWang"</SPAN>);<BR>dog.setColor(<SPAN style="COLOR: maroon">"yellow"</SPAN>);<BR><BR><SPAN style="COLOR: green">//定义一个PersianCat对象<BR></SPAN><SPAN style="COLOR: blue">var</SPAN> persianCat = <SPAN style="COLOR: blue">new</SPAN> PersianCat();<BR><BR><SPAN style="COLOR: green">//定义数组，保存上面的三个对象<BR></SPAN><SPAN style="COLOR: blue">var</SPAN> pets = <SPAN style="COLOR: blue">new</SPAN> Array(<SPAN style="COLOR: maroon">3</SPAN>);<BR>pets[<SPAN style="COLOR: maroon">0</SPAN>] = cat;<BR>pets[<SPAN style="COLOR: maroon">1</SPAN>] = dog;<BR>pets[<SPAN style="COLOR: maroon">2</SPAN>] = persianCat;<BR><BR><SPAN style="COLOR: green">//测试程序<BR></SPAN><SPAN style="COLOR: blue">for</SPAN>(<SPAN style="COLOR: blue">var</SPAN> i=<SPAN style="COLOR: maroon">0</SPAN>,size=pets.length;i<size;i++) {<BR>    <SPAN style="COLOR: red">alert</SPAN>(pets[i].<SPAN style="COLOR: teal">toString</SPAN>());<BR>}<BR></script><BR>  

<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下测试通过。