首先在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 属性。
这只是一个非常非常简单的例子,不过这里我们可以看到在javascript中的继承,就是通过构造函数的prototype来进行构造的。
下面又有一个问题,那就是想给一个对象在运行时加入属性怎么办,或许你想到该这么做:
可是这样做的话只是mark 对象拥有了一个bonus属性,而不是WorkerBee 拥有这个属性。
如果你想要加一个属性被这个构造函数的所有对象所共享,那么你就必须这么做:
这里的话,就是给整个继承体系加入了一个specialty属性。
现在假设我们有下面的代码(这里已经给各个构造器加入了一些参数:
然后jane的属性的值如下:
[quote]jane.name == "";
jane.dept == "general";
jane.projects == [];
jane.machine == "belau[/quote]
可以发现这时我们无法指定一个继承属性的值,不过没关系,我们可以这样修改我们的程序:
现在我们可以分析下
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中存在那么就返回这个值,否则这个对象就不存在这个值。
比如下面的例子:
可以看到打印出Unknown.
通过上面我们知道当你使用new操作符创建一个对象的时候,js会设置这个对象的__proto__作为构造器函数的prototype ,因此我们能够通过这个来测试prototype chain。
假设我们创建了一个chris 对象:
那么下面的语句都会返回true:
最后要说的是,在js中并没有提供多重继承.
不过我们可以这样模拟实现:
这样做不是很好,这是因为每次new的时候都会分配Hobbyist的空间。
可是如果我们给Hobbyist添加一个属性的话,dennis 对象将不能继承这个新的属性.
我们来比较一下这两种方式 :
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的属性的值如下:
[quote]jane.name == "";
jane.dept == "general";
jane.projects == [];
jane.machine == "belau[/quote]
可以发现这时我们无法指定一个继承属性的值,不过没关系,我们可以这样修改我们的程序:
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 对象将不能继承这个新的属性.