站内搜索: 请输入搜索关键词

当前页面: 开发资料首页 → Javascript 专题 → [同事的原创文章] JavaScript 面向对象编程

[同事的原创文章] JavaScript 面向对象编程

摘要: [同事的原创文章] JavaScript 面向对象编程
<textarea readonly style="border:none;font-family:Courier New;line-height:150%;width:760px;overflow-y:visible">

JavaScript 面向对象编程, 第一部分: 继承

作者：lzlhero
发布：heiyeluren
时间：2005-08-25

我们将向你展示 JavaScript 如何实现面向对象的语言中的: 继承. 同时, 这些例子将向你展示如何实现类的封装. 在此, 我们不会讨论多态实现.

虽然 JavaScript 是脚本语言, 但它所支持的面向对象编程也是非常强大的. 虽然它没有类和实例, 但它有对象, 原型和隐式的继承. 我们将会解释如何模拟继承及其超类与子类之间关系的形式. 原型是理解继承概念的关键, 我们将会教你如何建立原型, 如何检测一个对象是否是另外一个对象的原型, 及其 JavaScript 的模型与 Java 面向对象编程之间的区别. 我们同样会向你展示如何检测对象所包含的各种属性的方法. 在另外一篇文章里, 我还会详细地讲解有关 "原型链 (prototype chain)" 的知识.

本文大量地参考了 Webreference.com 中 "Object-Oriented Programming with JavaScript, Part I: Inheritance" 的内容, 许多内容我进行了详细的测试和再探讨, 以保证内容不会有太大的失误.
原文地址: http://www.webreference.com/js/column79/

面向对象语言的特点

面向对象设计是基于以下 3 个主要原理的: 封装, 继承和多态. 说某种程序语言是支持 OO (面向对象) 设计的, 只有在它的语法中支持以上 3 个概念才可以这么说. 这种语言应该为你提供某些方法, 以使你能很轻松地定义和使用这些范例. 封装涉及到了将某个对象变成一个 "黑盒子"的概念. 当你使用某个对象时, 你不用知道它内部是如何工作的, 你也不必理解对象是如何工作的. 这个对象只需将它绝对有用的信息以接口方式提供出来. 此对象应该给你提供友好的接口, 来让你可以使用其有限的属性集和方法集. 封装还有一层意思, 那就是说某个对象包含了它需要的每一样东西, 这包括数据和对于它的操作. 封装的概念非常的强大, 因为它允许将一个大的软件项目有效地分配给每个开发人员, 对于团队中的每个人, 他们只需要关注自己所实现的对象, 而不需要太多地关注于别人的实现. 开发项目中的开销使得开发团队中成员与接口的数量按指数级别增长. 封装是自 "软件危机" 以来最受欢迎的 OO 设计理念.

软件的复用是 OO 设计思想中另外一个重要的特点. 在软件体系中实现此思想的主要方法就是继承. 类就是定义对象的功能. 超类是某个新类, 或者说是子类被建立的来源类. 一个子类从它的超类中继承了所的方法和属性. 实际上, 所有的子类都是被自动地生成的, 因此节省了大量的工作. 你不需要一个一个地定义这些子类. 当然, 你可以重载那些继承下来的方法和属性. 事实上, 谁也没有指出哪个子类要建立得和其超类一模一样, 除非你没有重载任何的属性和方法.

多态可能是这个 3 个概念中最复杂的一个了. 其本质上是说, 每个对象都可以处理各种不同的数据类型. 你不必为处理不同的数据类型而建立不同的类. 其典型的例子就是画图的类, 你不必为实现画圆, 画矩形, 画椭圆而编写不同的类. 你可以建立一个足够聪明的类来调用特定的方法来操作特定的形状.

通过函数实现继承

虽然 JavaScript 不支持显示继承操作符, 但你可以通过其实方式实现隐式继承. 对于实现类的继承, 有 2 种比较常用的方式. 第一种将某个类定义成子类的方法是, 通过在负责定义子类函数的内部调用超类的构造函数. 看下面的示例:

