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的属性的值如下:

[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 对象将不能继承这个新的属性.
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值