JavaScript面向对象编程

JavaScript面向对象编程
1、引言

JavaScript是一种解释性的，基于对象的脚本语言（an interpreted, object-based scripting language）。JavaScript 基于客户端运行，目前基本上所有的浏览器都支持JavaScript。1995年首次出现时，JavaScript的主要目的还只是处理一些输入的有效性验证，随着互联网的蓬勃发展，JavaScript的应用越来越广泛，特别是近几年AJAX技术（Asynchronous JavaScript and XML）的发展，更使JavaScript的应用达到了一个新的高度。在AJAX技术中，JavaScript是一项关键技术，请求的发送、接收、接收数据后的界面处理都需要使用JavaScript技术，这对JavaScript语言提出了新的需求，本文从JavaScript的基本特点出发，模拟出了面向对象编程的大部分特点，使JavaScript摆脱了以往脚本语言杂乱无章、难以阅读、难以维护的形象，而具有了面向对象特性，极大的方便了JavaScript的开发、维护，提高了软件开发效率。

2、JavaScript的基本特点

JavaScript是解释性的，基于对象的脚本语言。它有下面几个显著特点，这几个特点在后面的面向对象特性模拟中会反复用到，因此这里先详细说明这几个特点。

l        解释型语言：JavaScript是一种解释性语言，解释性语言相对于编译型语言，编译型语言必须先通过编译才能执行，而解释性语言不需要编译，直接从上到下解释执行，一边解释一边执行，这就决定了解释性语言的代码是有先后顺序的，需要执行的代码必须已经解释过。因此，JavaScript需要注意代码的先后顺序。

l        弱类型语言：JavaScript是一种弱类型语言，弱类型语言相对于强类型语言，大部分面向对象语言都是强类型语言，强类型语言是一种需要强制类型定义的语言，它要求每个变量都确定某一种类型，它和别的类型转换必须显式转换。弱类型语言是一种类型可以被忽略的语言，它在变量定义时不指定某一类型，在执行时通过执行结果才能确定类型，不同类型之间不需要通过显式转换就可以转换。

l        动态添加属性和方法：这个特点是指可以动态为某个对象添加以前没有的属性和方法。这个特点使JavaScript非常灵活，正因为有了这个特点，JavaScript的面向对象编程才有了可能。

l        prototype（原型）属性：JavaScript是一种基于对象的语言，JavaScript中的所有对象，都具有prototype属性。prototype属性返回对象的所有属性和方法，所有 JavaScript 内部对象都有只读的 prototype 属性，可以向其原型中动态添加属性和方法，但该对象不能被赋予不同的原型。但是自定义的对象可以被赋给新的原型。

3、面向对象的基本特点

面向对象有下列三个主要特点：封装、继承和多态。这里先详细说明这几个特点，后面几个部分分别在JavaScript中实现这些特点，从而实现完整的面向对象模拟。

l        封装：封装就是把各种方法和变量合并到一个类，用这个类代表某个对象为完成一定的任务所能保存的范围以及它能执行的操作。封装隐藏了方法执行的细节。

l        继承：继承就是根据现有类的方法和成员变量生成新的类的功能。

l        多态：多态就是对象随着程序执行而使其形式发生改变的能力。

4、JavaScript语言基础

4.1数据类型

基本数据类型：Number, String, Boolean, Function, Object, Array, null, undefined，注意null和undefined的区别。

日期和时间：日期类型并不是JavaScript的基本数据类型，但JavaScript提供了一个处理日期的类：Date，用法如下：

var now = new Date();   var year = now.getYear();       // 年 var month = now.getMonth() + 1; // 月 var day = now.getDate();        // 日 var hour = now.getHours();      // 时 var minute = now.getMinutes();  // 分 var second = now.getSeconds();  // 秒   alert("现在时间是: "+year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second);

正则表达式：主要用于对文本进行模式匹配，实现对文本的查找和替换操作。在JavaScript中，提供了一个RegExp类来处理正则表达式，创建方式和Date一样，用关键字new就可以创建，如var re =
new RegExp();