// 超类构造函数
function superClass() {
this.bye = superBye;
this.hello = superHello;
}

// 子类构造函数
function subClass() {
this.inheritFrom = superClass;
this.inheritFrom();
this.bye = subBye;
}

function superHello() {
return "Hello from superClass";
}

function superBye() {
return "Bye from superClass";
}

function subBye() {
return "Bye from subClass";
}

// 测试构造特性的函数
function printSub() {
var newClass = new subClass();
alert(newClass.bye());
alert(newClass.hello());
}

当你运行上面的 printSub 函数时, 它会依次执行 subBuy 和 superHello 函数. 我们可以看到, bye 和 hello 方法最先在 superClass 中被定义了. 然而, 在 subClass 中, bye 方法又被重载了, subClass 构造函数头两行的功能只是做了一个简单的原始的继承操作, 但它是通过显示执行 inheritFrom 方法来完成的继承操作. 继承的过程先是将 superClass 的对象原型赋给 subClass 下的 inheritFrom 方法, 然后在执行完 superClass 的构造函数后, superClass 的属性就被自动地加到了 subClass 的属性列表中.这主要是由于在 subClass 中通过 this 来调用的 inheritFrom (也就是 superClass) 构造函数造成的, 通过此种方式调用 superClass 构造函数时, JavaScript 解释器会把 superClass 中的 this 与 subClass 中的 this 理解成位于同一个作用域下的 this 关键字, 所以就产生了继承的效果.

另外, 需要说明的是, 对于任何一个实例化的对象, 你任意地为它添加属性或方法, 如下所示:

var newClass = new subClass();
newClass.addprop = "added property to instance object";

很明显, 通过此种方式添加的属性和方法只对当前实例化对象有效, 不会影响所有的同类型对象实例. 无疑, 它是你创造的一个独一无二的对象实例.

通过原型实现继承

第二种, 也是更强大的方法是通过建立一个超类对象, 然后将其赋值给子类对象的 prototype 属性, 以此方式来建立子类的继承. 假设我们的超类是 superClass, 子类是 subClass. 其 prototype 的赋值格式如下:

subClass.prototype = new superClass;

对于原型继承的实现方式, 让我们刚前面的代码改写一下, 示例如下:

// 超类构造函数
function superClass() {
this.bye = superBye;
this.hello = superHello;
}

// 子类构造函数
function subClass() {
this.bye = subBye;
}
subClass.prototype = new superClass;

function superHello() {
return "Hello from superClass";
}

function superBye() {
return "Bye from superClass";
}

function subBye() {
return "Bye from subClass";
}

// 测试构造特性的函数
function printSub() {
var newClass = new subClass();
alert(newClass.bye());
alert(newClass.hello());
}

我们可以看到, 除了将前面第一种继承方式中 subClass 中的前 2 行内容, 换成函数外的 prototype 赋值语句之外, 没有其它任何的变化, 但代码的执行效果和前面是一样的.

为已经建立的对象添加属性

通过原型实现的继承比通过函数实现的继承更好, 因为它支持动态继承. 你可以在构造函数已经完成之后, 再通过 prototype 属性定义超类的其它方法和属性, 并且其下的子类对象会自动地获得新的方法和属性. 下面是示例, 你可以看到它的效果.

function superClass() {
this.bye = superBye;
this.hello = superHello;
}

function subClass() {
this.bye = subBye;
}
subClass.prototype = new superClass;

function superHello() {
return "Hello from superClass";
}

function superBye() {
return "Bye from superClass";
}

function subBye() {
return "Bye from subClass";
}

var newClass = new subClass();

/*****************************/
// 动态添加的 blessyou 属性
superClass.prototype.blessyou = superBlessyou;

function superBlessyou() {
return "Bless You from SuperClass";
}
/*****************************/

function printSub() {
alert(newClass.bye());
alert(newClass.hello());
alert(newClass.blessyou());
}

