首先在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 对象将不能继承这个新的属性.
- 描述: A simple object hierarchy
- 大小: 225.6 KB
分享到:
相关推荐
在JavaScript中继承是一个非常复杂的话题,比其他任何面向对象的语言中的继承都复杂得多。在大多数其他面向对象语言中,继承一个类只需使用一个关键字即可。与它们不同,在JavaScript中要想达到传承公用成员的目的,...
主要介绍了JavaScript中继承用法,以实例形式较为详细的分析了javascript实现继承的相关技巧,需要的朋友可以参考下
本文实例讲述了JavaScript中继承原理与用法。分享给大家供大家参考,具体如下: 正统的面相对象的语言都会提供extend之类的方法用于出来类的继承,但Javascript并不提供extend方法,在Javascript中使用继承需要用点...
JavaScript 中继承的实现 怎么建? git clone 这个仓库 切换到新目录 npm install npm run build 用法 var Person = BaseObject . extend ( { init : function ( name , age ) { this . name = name ; this . ...
详细介绍了JavaScript中继承的实现方式以及其优缺点分析。
浅析Javascript原型继承,浅析Javascript原型继承
JavaScript中继承的一些示例方法与属性参考,学习继承的朋友可以参考下。
JavaScript中的类继承 JavaScript中的类继承
在JavaScript中,继承可以通过三种手法实现原型链继承 使用apply、call方法 对象实例间的继承。
javascript控件开发之继承关系的源码
理解Javascript原型继承原理
浅析javascript原型继承机制,浅析javascript原型继承机制
javascript原型继承,prototype的使用,可以像java一样继承
Javascript原型继承Javascript原型继承Javascript原型继承
本文就和大家谈一谈javascript中的继承,什么是继承,继承的作用,以及js继承的实现代码,感兴趣的小伙伴们可以参考一下
NULL 博文链接:https://raychase.iteye.com/blog/1337415