javascript中的继承

首先在js中的继承是Prototype-based 。不像一般的oo语言，比如java,c++是Class-based 的。

我们来比较一下这两种方式 :

1 在Class-based 中的类和实例是不同的实体，而在Prototype-based中所有对象都是实例。

2 在Class-based中定义一个类使用class关键字来定义。实例化一个对象，使用构造方法。而在Prototype-based，定义和创建一个对象都使用构造器函数。

3 在Class-based中构造一个继承，需要定义一个类，然后作为存在的类的子类。而在Prototype-based中，则是需要标记这个对象作为构造器函数的prototype 。

4 在Class-based中继承属性通过class chain。而在Prototype-based则是通过prototype chain。

下来我们来看一个我们需要实现的继承体系(后面有图)：

Manager 和WorkerBee 继承Employee ，而SalesPerson 和Engineer继承WorkerBee.

其中，Employee有一个name 属性，Manager有一个reports 属性，SalesPerson 有一个quota 属性，Engineer有一个machine 属性。

function Employee () {
this.name = "";
this.dept = "general";
} 

function Manager () {
this.reports = [];
}
Manager.prototype = new Employee; 
function WorkerBee () {
this.projects = [];
}
WorkerBee.prototype = new Employee; 
function SalesPerson () {
   this.dept = "sales";
   this.quota = 100;
}
SalesPerson.prototype = new WorkerBee; 
function Engineer () {
   this.dept = "engineering";
   this.machine = "";
}
Engineer.prototype = new WorkerBee; 

这只是一个非常非常简单的例子，不过这里我们可以看到在javascript中的继承，就是通过构造函数的prototype来进行构造的。



下面又有一个问题，那就是想给一个对象在运行时加入属性怎么办，或许你想到该这么做：

mark.bonus = 3000

可是这样做的话只是mark 对象拥有了一个bonus属性，而不是WorkerBee 拥有这个属性。

如果你想要加一个属性被这个构造函数的所有对象所共享，那么你就必须这么做：

Employee.prototype.specialty = "none"; 

这里的话，就是给整个继承体系加入了一个specialty属性。

现在假设我们有下面的代码(这里已经给各个构造器加入了一些参数：

jane = new Engineer("belau"); 

然后jane的属性的值如下：

引用

jane.name == "";
jane.dept == "general";
jane.projects == [];
jane.machine == "belau

可以发现这时我们无法指定一个继承属性的值，不过没关系，我们可以这样修改我们的程序：

function Employee (name, dept) {
this.name = name || "";
this.dept = dept || "general";
}

function Engineer (name, projs, mach) {
this.base = WorkerBee;
this.base(name, "engineering", projs);
this.machine = mach || "";
} 

function WorkerBee (name,dept,projs) {
this.base=Employee;
this.base(name,dept);
this.projects = projs || [];
}
WorkerBee.prototype = new Employee; 

现在我们可以分析下
jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
调用这句时，都发生了什么:

1  当js看见new操作符，它创建一个新的普通对象,并且设置它的__proto__ 属性为Engineer.prototype。

2 new 操作符传递这个新的对象作为Engineer 构造器的this的值。

其实最主要做的事就是上面的两件，剩下的都是很简单的函数调用.



我们来看一下在继承中，假设你要存取一个对象的一个属性时会发生什么：

1 首先检测这个值是否在本地存在。

2 如果不存在本地变量，那么就检测prototype chain （使用__proto__ ）。

3 如果属性在prototype chain中存在那么就返回这个值，否则这个对象就不存在这个值。

比如下面的例子：

function Employee () {
   this.dept = "general";
}
Employee.prototype.name = ""; 

function WorkerBee () {
this.projects = [];
}
WorkerBee.prototype = new Employee; 

amy = new WorkerBee; 

Employee.prototype.name = "Unknown"; 

可以看到打印出Unknown.

通过上面我们知道当你使用new操作符创建一个对象的时候，js会设置这个对象的__proto__作为构造器函数的prototype ，因此我们能够通过这个来测试prototype chain。

假设我们创建了一个chris 对象：

chris = new Engineer("Pigman, Chris", ["jsd"], "fiji");

那么下面的语句都会返回true:

chris.__proto__ == Engineer.prototype;
chris.__proto__.__proto__ == WorkerBee.prototype;
chris.__proto__.__proto__.__proto__ == Employee.prototype;
chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;

最后要说的是，在js中并没有提供多重继承.

不过我们可以这样模拟实现：

function Hobbyist (hobby) {
   this.hobby = hobby || "scuba";
} 

function Engineer (name, projs, mach, hobby) {
   this.base1 = WorkerBee;
   this.base1(name, "engineering", projs);
   this.base2 = Hobbyist;
   this.base2(hobby);
   this.machine = mach || "";
}
Engineer.prototype = new WorkerBee; 

dennis = new Engineer("Doe, Dennis", ["collabra"], "hugo") 

这样做不是很好，这是因为每次new的时候都会分配Hobbyist的空间。

可是如果我们给Hobbyist添加一个属性的话，dennis 对象将不能继承这个新的属性.

评论

3 楼 simohayha 2008-02-28  

恩，那里描述不清，我改一下...

2 楼 笨笨狗 2008-02-28  

所以，并不像楼主所说：
“最后设置这个对象的__proto__ 为WorkerBee.prototype”
这样的话无法解释在构造器中调用原型链方法，比如：
function Test(){
    this.init();//此时如果还未设置__proto__，必然出错
}
Test.prototype.init = function(){}

1 楼 笨笨狗 2008-02-28  

new一个function的时候
var obj = new Test(argsList)
可以这么理解：
1、首先，创建一个空对象tmp
tmp = {}
2、然后，将这个tmp的__proto__指向Test.prototype。不过__proto__貌似只有ff支持？其他浏览器内部应该也是差不多，反正就是要让这个对象能引用构造函数的原型方法
tmp.__proto__ = Test.prototype
3、最后，将tmp作为context执行构造函数，也就是
Test.apply(tmp,argsList)