javascript 虽然是弱类型检查的脚本语言，可是它也有很多面向对象的特性，因此我们可以模仿java语言的抽象、继承 和封装 来处理javascript 代码。
还是以例子来进行说明。在这里给出3个js 和一个用于测试的 html。
1、Animal.js 的内容
2、Bird.js 的内容
3、People.js 的内容
4、Test.html 的内容
===== 1 Animal.js 的内容 ===========
// * * * * * * * * * * * * * * * * * * * *// * Animal// * desc:定义一个超类// * time：2008-11-11// * author：dxl// *// * Dependencies: null// * * * * * * * * * * * * * * * * * * *
//定义静态变量Animal.CREATOR = "上帝";Animal.HOME = "地球";
//构造器function Animal(){}
//构造器function Animal(weight){//初始化成员变量this.weight = weight;}
//定义成员变量Animal.prototype.weight = 0;//重量
//定义行为方法(公共方法)Animal.prototype.eat = function (args){return "吃食";};//定义行为方法(公共方法)Animal.prototype.move = function (args){return "行";};
//定义行为方法(私有方法)Animal.prototype._animalPrivateMethod = function (args){return args.length;};
===== 1 end ====================
===== 2 Bird.js 的内容 ===========
// * * * * * * * * * * * * * * * * * * * *// * Bird// * desc:定义Animal的子类// * time：2008-11-11// * author：dxl// *// * Dependencies: Animal.js// * * * * * * * * * * * * * * * * * * * /
//定义静态变量Bird.SciName = "鸟";
//构造器function Bird(){}
//构造器function Bird(weight){//初始化成员变量this.weight = weight;}
//Bird 是 Animal 的子类, 继承Bird.prototype = new Animal();
//定义行为方法(公共方法)Bird.prototype.eat = function (args){return "吃生食";};//定义行为方法(公共方法)Bird.prototype.move = function (args){return "飞行";};
//定义行为方法(私有方法)Animal.prototype._birdPrivateMethod = function (args){return args.length;};
===== 2 end ====================
===== 3 People.js 的内容 ===========
// * * * * * * * * * * * * * * * * * * * *// * People// * desc:定义一个Animal的子类// * time：2008-11-11// * author：dxl// *// * Dependencies: Animal.js// * * * * * * * * * * * * * * * * * * * /
//定义静态变量People.SciName = "人";
//构造器function People(){}
//构造器function People(weight){//初始化成员变量this.weight = weight;}
//People 是 Animal 的子类, 继承People.prototype = new Animal();
//定义行为方法(公共方法)People.prototype.eat = function (args){return "吃熟食" ;};//定义行为方法(公共方法)People.prototype.move = function (args){return "步行";};
//定义行为方法(私有方法)People.prototype._peoplePrivateMethod = function (args){return args.length;};
===== 3 end ====================
===== 4 Test.html 的内容 ===========
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><meta name="author" CONTENT="DONG_XUELIN"><title>采用对象方式封装javascript代码</title><script type="text/javascript" src="Animal.js"></script><script type="text/javascript" src="Bird.js"></script><script type="text/javascript" src="People.js"></script><style type="text/css">body{ background:#fff;}.button{background:#eee;border: #666688 1px solid;padding-right: 2px;padding-left: 2px;font-size: 12px;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#c1c1ce);cursor: hand;color: black;padding-top: 2px;onmouseover:expression(οnmοuseοver=function (){this.className='button_over'});onmouseout:expression(οnmοuseοut=function (){this.className='button'});
onmousedown:expression(οnmοusedοwn=function (){this.className='button_down'});}.button_over {background:#fff;border: #666688 1px solid;padding-right: 2px;padding-left: 2px;font-size: 12px;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#c1c1ce, EndColorStr=#ffffff); cursor: hand;color: black;padding-top: 2px;}.button_down{background:#fff;border: #666688 1px solid;padding-right: 2px;padding-left: 2px;font-size: 12px;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#c1c1cd, EndColorStr=#ffffff); cursor: hand;color: black;padding-top: 2px;}</style></HEAD><BODY>
<table id="theTable_1" width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td> </td><td align="left" width="20%">Animal weight：</td><td align="left"><input type="text" id="inputObj_x_id" name="inputObj_x_name" value="1" title="必须输入0-9999内的数字"/></td></tr><tr><td> </td><td align="left" width="20%">Bird weight：</td><td align="left"><input type="text" id="inputObj_y_id" name="inputObj_y_name" value="10" title="必须输入0-9999内的数字"/></td></tr><tr><td> </td><td align="left" width="20%">People weight：</td><td align="left"><input type="text" id="inputObj_z_id" name="inputObj_z_name" value="100" title="必须输入0-9999内的数字"/></td></tr><tr><td colspan="3"><input type="button" class="button" οnclick="viewResult() ;" value="查看结果" /><input type="button" class="button" οnclick="removeConsole();" value="清除控制台" /></td></tr></table><br><br><table id="theTable_2" width="100%" border="0" cellspacing="0" cellpadding="0"><tr class="headRow"><td>console[信息台]</td></tr></table><br></BODY><div id="console_id" style="height:150;overflow-y:auto;width:100%;"></div><SCRIPT language="javascript">var inputObj_x = document.getElementById("inputObj_x_id");//x input objectvar inputObj_y = document.getElementById("inputObj_y_id");//y input objectvar inputObj_z = document.getElementById("inputObj_z_id");//z input objectvar consoleObj = document.getElementById("console_id");//console div object
//打印信息到控制台function printMsg2Console(message,color){if(message == 'undefined') return;if(!color) color = 'black';
if(consoleObj == 'undefined')consoleObj = document.getElementById("console_id");
var newChild = document.createElement("<span style='padding-bottom:4px;font-size:12px;color:" color "'>");newChild.innerText = message;consoleObj.appendChild( newChild );newChild = document.createElement("<br>");consoleObj.appendChild( newChild );newChild.scrollIntoView(true);}
//清除控制台的信息function removeConsole(){if(consoleObj == 'undefined')consoleObj = document.getElementById("console_id");
consoleObj.innerHTML = "";}
//查看 动物， 鸟， 人 对象的结果function viewResult(){//打印全局变量 以及 函数执行结果var x = inputObj_x.value;var y = inputObj_y.value;var z = inputObj_z.value;
var animal = new Animal(x);var bird = new Bird(y);var people = new People(z);
var result = "animal \tweight = " animal.weight "; eat = " animal.eat() "; move = " animal.move()"\nbird \t\t\tweight = " bird.weight "; eat = " bird.eat() "; move = " bird.move()"\npeople \tweight = " people.weight "; eat = " people.eat() "; move = " people.move();
printMsg2Console(result, "black");
}
</SCRIPT></HTML>
===== 4 end ====================
