JavaScript中的继承机制

相信很多熟悉像c++,java面向对象语言的朋友们在开始接触javascript时都会有种迷失的感觉。都说javascript是基于对象而不是面向对象，那“基于”与“面向”到底有什么不同，这种机制体现在哪些方面，如何采用它所提供的机制建立面向对象的javascript。针对这些问题，本人查阅资料，整理如下，希望对大家有所帮助。（具备且仅具备基本的javascript知识即可）

1. 通过prototype属性建立面向对象的javascript

每个javascript对象都有一个内置的属性，名为prototype，用它来保存对另一个对象的引用，javascript就是利用这个引用来保存其父对象。所以，javascript通过链接机制来支持继承，这种继承结构更像是一种“has a”而不是“is a”关系。
当通过点记法引用对象的一个函数或属性时，会先从对象本身定义的函数或属性中去找，倘若没有，会从prototype所引用的对象（父对象）中寻找，如果找到则终止，倘若仍然没有找到，再从父对象的父对象中寻找，直到找到，或到达链顶仍然没有，返回undefined。
并且值得注意的是，prototype的引用可以在运行时动态更改，而不需要重新编译（基于文本，解释执行）。虽然对prototype这种继承机制褒贬不一，但其的确可以提供强大并且健壮的多态性。

下面用一个例子简单描述这种继承方式：
基类一：Vehicle

function Vehicle(){}
Vehicle.prototype.wheelCount=4;
Vehicle.prototype.capability=5;
Vehicle.prototype.refuel=function(){
    return "refuel every 300 km";
}
Vehicle.prototype.mainTasks=function(){
    return "for driving";
}

子类一：Car

function Car(){}
/*extends Vehicle*/
Car.prototype=new Vehicle();
/*overwrite below*/
Car.prototype.capability=4;
Car.prototype.refuel=function(){
    return "refuel every 200 km";
}
Car.prototype.mainTasks=function(){
    return "for driving to school, work...";
}

子类二：Bus

function Bus(){}
/*extends Vehicle*/
Bus.prototype=new Vehicle();
/*overwrite below*/
Bus.prototype.wheelCount=8;
Bus.prototype.capability=40;
Bus.prototype.mainTasks=function(){
    return "for serving citizens";
}

使用（分别调用create*生成对象并予以描述）：

function describe(vehicle){
    var des="";
    des = des + "Number of wheel: " + vehicle.wheelCount;
    des = des + "\nCapability: " + vehicle.capability;
    des = des + "\nRefuel(): " + vehicle.refuel();
    des = des + "\nMainTasks(): " + vehicle.mainTasks();
    alert(des);
}
function createVehicle(){
    var vehicle = new Vehicle();
    describe(vehicle);
}
function createCar(){
    var car = new Car();
    describe(car);
}
function createBus(){
    var bus = new Bus();
    describe(bus);
}

2. 隐蔽私有属性，提高安全性

细心的您一定注意到了上面的例子已经涵盖了继承和多态，但铁杆的OO Fans一定不会放过封装，因为这涉及到数据的安全性。针对这一问题，Douglas Crockford(http://www.crockford.com)提出了一种在javascript中创建私有属性的方法，大致如下：
a. 私有属性在构造函数中使用var关键字定义；
b. 私有属性只能由特权函数（privileged function）公用访问，此类函数就是在构造函数中用this关键字定义的函数。外部客户可以通过访问特权函数访问对象的私有属性。（类似于set get方法）

下面同样用例子来描述：
基类二：Vehicle

function Vehicle(){
    var wheelCount = 4;
    var capability = 5;

    this.getWheelCount = function(){
        return wheelCount;
    }
    /*other setter and getter functions omitted*/
    ……
     this.refuel = function(){
        return "refuel every 300 km";
    }
    this.mainTasks=function(){
        return "for driving";
    }
}

注意这里的两个属性都用var关键字所修饰，它们不再是公有，访问与修改它们必须通过调用相应的公有函数完成。倘若尝试直接使用，如vehicle.wheelCount会返回undefined。

3. javascript中基于类的继承

如果你不想使用在1中介绍的基于prototype的继承方法，那么你可以采用本节介绍的，通过一个通用脚本从一个对象继承属性和函数的方式达到你的目标。这里所谓的继承其实是将“父”对象的属性和函数简单复制到“子”对象，从而创建这种继承关系。
由Netscape的Bob Clary提出的这个通用函数如下：

function createInheritance(parent, child){
    var property;
    for(property in parent){
        if(!child[property]){
            child[property] = parent[property];
        }
    }
}

上面代码清晰易懂，再配以使用代码，就不用解释了：

var child = new Child();
createInheritance(new Parent(), child);

这样便可以把父对象中有，而子对象中没有的属性和函数复制到子对象中来。

4. 结合信息隐藏与新的继承方式

这里我们结合使用信息隐藏与3中介绍的新的继承方式重写开头的例子：
基类：同2中“基类二”代码（已实现隐藏）
子类一：Car

function Car(){
    this.refuel=function(){
        return "refuel every 200 km";
    }
    this.mainTasks=function(){
        return "for driving to school, work...";
    }
}

子类二：Bus

function Bus(){
    this.mainTasks=function(){
        return "for serving citizens";
    }
}

注意这里的Car和Bus并没有wheelCount和capability属性，Bus还没有refuel函数。它们需要等待客户端代码赋予这些属性和函数，继承关系由客户端指定。

再来看客户端代码：

function createInheritance(parent, child){
    var property;
    for(property in parent){
        if(!child[property]){
            child[property] = parent[property];
        }
    }
}
function createCar(){
    var car = new Car();
    createInheritance(new Vehicle(), car);
    car.setCapability(5);
    describe(car);
}
function createBus(){
    var bus = new Bus();
    createInheritance(new Vehicle(), bus);
    car.setCapability(40);
    describe(bus);
}
funfunction describe(vehicle){
    var des="";
    des = des + "Number of wheel: " + vehicle.wheelCount;
    des = des + "\nCapability: " + vehicle.capability;
    des = des + "\nRefuel(): " + vehicle.refuel();
    des = des + "\nMainTasks(): " + vehicle.mainTasks();
    alert(des);
}

读到这里相信你已经有所体会javascript基于对象与面向对象的区别。
本文主要从Foundations of Ajax chapter5 整理而来，由于时间关系代码未经调试运行，目的只在于说明其意，还请海涵！