和Date不一样的地方在于，虽然RegExp类也不是JavaScript的基本数据类型，但我们在创建正则表达式对象时，可以不需要用new关键字就可以创建，如
var
re = /[1-9][0-9]*/;
这样就直接定义了正则表达式对象，因为在JavaScript中，一对斜线中包括一个文本就认为构成了一个正则表达式对象。
下面就示例用正则表达式判断输入的Email和手机号是否合法：

// 判断Email是否合法 function isEmail(p_addr) {     var reEmail = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;     return reEmail.test(p_addr); }   // 判断手机号是否合法 function isPhoneNumber(p_num) {     var rePhone = /^1\d{10}$/gi;     return rePhone.test(p_num); }   // 测试 var email = "tenderghost@163.com"; alert(isEmail(email));   var phone = 137; alert(isPhoneNumber(phone));

错误对象：JavaScript中定义了几个用于处理错误类型的类，有：Error, EvalError, RangeError, ReferenceError, SyntaxError, TypeError, URIError。和Java中的异常处理方式类似，JavaScript中的错误对象可以用try...catch...finally语句来处理，示例如下：

try{     throw new Error("自定义错误示例"); } catch (ex) {     alert("Error对象被捕捉，消息为: " + ex.message); } finally {     alert("无论如何都会被执行！"); }

4.2 变量

JavaScript是一种弱类型的语言，这就意味着一个JavaScript变量可以指向任何数据类型，例如：

var i = 10;

i = “ten”;

变量的作用域

var scope = “global scope”;    // 全局变量

function checkscope() {

    var local = “local scope”;    // 局部变量

}

注意：除函数中的变量为局部变量外，其他的全部为全局变量。

4.3 函数

JavaScript中:

function add(a, b) {

   return a + b;

}

Java中:

public int add(int a, int b) {

   return a + b;

}

函数的参数: arguments对象

在一个函数中，会有一个隐含的arguments对象来保存函数的参数，这样在有些时候，我们在定义函数时，可以不明确指定函数所需要的参数，如下：

// 求最大值 function max() {     var m = Number.NEGATIVE_INFINITY;  // 无穷小     for (var i = 0; i < arguments.length; i++) {        if (arguments[i] > m)            m = arguments[i];     }     return m; } // 测试 var largest = max(1, 7, 9, 23, 88, 2, 5); alert(largest);

5、封装的实现

下面以一个详细的示例来说明常用的私有实例成员、公有实例成员和公有静态成员的封装。

Human = function(name)   // 等于function Human(name) {     var me = this;         // 私有属性     var _name = null;         // 公有属性     me.name = null;         // 私有方法     function setName()     {        _name = name;        me.name = _name;     }         // 公有方法     me.sayHello = function()     {        alert("Hello, my name is " + me.name);     }         // 模拟构造函数     function constructor()     {        setName();     }         constructor();         return me; } // 增加类的静态方法 Human.classMethod = function() {     alert("Human's classMethod"); } // 通过原型(prototype)增加公有方法 Human.prototype.sayGoodbye = function() {     alert("Goodbye, " + this.name); }   // 当成类来使用 var m_human = new Human("pengfei");     m_human.sayHello();   // 调用类的静态方法 Human.classMethod();   // 直接当成函数使用 Human("huang");

JavaScript语言中类的定义和函数的定义都是使用function关键字，使用function定义的过程，即可以看成是类的定义，也可以看成是函数的定义。从示例代码中可以得出：

·        私有属性和方法的定义，直接在类内部定义一个变量，因为这个变量的作用域只限定在类内部，外部不能使用，因此这样定义的属性是私有属性，私有方法的定义也类似。

·        公有属性和方法的定义，通过定义一个私有变量me等于this，然后动态添加me变量的属性和方法，最后把me变量作为创建的实例对象返回。这样给me变量添加的属性和方法在类外部可以使用，也就是共有属性和方法。

·        构造函数的定义，构造函数是在创建一个对象时，自动执行的一个函数。在Java，C#等面向对象的语言中，只要定义一个函数和类名相同即可。在JavaScript中，可以随便定义一个私有函数，这个函数需要在类定义体中执行，这样的函数即成为构造函数，需要注意的是，为了确保构造函数中的代码都已经被解释过，构造函数最好放在类定义的最后。