这就是我们经常看到的为内部对象, 如 String, Math 等再添加其它属性和方法的技巧. 对于任何的内部对象和自定义对象, 你都也可以通过 prototype 来重载其下的属性和方法. 那么在调用执行时, 它将调用你所定义的方法和属性. 下面是示例:

// 为内部 String 对象添加方法
String.prototype.myMethod = function(){
return "my define method";
}

// 为内部 String 对象重载方法
String.prototype.toString = function(){
return "my define toString method";
}

var myObj = new String("foo");

alert(myObj.myMethod());
alert(myObj);
alert("foo".toString());

另外需要注意的是, 所有 JavaScript 内部对的 prototype 属性都是只读的. 你可以像上面那样为内部对象的原型添加或重载属性和方法，但不能更改该内部对象的 prototype 原型. 然而, 自定义对象可以被赋给新的原型. 也就是说, 像下面这样做是没有意思的.

function Employee() {
this.dept = "HR";
this.manager = "John Johnson";
}

String.prototype = new Employee;

var myString = new String("foo");

上面的程序在运行之后不会报错, 但显然, 如果你调用 myString.dept 将会得到一个非定义的值.

另外, 一个经常使用的是 prototype 下的 isPrototypeOf() 方法, 它主要用来判断指定对象是否存在于另一个对象的原型链中. 语法如下:

object1.prototype.isPrototypeOf(0bject2);

上面的格式是用来判断 Object2 是否出现 Object1 的原型链中. 示例如下:

function Person() {
this.name = "Rob Roberson";
this.age = 31;
}

function Employee() {
this.dept = "HR";
this.manager = "John Johnson";
}

Employee.prototype = new Person();

var Ken = new Employee();

当执行 Employee.prototype.isPrototypeOf(Ken), Person.prototype.isPrototypeOf(Ken) 和 Object.prototype.isPrototypeOf(Ken) 时, 结果都会返回 true.

用于 Netscape 下的特定继承检测

在 Netscape 浏览器 4.x 到 6, 及其 Mozilla 系列浏览中, JavaScript 将对象间的原型关系存储在一个特殊的内部属性对象中, __proto__ (前后是 2 个下划线). 下面是一个示例:

function Shape() {
this.borderWidth = 5;
}

function Square() {
this.edge = 12;
}

Square.prototype = new Shape;

myPicture = new Square;

alert(myPicture.__proto__);
alert(myPicture.borderWidth);

由于脚本执行过 Square.prototype = new Shape 语句, 所以 myPicture 具有了一个指向 Shape 对象的内部属性 __proto__. 在脚本的执行过程中, 当要获取对象的某个属性值, 并且此对象是通过原型赋值而建立的某个对象, 在自身并没有对某个属性进行定义时, JavaScript 解析器会查看它的 __proto__ 属性对象, 也就它的原型对象, 然后枚举其原型中的所有属性, 而得出的结果要么是有这个属性, 要么是没有这个属性. 如果没有此属性, 再枚举原型对象下面的原型对象, 直到此过程真正的结束. 而所有的这些 JavaScript 引擎内部的操作, 我们是不会知道的, 下面的内容就是对这个问题的解释.

其实, 对于所有的自定义对象, 无论它有没有使用过 prototype 赋值操作, 它都具有一个 __proto__ 内部对象. 而如果某个对象是通过多层 prototype "继承" 来的, 所有的 "继承" 而来的属性却可以通过简单的一层循环遍历出来, 而不需要使用什么递归算法, 因为 JavaScript 引擎自动给我们做了. 示例如下:

function Shape() {
this.borderWidth = 5;
}

function Square() {
this.edge = 12;
}

function RoundSquare()
{
this.radio = 0.5;
}

Square.prototype = new Shape;
RoundSquare.prototype = new Square;

var myPicture = new RoundSquare;

for (property in myPicture.__proto__) {
alert(property);
}

