游戏开发之旅-JavaScript原型式继承

本节是第四讲的第十六小节，上一节我们为大家介绍了JavaScript原型链的基础概念，本节为大家介绍原型式继承的相关属性以及方法。

原型式继承(prototypal inheritance)

在经典的面向对象语言中，您可能倾向于定义类对象,然后您可以简单地定义哪些类继承哪些类,JavaScript使用了另一套实现方式，继承的对象函数并不是通过复制而来，而是通过原型链继承。

比如我们想要创建一个Teacher类，就像我们前面在面向对象概念解释时用的那个一样。这个类会继承Person的所有成员，同时也包括：

一个新的属性，subject——这个属性包含了教师教授的学科。

一个被更新的greeting()方法，这个方法打招呼听起来比一般的greeting()方法更正式一点——对于一个教授一些学生的老师来说。

如下所示：

function Person(first, last, age, gender, interests) {

this.name = {

first,   last

};

this.age = age;

this.gender = gender;

this.interests = interests;

};

function Teacher(first, last, age, gender, interests, subject) {

Person.call(this, first, last, age, gender, interests);

this.subject = subject;

}

这里有一些我们从没见过的奇怪玩意——call()函数。基本上，这个函数允许您调用一个在这个文件里别处定义的函数。第一个参数指明了在您运行这个函数时想对“this”指定的值，也就是说，您可以重新指定您调用的函数里所有“this”指向的对象。其他的变量指明了所有目标函数运行时接受的参数。在构造器里的最后一行代码简单地定义了一个新的subject属性，这将是教师会有的，而一般人没有的属性。

从无参构造函数继承

请注意，如果您继承的构造函数不从传入的参数中获取其属性值，则不需要在call()中为其指定其他参数。

function Brick() {

this.width = 10;

this.height = 20;

}

function BlueGlassBrick() {

Brick.call(this);

this.opacity = 0.5;

this.color = 'blue';

}

设置 Teacher() 的原型和构造器引用

我们已经定义了一个新的构造器，这个构造器默认有一个空的原型属性。我们需要让Teacher()从Person()的原型对象里继承方法。我们要怎么做呢？

Teacher.prototype = Object.create(Person.prototype);

在这个例子里我们用这个函数来创建一个和Person.prototype一样的新的原型属性值（这个属性指向一个包括属性和方法的对象），然后将其作为Teacher.prototype的属性值。这意味着Teacher.prototype现在会继承Person.prototype的所有属性和方法。

还需要完成一件事 — 现在Teacher()的prototype的constructor属性指向的是Person(), 这是由我们生成Teacher()的方式决定的。

在底下加上这一行代码来解决：

在定义新的构造函数Teacher时，我们通过function.call来调用父类的构造函数，但是这样无法自动指定Teacher.prototype的值，这样Teacher.prototype就只能包含在构造函数里构造的属性，而没有方法。因此我们利用Object.create()方法将Person.prototype作为Teacher.prototype的原型对象，并改变其构造器指向，使之与Teacher关联。

任何您想要被继承的方法都应该定义在构造函数的prototype对象里，并且永远使用父类的prototype来创造子类的prototype，这样才不会打乱类继承结构。

向 Teacher() 添加一个新的greeting()函数

var prefix;

if(this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {

prefix = 'Mr.';

} else if(this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {

prefix = 'Mrs.';

} else {

prefix = 'Mx.';

}

};

以上内容部分摘自视频课程04网页游戏编程JavaScript-16原型式继承，更多示例请参见网站示例。跟着张员外讲编程，学习更轻松，不花钱还能学习真本领。