游戏开发之旅-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原型式继承,更多示例请参见网站示例。跟着张员外讲编程,学习更轻松,不花钱还能学习真本领。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200811A0FAUD00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券