·        类静态方法的定义，类静态方法是指不需要通过类实例来调用，而是可以直接通过类名来调用的方法。在Java，C＃等面向对象语言中，一般是通过关键字static来指明一个方法是静态方法。在JavaScript中，没有static关键字，不能在类的定义体中实现静态方法，必须在类的定义体外，通过直接在类上动态添加方法来定义静态方法。需要注意，JavaScript静态方法中不能访问类的公有属性和公有方法，这和Java，C＃等语言是一致的。

·        类的公有属性和公有方法也可以使用prototype来实现， 但是使用prototype有以下几个注意点：需要定义在类定义体外，和Java等语言的封装习惯不一致；prototype方式不能访问类的私有属性。

·        JavaScript不能实现只读属性、只写属性的定义，所有的公有属性都是可读可写。

6、继承的实现

JavaScript中没有Java，.Net中实现继承的关键字，JavaScript中的继承都是通过JavaScript语言本身的特性模拟出来的，可以通过两种方式实现继承：

l        创建对象方式

// 定义父类 Human = function() {     var me = this;         me.name = "";         me.age = 0;         me.setName = function(name)     {        me.name = name;     }         me.setAge = function(age)     {        me.age = age;     }         me.sayHello = function()     {        alert("Human sayHello, name:"+ me.name +", age:"+ me.age);     }         return me; }   // 定义子类 Chinese = function(name, age) {     // 继承     var me = new Human();         // 覆盖父类的sayHello方法     me.sayHello = function()     {        alert("中国人问好，名字："+ me.name +"，年龄："+ me.age);     }         // 设置name和age     me.setName(name);     me.setAge(age);         return me; }   // 测试 var c = new Chinese("李四", 21); c.sayHello();

定义一个变量me，赋予父类实例，这样me就有了父类的属性和方法，然后给me增加子类的属性和方法，最后把me变量作为创建的实例对象返回。这样定义的类就有了父类的属性和方法，即实现了继承。

l        原型（prototype）方式

// 定义父类 function Human() {     this.name = "";     this.age = 0; } Human.prototype = {     setName : function(name)     {        this.name = name;     },     setAge : function(age)     {        this.age = age;     },     sayHello : function()     {        alert("Human sayHello, name:"+ this.name +", age:"+ this.age);     } }   // 定义子类 function Chinese(name, age) {     this.setName(name);     this.setAge(age); } // 继承 Chinese.prototype = new Human(); // 覆盖父类的sayHello方法 Chinese.prototype.sayHello = function() {     alert("中国人问好，名字："+ this.name +"，年龄："+ this.age); }   // 测试 var c = new Chinese("张三", 20); c.sayHello();

首先封装好子类的属性和方法，然后创建一个父类实例附给子类的prototype属性，这样子类就有了父类的属性和方法，即实现了继承。

这两种方式都实现了继承，但是和Java，.Net等面向对象语言相关，JavaScript中模拟的继承还要以下问题：

l        不能定义保护的方法和属性。

l        不能继承父类的静态方法。

7、多态的实现

多态主要包括重载（overload）和覆盖（override），重载是指同一个名字的函数或方法可以有多个实现，他们依靠参数的类型或参数的个数来区分识别。而覆盖是指子类中可以定义与父类中同名的方法，这些方法定义后，在子类的实例化对象中，父类中继承的这些同名方法将被隐藏。

由于JavaScript的弱类型性，JavaScript在定义函数时，不需要指定函数参数的类型和个数，这种特性为重载的实现提供了便利。如下函数：