我们或者还可以通过更改后面的循环, 来遍历某个子类对象继承来的所有属性, 如下:

for (property in RoundSquare.prototype) {
alert(property);
}

如果你不怕麻烦, 我们甚至还可以通过级连的方式, 取出其构造函数中定义的原始属性值.

alert(myPicture.__proto__.__proto__.borderWidth);

无论你是否修改过此属性值, 通过上面语句所取出的属性值都是原始定义值. 让我们沿着这个思路再往下看, 下面的代码涉及到另外一个问题, 这个问题和原型链 (prototype chain) 有关. 代码如下:

function State() {
}

function City() {
}
City.prototype = new State;

function Street() {
}

Street.prototype = new City;

var UniversityAvenue = new Street();

function tryIt() {
alert(UniversityAvenue.__proto__== Street.prototype);
alert(UniversityAvenue.__proto__.__proto__==
City.prototype);
alert(UniversityAvenue.__proto__.__proto__.__proto__
== State.prototype);
alert(UniversityAvenue.__proto__.__proto__.__proto__.
__proto__== Object.prototype);
alert(UniversityAvenue.__proto__.__proto__.__proto__.
__proto__.__proto__== null);
}

当执行 tryIt 函数时, 所有的显示均为 true. 也就是说, 子类对象的 prototype.__proto__ 总是等于超类对象的 prototype 属性; 超类对象的 prototype.__proto__ 总是等于 Object.prototype; Object.prototype.__proto__ 总是为 null; 而实例对象的 __proto__ 总是等于其类对象的 prototype, 这就是为什么任何自定义对象都具有 __proto__ 属性的原因. 对于上面的叙述, 其对应的代码如下:

Street.prototype.__proto__ == City.prototype // true
State.prototype.__proto__ == Object.prototype // true
Object.prototype.__proto__ == null // true
UniversityAvenue.__proto__ == Street.prototype // true

模拟实现 instanceOf 函数

根据上一节的内容, 我们了解了有关 Netscape 所支持的 __proto__ 特性的内容. 这一节, 我们将利用此特性来创建自己的实例对象检测函数.

许多时候, 我们都需要判断某个对象是否是由某个类来定义的, 在其它的语言里, 你可以通过 instanceOf 函数来实现此判断. 在 JavaScript 中同样提供了一个 instanceof 运行符, 而在 __proto__ 的基础上, 我们完全可以自己定义一个同样的函数, 虽然这看上去是在重复劳动, 但有助于我们更深刻地了解有关 __proto__ 的知识. 下面的代码只是用来说明功能, 在实际的应用中, 你不需要重复定义 instanceOf 函数, 使用 instanceof 运算符即可.

function instanceOf(object, constructorFunction) {
while (object != null) {
if (object == constructorFunction.prototype)
{return true}
object = object.__proto__;
}
return false;
}
function State() {
}

function City() {
}
City.prototype = new State;

function Street() {
}

Street.prototype = new City;

var UniversityAvenue = new Street();
function demo() {
alert("instanceOf(UniversityAvenue, Street) is " +
instanceOf(UniversityAvenue, Street));
alert("instanceOf(UniversityAvenue, City) is " +
instanceOf(UniversityAvenue, City));
alert("instanceOf(UniversityAvenue, State) is " +
instanceOf(UniversityAvenue, State));
}

你会看到所有的运行结果全部为 true, 其原理和上一节的级连判断相等如出一辙. 实际证明, 它的运行结果和 instanceof 运行符的运行结果是一致的.

你可以通过 constructor 属性来检测任意对象的超类, 此属性返回通过 new 运算符创建新对象时所调用的构造函数, 返回值是 Function 对象类型. 因为 Object 内部对象是支持 constructor 属性的, 并且有的对象 (包括内部对象和自定义对象) 都是由 Object 继承而来的, 所以所有的对象都支持此属性. 让我们再看一下下面的例子:

function Employee() {
this.dept = "HR";
this.manager = "John Johnson";
}

