JavaScript面向对象编程

 

许多Web开发人员对JavaScript的了解仅仅停留在简单的表单数据操作，以及浏览器DOM对象的简单操作上，以达到一些数据验证和动态页面的效果。所以当要实现的功能比较复杂时，写出的代码就显得凌乱并且难以维护，更不用说实现一个基于JavaScript的UI框架了。事实上，JavaScript 提供了完善的机制来实现面向对象的开发思想。

本章假设读者已经了解面向对象思想的基本概念，熟悉对象、类、继承等基本术语。以此为基础，将重点介绍如何在 JavaScript 中使用面向对象的思想，包括实现的原理、机制和技巧。我们将使用JavaScript来实现以下面向对象特性：

¾ 对象、类；

¾ 封装；

¾ 多态；

¾ 继承。

1．对象

在JavaScript中创建一个对象非常简单，我们可以使用内建的Object对象来创建一个对象：

var myObj=new Object;    //创建一个名为myObj的对象

myObj.name='sam';         //给myObj对象添加一个name属性，其值为sam

myObj.age=28;             //给myObj对象添加一个age属性，其值为28

我们也可以使用JSON（JavaScript Object Notation）^[1] 来创建一个对象：

var myObj={name:’sam’,age:28}

//创建一个包含name属性值为sam，age属性值为28的对象

2．类

JavaScript不同于Java、C++、C#等面向对象语言，它通过构造函数和原型对象（prototype）来实现类的创建。为了创建一个类，还需要创建一个构造函数：

function Person(name,age){

this.name=name;

this.age=age;

}

这样我们就创建了一个构造函数（类），它包含两个属性：name和age。

var sam=new Person('sam',28);   //创建一个Person对象，name为sam，age为28

我们可以通过“.”运算符来访问它的属性：

alert(sam.name);   //输出结果为sam

var bob=new Person('bob',30);   //创建一个Person对象，name为bob，age为30

alert(bob.age);   //输出结果为30

细心的读者可能会发现，到目前为止，我们通过函数创建的对象只是封装了数据成员，并没有封装相应的方法。下面我们将在Person类中添加一个方法：

function Person(name,age){

this.name=name;

this.age=age;

this.introduceSelf=function(){

alert('I am '+name+' , I am '+age +' years old.');

}

}

var sam=new Person('sam',28);

sam.introduceSelf() //输出结果为：I am sam，I am 28 years old

var bob=new Person('bob',30);

bob.introduceSelf() //输出结果为：I am bob，I am 30 years old

但是上面这种添加方法的方式不是很好。因为introduceSelf函数对于所有Person的实例来说，都是一样的，我们不希望在实例级别加上一个对于所有实例来说都一样的方法。这里我们要引入原型对象（prototype）的介绍。

每个JavaScript构造函数都有一个内部引用指向另一个称为原型对象（prototype）的对象。对于这个构造函数所产生的对象实例，该构造函数的原型对象所有属性对于它们来说都是可见的，并且是共享的。所以有时候也称该原型对象是这些实例的原型对象。对于这些实例，对原型对象的属性的访问方式和对自身的属性的访问方式是一致的。下面我们举例说明。

首先定义一个构造函数（类）：

function Person(name,age){

this.name=name;

this.age=age;

}

然后，在函数的原型对象中添加一个属性kind：

Person.prototype.kind='animal';

接着创建两个Person的实例：

var p1=new Person('sam',28);

var p2=new Person('bob',30);

访问这两个实例的kind属性：

alert(p1.kind); //输出animal

alert(p2.kind); //输出animal

通过上面的例子，我们可以看到函数的原型对象对于所有实例来说是共享的，并且属性的访问方式和实例本身的属性的访问方式完全一致。

如果修改这个属性，会怎么样呢？让我们接着往下看：

p1.kind='male';

alert(p1.kind); //输出male

alert(p2.kind); //输出animal

这是怎么回事呢？原来对于原型对象的操作，读写是不对称的。通过实例对属性名的引用并不能修改原型对象属性的值，它只是在实例本身添加了一个和原型对象属性名一样的属性，并将该值赋给自身的那个属性。而对属性的访问，JavaScript首先会从对象本身开始查找，如果找到则返回该属性的值；如果没有找到，才会在其原型对象中查找。所以对于p1,当执行了p1.kind='male'之后，p1本身就有了一个kind属性，所以当再次访问p1的kind属性时，就会直接返回p1本身kind属性值“male”，而不是其原型对象里的值“animal”。