function say(param) {     // 通过typeof函数，判定不同类型的参数。     if (typeof(param)=="string")        alert("string");     else if (typeof(param)=="number")        alert("number");     else        alert("others"); }

函数调用时可以传入string，也可以传入number，或别的类型，在函数实现体中可以使用typeof函数得到传入参数的类型，从而实现不同的功能。这样虽然是一个函数实现体，但是也有了多个实现，即重载。JavaScript中另外一种比较常见的重载方式是通过函数的arguments对象来实现，这种方式已在前面讲过，不再赘述。

JavaScript中覆盖的实现，只需在子类中定义一个与父类同名的方法即可。

8、静态类的实现

静态类，是一种不能被实例化，并且只包含有静态成员的类。在Java，C＃等面向对象语言中，一般使用static关键字来指明类是静态类，JavaScript中没有static关键字，但是可以通过实例化匿名函数来实现静态类。如下：

UtilTool = new function()   // 关键在于这个new {     var me = this;         // 增加一个静态方法     me.add = function(a, b)     {        return a+b;     }         return me; }   // 测试 var sum = UtilTool.add(10, 100); alert(sum);

UtilTool其实是一个对象，只是这个对象属于匿名类，该类在创建完UtilTool这个对象后，就不能再被使用了。而UtilTool是一个对象，不是一个 function，所以不能作为一个类被实例化，因此，它就相当于一个静态类。

 

 

JavaScript调试
JavaScript的执行环境是浏览器，目前没有像Eclipse和Visual Studio等比较高级的IDE，调试就需要借助外部的调试工具。

IE下的调试工具主要有Office工具中的“站点调试”和Visual Stutio。

Firefox下的调试工具为著名的firebug。

树形控件是一种人们熟悉的用户界面控件，广泛地用来显示层次型数据。
树形控件具有独特的扩展和折叠分支的能力，能够以较小的空间显示出大量的信息，一目了然地传达出数据之间的层次关系。凡是熟悉图形用户界面的用户，都能够自如地运用树形控件。

图一：用javascript实现的树形控件
HTML本身不支持树形控件，但我们可以通过一些javascript脚本代码实现。为了提高控件的可重用性，我们要充分运用javascript对面向对象编程技术的支持。本文的树形控件适用于IE 4+和Netscape 6.x，应当说这已经涵盖了当前的主流浏览器。
一、javascript与面向对象
面向对象的编程有三个最基本的概念：继承，封装，多态性。继承和封装这两个概念比较好理解，相对而言，多态性这个概念就比较难于掌握和运用。一般而言，多态性是指以多种形式表现的能力。在面向对象编程技术中，多态性表示编程语言拥有的一种根据对象的数据类型或类的不同而采取不同处理方式的能力。
在“纯”面向对象的语言中，例如Java，多态性一般与类的继承密不可分。也就是说，必须定义一种类的层次关系，处于顶端的是抽象类，处于下层的是各种具体的实现。抽象类定义了子类必须实现或覆盖的方法，不同的子类根据自己的需要以不同的方式覆盖抽象类的方法。
例如，计算圆面积和矩形面积的公式完全不同，按照面向对象的设计思路，我们要先定义一个抽象类Shape，Sharp类有一个findArea()方法，所有从Shape类派生的子类都必须实现findArea()方法。然后，我们定义一个代表矩形的Rectangle类，一个代表圆的Circle类，这两个类都从Shape类继承。Rectangle类和Circle类分别实现findArea()方法，两者用不同的计算公式计算面积。最终达到这样一个目标：不论对象属于Shape的哪一种子类（Rectangle或Circle），都可以用相同的方式调用findArea()方法，不用去管被调用的findArea()采用什么公式计算面积，从而有效地隐藏实现细节。
javascript语言不支持以类为基础的继承，但仍具有支持多态性的能力。javascript的继承是一种基于原型（Prototype）的继承。实际上，正如本文例子所显示的，这种继承方式简化了多态性方法的编写，而且从结构上来看，最终得到的程序也与纯面向对象语言很接近。
二、准备工作
整个树形控件由四部分构成：图形，CSS样式定义，HTML框架代码，javascript代码。从图一可以看出，树形控件需要三个图形，分别表示折叠的分支（替换webdesign.chinaitlab.com/javascript/closed.gif）、展开的分支（open.gif）和叶节点（替换webdesign.chinaitlab.com/javascript/doc.gif）。
下面是树形控件要用到的CSS样式定义：
< style>

body{

font: 10pt 宋体,sans-serif; color: navy; }

.branch{

cursor: pointer;

cursor: hand;

display: block; }

.leaf{

display: none;

margin-left: 16px; }

a{ text-decoration: none; }

a:hover{ text-decoration: underline; }

< /style>
CSS规则很简单：body规则设置了文档的字体和前景（文字）颜色。branch规则的用途是：当鼠标经过拥有子节点的节点时，指针会变成手的形状。之所以要定义两个cursor属性，是因为IE和Netscape使用不同的属性名称。在leaf规则中设置display属性为none，这是为了实现叶节点（不含子节点的最终节点）的折叠效果。在脚本代码中，我们通过把display属性设置成block显示出节点，设置成none隐藏节点。
三、脚本设计
本文实现的树形控件包含一个tree对象，tree对象拥有一个branches子对象集合；每一个branch（分支）对象又拥有一个子对象的集合。子对象可以是branch对象，也可以是leaf（树叶）对象。所有这三种对象分别实现一个多态性的write()方法，不同对象的write()方法根据所属对象的不同而执行不同的操作，也就是说：tree对象的write()方法与branch对象的write()方法不同，branch对象的write()方法又与leaf对象的write()方法不同。另外，tree和branch对象各有一个add()方法，分别用来向各自所属的对象添加子对象。
在HTML文档的部分加入下面这段代码。这段代码的作用是创建两个Image对象，分别对应分支打开、折叠状态的文件夹图形。另外还有几个工具函数，用于打开或折叠任意分支的子元素，同时根据分支的打开或折叠状态相应地变换文件夹图形。
< script language="javascript">

var openImg = new ..Asset not found..;

openImg.src = "open.gif";

var closedImg = new ..Asset not found..;

closedImg.src = "替换webdesign.chinaitlab.com/javascript/closed.gif";
function showBranch(branch){

var objBranch = document.getElementById(branch).style;

if (objBranch.display=="block")

objBranch.display="none";

else

objBranch.display="block";

swapFolder('I' + branch);

}
function swapFolder(img){

objImg = document.getElementById(img);

if (objImg.src.indexOf('替换webdesign.chinaitlab.com/javascript/closed.gif')>-1)

objImg.src = openImg.src;

else

objImg.src = closedImg.src;

}

< /script>
代码预先装入图形对象，这有利于提高以后的显示速度。showBranch()函数首先获得参数提供的分支的样式，判断并切换当前样式的显示属性（在block和none之间来回切换），从而形成分支的扩展和折叠效果。swapImage()函数的原理和showBranch()函数基本相同，它首先判断当前分支的图形（打开的文件夹还是折叠的文件夹），然后切换图形。
四、tree对象
下面是tree对象的构造函数：
function tree(){

this.branches = new Array();

this.add = addBranch;

this.write = writeTree;

}
tree对象代表着整个树形结构的根。tree()构造函数创建了branches数组，这个数组用来保存所有的子元素。add和write属性是指向两个多态性方法的指针，两个多态性方法的实现如下：
function addBranch(branch){

this.branches[this.branches.length] = branch;

}
function writeTree(){

var treeString = '';

var numBranches = this.branches.length;

for (var i=0;i <NUMBRANCHES;I++)

treeString += this.branches[i].write();

document.write(treeString);

}
addBranch()方法把参数传入的对象加入到branches数组的末尾。writeTree()方法遍历保存在branches数组中的每一个对象，调用每一个对象的write()方法。注意这里利用了多态性的优点：不管branches数组的当前元素是什么类型的对象，我们只需按照统一的方式调用write()方法，实际执行的write()方法由branches数组当前元素的类型决定——可能是branch对象的write()方法，也可能是leaf对象的write()方法。
必须说明的是，虽然javascript的Array对象允许保存任何类型的数据，但这里我们只能保存实现了write()方法的对象。象Java这样的纯面向对象语言拥有强健的类型检查机制，能够自动报告类型错误；但javascript这方面的限制比较宽松，我们必须手工保证保存到branches数组的对象具有正确的类型。
五、branch对象
branch对象与tree对象相似：
function branch(id, text){

this.id = id;

this.text = text;

this.write = writeBranch;

this.add = addLeaf;

this.leaves = new Array();

}
branch对象的构造函数有id和text两个参数。id是一个唯一性的标识符，text是显示在该分支的文件夹之后的文字。leaves数组是该分支对象的子元素的集合。注意branch对象定义了必不可少的write()方法，因此可以保存到tree对象的branches数组。tree对象和branch对象都定义了write()和add()方法，所以这两个方法都是多态性的。下面是branch对象的add()和write()方法的具体实现：
function addLeaf(leaf){

this.leaves[this.leaves.length] = leaf;

}
function writeBranch(){

var branchString =

'< span class="branch" ' + onClick="showBranch(\'' + this.id + '\')"';

branchString += '>< img src="替换webdesign.chinaitlab.com/javascript/closed.gif" id="I' + this.id + '">' + this.text;

branchString += '< /span>';

branchString += '< span class="leaf" id="';

branchString += this.id + '">';

var numLeaves = this.leaves.length;

for (var j=0;j< numLeaves;j++) branchString += this.leaves[j].write();

branchString += '< /span>';

return branchString;

}
addLeaf()函数和tree对象的addBranch()函数相似，它把通过参数传入的对象加入到leaves数组的末尾。
writeBranch()方法首先构造出显示分支所需的HTML字符串，然后通过循环遍历leaves数组中的每一个对象，调用数组中每一个对象的write()方法。和branches数组一样，leaves数组也只能保存带有write()方法的对象。
六、leaf对象
leaf对象是三个对象之中最简单的一个：
function leaf(text, link){

this.text = text;

this.link = link;

this.write = writeLeaf;

}
leaf对象的text属性表示要显示的文字，link属性表示链接。如前所述，leaf对象也要定义write()方法，它的实现如下：
function writeLeaf(){

var leafString = '< a href="' + this.link + '">';

leafString += '< img src="替换webdesign.chinaitlab.com/javascript/doc.gif" border="0">';

leafString += this.text;

leafString += '< /a>< br>';

return leafString;

}
writeLeaf()函数的作用就是构造出显示当前节点的HTML字符串。leaf对象不需要实现add()方法，因为它是分支的终结点，不包含子元素。
七、装配树形控件
最后要做的就是在HTML页面中装配树形控件了。构造过程很简单：创建一个tree对象，然后向tree对象添加分支节点和叶节点。构造好整个树形结构之后，调用tree对象的write()方法把树形控件显示出来。下面是一个多层的树形结构，只要把它加入标记内需要显示树形控件的位置即可。注意下面例子中凡是应该加入链接的地方都以“#”替代：
< script language="javascript">

var myTree = new tree();

var branch1 = new branch('branch1','javascript参考书');

var leaf1 = new leaf('前言','#');

var leaf2 = new leaf('绪论','#');

branch1.add(leaf1);

branch1.add(leaf2);

myTree.add(branch1);
var branch2 = new branch('branch2','第一章');

branch2.add(new leaf('第一节','#'));

branch2.add(new leaf('第二节','#'));

branch2.add(new leaf('第三节','#'));

branch1.add(branch2);
var branch3 = new branch('branch2','第二章');

branch3.add(new leaf('第一节','#'));

branch3.add(new leaf('第二节','#'));

branch3.add(new leaf('第三节','#'));

branch1.add(branch3);
myTree.add(new leaf('联系我们','#'));

myTree.write();

< /script>
上述代码的运行效果如图一所示。可以看到，装配树形控件的代码完全符合面向对象的风格，简洁高效。
从本质上看，用面向对象技术构造的树形控件包含一组对象，而且这组对象实现了纯面向对象的语言中称为接口的东西，只不过由于javascript语言本身的限制，接口没有明确定义而已。例如，本文的树形控件由tree、branch、leaf三个对象构成，而且这三个对象都实现了write接口，也就是说，这三个对象都有一个write()方法，不同对象的write()方法根据对象类型的不同提供不同的功能。又如，tree、branch对象实现了add接口，两个对象分别根据自身的需要定义了add()方法的不同行为。可见，多态性是面向对象技术中一个重要的概念，它为构造健壮的、可伸缩的、可重用的代码带来了方便。 http://www.haoxiai.net/wangzhanzhizuo/jiaobenyuyan/30468.html
 

 

 

 

 

 

练习题

1、           定义父类：Shape(形状)类，Shape只有一个属性color，并有相应的getColor和setColor方法。

2、           Shape类有两个子类：Rectangle(矩形)类和Circle(圆形)类，子类继承了父类的color属性和getColor、setColor方法。

3、           为两个子类增加相应的属性和getArea方法，可调用getArea方法获得矩形和圆形的面积。要求：用以上讲过的两种继承方式实现。