function printProp() {
var Ken = new Employee();
alert(Ken.constructor);
}

调用完 printProp 函数之后, 你会看到弹出框中显示的是 Employee 函数的定义文本, 其实 Ken.constructor 的返回值本身是 Function 对象类型, 而在 alert 时被隐含地调用了 toString 方法. 对于类对象本身, 你同样可以调用 prototype.constructor 来取出其构造函数.

对象的分类和打印

JavaScript 支持 3 种主要类型的对象: 内部对象, 宿主对象, 自定义对象, 可能还有特殊的外部对象, 如: ActiveX 对象或 XPCOM 对象. 内部对象被 JavaScript 语言本身所支持, 如: Object, Math, Number 对象等. 所有的内部对象的共同特点是以大写字母开头, 并且它们是大小写敏感的. 如果你想使用数学常量 PI, 必须写成 Math.PI, 你如果写成 math.PI, JavaScript 会显示错误. 宿主对象是被浏览器支持的, 目的是为了能和被浏览的文档可以交互, 如: document, window 和 frames. 宿主对象的特点是所有对象全部以小写字母开头. 因为 JavaScript 本身就是大小写敏感的, 所以你同样不能将大小写搞混. 剩下要说的就只是自定义对象了, 你可以随便将你的对象定义成小写或大小写, 但是一定要符合基本的命名规范. 如下所示, 这就是一个自定义对象:

function employee() {
this.dept = "HR";
this.manager = "John Johnson";
}

function printProp() {
var ken = new Employee();
for (property in ken) {
alert(property);
}
}

前面我们已经提到过, 所有的内部对象和自定义对象都是从 Object 对象继承而来的, 它是所有对象的超类对象. 你可建立一个 Object 对象的实例. 如下:

var myObject = new Object();

Object 类型的对象有许多的属性和方法, 你可以查看相关的手册. 上面只是定义了一个最简单的空对象, 你还可以为 Object 构造函数传入参数, 它会返回相应类型值的实例化对象. 记住, 返回值的类型是某种对象类型的 (如: String, Number 或 Object). 这种方式和直接通过赋值字符串或数值常量不同, 主要表示在类型方面. 如下所示:

var myObject = new Object("foo"); // 返回值类型为 object
var myObject = new String("foo"); // 返回值类型为 object, 效果同上
与
var myObject = "foo"; // 返回值类型为 string

你可以从调试器的 type 列中看出这个细微的差别, 它是简单类型与对象类型之间的区别. 但是, 你通过 alert 调用是看出不这些内部差别的, 因为在调用 alert 的过程中, 所有的对象类型值都会被自动调用 toString 方法进行字符串类型转换, 转换规则在 JavaScript 手册中有说明. 如果你 alert 的是某个自定义对象, 并且它没有定义 toString 方法, 那么它的返回值将为 "[object Object]". 对于 Math 对象, 当你查看其 Math.constructor 属性时, 你会得到一个不同于其它内部对象的内容为 "function Object()..." 的对象构造函数, 这与其它对象返回 "function Function()..." 的构造函数很不相同. 原因很简单, 因为 Math 对象是不能通过 new 运算符进行创建的.

另外, 如果传入 Object 构造函数中的值是一个对象, 它将原封不动地将该对象返回. 记住, 此操作只是一个引用, 而不是复制.

请求对象的属性

在前面的示例代码中, 已经出现过以循环方式枚举对象属性的示例. 其实, 通过 for...in 语句, 无论是任何对象和数组, 其下的元素, 属性和方法都可以遍历出来. 示例如下:

function employee() {
this.dept = "HR";
this.manager = "John Johnson";
}

function printProp() {
var ken = new employee();
for (property in ken) {
alert(property + " : " + ken[property]);
}
}

在遍历测试过程中, 你会发现, 对于自定义对象和宿主对象一般都可以枚举出其下的属性, 而对于内部对象, 几乎没有什么属性可以遍历出来, 为什么要说几乎呢? 因为对于 Mozilla 内核的浏览和 IE 内核的浏览器, 其 JavaScript 引擎有不同, Mozilla 下可以枚举出部分内容, 而枚举的原则不得而知.