在了解了原型对象之后，我们再回到原来的例子。我们需要在构造函数Person的原型对象上添加一个方法，这样这个方法就会被所有的Person对象共享：

Person.prototype. introduceSelf=function(){

alert('I am '+this.name+' , I am '+this.age +' years old.');

}

var p1=new Person('sam',28);

var p2=new Person('bob',30);

p1.introduceSelf() //输出结果为：I am sam，I am 28 years old

p2.introduceSelf() //输出结果为：I am bob，I am 30 years old

3．多态

JavaScript允许我们将任意一个函数（function）分配给对象的一个属性。当使用 obj.function 的语法调用函数时，将把函数原来定义this 的指向当前这个对象obj（就像它在构造函数中的那样）。所以，我们可以通过定义有相同名字的方法的对象，来简单地实现多态性（polymorphism）。

//定义一个dogSpeek函数

function dogSpeek(){

alert('I am '+this.name);

}

//定义一个Dog类

function Dog(){

this.name='dog';

this.speek= dogSpeek;//将dogSpeek 函数赋给Dog的speek属性

}

//定义一个catSpeek函数

function catSpeek(){

alert('I am '+this.name);

}

//定义一个Cat类

function Cat(){

this.name='cat';

this.speek= catSpeek; //将catSpeek ()函数赋给Cat的speek属性

}

var dog=new Dog;

dog.speek();//输出“I am dog”

var cat=new Cat;

cat.speek();//输出“I am cat”

对于同一个方法，不同类的对象就展现出不同的行为，这样就实现了多态性。

4．继承

继承是面向对象开发的又一个重要概念，在JavaScript中通过原型链机制来实现类的继承，当然也可以通过将一个类的prototype拷贝到另外一个类来实现继承。

function Base(x)                      // 定义一个父类

{

this.x = x;

}

Base.prototype.doIt = function()  //在父类中添加一个方法

{

this.x += 1;

}

function Sub(x,y)               //定义一个子类

{

Base.call(this,x);              // 调用父类的构造函数（非必需）

this.y = y;

}

Sub.prototype = new Base;   // 将Sub的原型对象修改为Base的实例，这是实现继承的关键一步

//因为Sub类的原型对象是由构造函数Base产生的，所以它的constructor属性是Base，

//我们需要把它改成Sub

Sub.prototype.constructor=Sub;

var obj = new  Sub（1，1）;

 alert(obj.x);    //输出1

alert(obj.y);     //输出1

obj.doIt();   

alert(obj.x);     //输出2

从上面的例子我们可以看到，Sub类的实例obj继承了Base类的属性x，以及方法doIt。

我们还可以通过拷贝父类中的方法来实现继承。

function Inherit(superclass, subclass) {

var from = superclass.prototype;  // 父类的原型对象

var to = subclass.prototype;       // 子类的原型对象

for(m in from) {  //搜索原型对象中的所有属性

if (typeof from[m] != "function") continue; // 忽略非函数

to[m] = from[m];  // 拷贝方法

}

}

下面我们用这个函数来实现继承。

function Base(x){

this.x=x;

}

Base.prototype.doIt=function(){

this.x+=1;

}

function Sub(x,y){

Base.call(this,x);

this.y=y;

}

Inherit(Base,Sub);

var obj = new  Sub（1，1）;

 alert(obj.x);    //输出1

alert(obj.y);     //输出1

obj.doIt();   

alert(obj.x);     //输出2

通过上面的方式，同样实现了继承。对于第二种方式，说是继承并不严格，因为它只是借用Base类中的方法，它们之间没有真正的继承关系。我们可以使用instanceof方法来证明这一点。

对于第一种方式：

alert(obj instanceof  Base); //输出true，说明Sub类对象是一个Base类的实例

对于第二种方式：

alert(obj instanceof  Base); //输出false，说明Sub类对象不是一个Base类的实例

总结：JavaScript不同于Java、C++、C#等基于类的面向对象语言，它是基于原型对象的面向对象语言。它通过原型对象和构造函数可以很好地实现面向对象的开发，这为使用JavaScript开发大型的、复杂的程序提供了可能。

 

 

总结：一、封装   创建对象就可以

         二、 类     创建一个构造函数 通过new可以实例化对象  类的属性等于一个方法可以定义方法  类的原型属性定义为一个方法也可以定义类的方法

        三、 多态  用不同函数赋值给多个类的相同的属性名上作为方法 就可以用   类的实例.方法名来调用不同的实际方法实现多态.

         四、 继承 方法一、子类的原型赋值为父类的实例对象 ，并且把构造器指向子类；

                        方法二、复制原型 通过一个额外方法转换原型