对于每一个对象, 你还可以使用 hasOwnProperty 方法来检测其是否具有某个属性或方法. 由于 hasOwnProperty 是 Object 对象下的方法, 因此所有的对象都具有此方法. 但是, 需要注意的是, 此方法只能检测通过 this 关键字定义的成员, 如果某个成员是通过原型链定义的, 那么此方法将返回 false. 也就是说, 通过 prototype 继承来的属性和方法, 及其通过 prototype 定义的属性和方法, 都是不能通过 hasOwnProperty 来进行检测的. 由此, 我们可以看出, 通过 this关键字定义的属性和方法是同对象本身处于同一个地址空间内的; 而通过 prototype 定义的属性和方法, 是通过所谓的 "原型链" 进行管理的, 其下的的属性和方法不位于同一个地址空间之间, 当其调用这种属性或方法时, 必须通过 "链表" 才能索引到其下的某个属性或方法. 也就说, 调用以原型方式定义的属性和方法会有一个类似于链表的 "回溯" 操作.

和 hasOwnProperty 差不多, 对于对象中的每个属性, 我们还可以通过 propertyIsEnumerable 来测试它是否可以被枚举出来. 如下所示:

function Employee1() {
this.dept = "HR";
this.manager = "John Johnson";
this.month = new Array("jan", "feb", "mar");
}

var Ken = new Employee1();

Ken.month.propertyIsEnumerable(0);

我们可以看到, 其语法是 propertyIsEnumerable 后跟数组的元素索引或对象中的属性名称. 同样, 对于原型链中的属性或方法它是不予考虑的, 结果当然是返回 false.

对于 JavaScript 和 Java 的比较

与 Java 这种基于类的语言不同, JavaScript 是一种基于原型的语言. 这种特点影响着每一个方面. 如术语 instance 在基于类的语言中有着特殊的意义, 它表示某个实例是隶属于某个特殊类的独立个体, 是对类定义的真实实现; 而在 JavaScript 中, 术语 instance 没有这个意思, 因为在它的语法里面, 类和实例是没有区别的. 虽然, 实例可以用来说明某个对象是使用某个特殊的构造函数生成的. 如下所示:

function superClass() {
this.bye = superBye;
this.hello = superHello;
}

function subClass() {
this.bye = subBye;
}
subClass.prototype = new superClass;

function superHello() {
return "Hello from superClass";
}

function superBye() {
return "Bye from superClass";
}

function subBye() {
return "Bye from subClass";
}

var newClass = new subClass();

newClass 是 subClass 的实例, 它是通过 subClass 的构造函数生成的. 而如果使用基于类的语言呢, 如下所示是 Java 的等价实现.

public class superClass {
public superClass () {
this.bye = superBye;
this.hello = superHello;
}
}
public class subClass extends superClass {
public subClass () {
this.bye = subBye;
}
}

结束语

我们在上面的几节中, 详细地说明了有关 JavaScipt 中的面向对象实现, 或者只能说是模拟实现. 在此期间向你展示了实现方法. 并且阐述了有关如何检测对象之间关系的方法, 如何打印属性和测试某个特定的属性, 还做了一个 JavaScript 和 Java 的简单比较. 但这显然是不够的, 因而, JavaScript 的面向对象编程是非常多样化的, 格式也非常繁杂. 我打算在后面的内容里, 再总结一下有问封装的格式问题, 着重说明与对象方法有关的内容和实现, 同时还有上面提到的原型链 (prototype chain) 问题.


申明：转载请注明来自 http://blog.csdn.net/heiyeshuwu
</textarea>
↑返回目录
前一篇: Javascript所有对象的属性的获取
后一篇: ASP.NET与JavaScript联合操作之一 选择DataGrid中的CheckBox控件后该行背景变色