Effective JavaScript Item 38 调用父类的构造函数在子类的构造函数
作为这一系列Effective JavaScript的读书笔记。
在一个游戏或者图形模拟的应用中。都会有场景(Scene)这一概念。在一个场景中会包括一个对象集合,这些对象被称为角色(Actor)。
而每一个角色依据其类型会有一个图像用来表示,同一时候场景也须要保存一个底层图形展示对象的引用,被称为上下文(Context):
function Scene(context, width, height, images) {
this.context = context;
this.width = width;
this.height = height;
this.images = images;
this.actors = [];
}
Scene.prototype.register = function(actor) {
this.actors.push(actor);
};
Scene.prototype.unregister = function(actor) {
var i = this.actors.indexOf(actor);
if (i >= 0) {
this.actors.splice(i, 1);
}
};
Scene.prototype.draw = function() {
this.context.clearRect(0, 0, this.width, this.height);
for (var a = this.actors, i = 0, n = a.length; i < n; i++) {
a[i].draw();
}
};
场景中全部的角色都继承自一个基类,这个基类用来抽象全部角色具有的属性和方法。比方,每一个角色对象都会保存它所在场景的引用,和坐标信息:
function Actor(scene, x, y) {
this.scene = scene;
this.x = x;
this.y = y;
scene.register(this);
}
相同地,在Actor类型的prototype对象上会定义公共的方法:
Actor.prototype.moveTo = function(x, y) {
this.x = x;
this.y = y;
this.scene.draw();
};
Actor.prototype.exit = function() {
this.scene.unregister(this);
this.scene.draw();
};
Actor.prototype.draw = function() {
var image = this.scene.images[this.type];
this.scene.context.drawImage(image, this.x, this.y);
};
Actor.prototype.width = function() {
return this.scene.images[this.type].width;
};
Actor.prototype.height = function() {
return this.scene.images[this.type].height;
};
有了角色基础类。就能够在其之上创建详细类型了。比方当创建一个宇宙飞船(SpaceShip)角色时,能够这样实现:
function SpaceShip(scene, x, y) {
Actor.call(this, scene, x, y);
this.points = 0;
}
为了让SpaceShip的实例也可以拥有全部角色应该有的属性,所以在SpaceShip的构造函数体内首先调用了父类(Actor)的构造函数,紧接着会初始化SpaceShip实例自身的属性,比方以上的points。
为了让SpaceShip类型确确实实地成为Actor类型的子类型,SpaceShip类型的prototype对象也必需要继承自Actor类型的prototype对象。这能够通过ES5提供的Object.create方法完毕(非ES5的实现方式能够參考Item
33):
SpaceShip.prototype = Object.create(Actor.prototype);
假设SpaceShip的prototype对象是通过调用Actor的构造函数来获得的,那么会出现一系列的问题:
SpaceShip.prototype = new Actor();
在调用Actor构造函数的时候,没法传入合理的參数。由于Actor接受场景对象和坐标信息作为參数,而SpaceShip类型的prototype对象的目的是为了容纳SpaceShip类型中一些公用的属性和方法。显然场景和坐标信息会随着SpaceShip实例的不同而不同。将这些信息放在prototype对象上是不合适的。
父类型的构造函数仅仅能在子类型的构造函数中被调用,而子类型的prototype对象是继承自父类型的prototype对象。
这一点在创建子类型的prototype时须要注意。
一旦完毕了子类型prototype对象的创建。就能够在其上设置公用的属性和方法了:
SpaceShip.prototype.type = "spaceShip";
SpaceShip.prototype.scorePoint = function() {
this.points++;
};
SpaceShip.prototype.left = function() {
this.moveTo(Math.max(this.x - 10, 0), this.y);
};
SpaceShip.prototype.right = function() {
var maxWidth = this.scene.width - this.width();
this.moveTo(Math.min(this.x + 10, maxWidth), this.y);
};
此时,Actor类型,SpaceShip类型以及它们的prototype对象之间的关系例如以下:
总结
- 在子类型的构造函数中调用父类型的构造函数,并显式传入this的指向。
- 使用Object.create方法创建亚型prototype对象以避免调用父类的构造函数。
Effective JavaScript Item 38 调用父类的构造函数在子类的构造函数的更多相关文章
- Effective JavaScript Item 21 使用apply方法调用函数以传入可变參数列表
本系列作为Effective JavaScript的读书笔记. 以下是一个拥有可变參数列表的方法的典型样例: average(1, 2, 3); // 2 average(1); // 1 avera ...
- Effective JavaScript Item 37 认识this的隐式指向
本系列作为Effective JavaScript的读书笔记. CSV数据通常都会被某种分隔符进行分隔.所以在实现CSV Reader时,须要支持不同的分隔符.那么,非常自然的一种实现就是将分隔符作为 ...
- Effective JavaScript Item 39 绝不要重用父类型中的属性名
本系列作为Effective JavaScript的读书笔记. 假设须要向Item 38中的Actor对象加入一个ID信息: function Actor(scene, x, y) { this.sc ...
- Effective JavaScript Item 30 理解prototype, getPrototypeOf和__proto__的不同
本系列作为Effective JavaScript的读书笔记. prototype,getPropertyOf和__proto__是三个用来訪问prototype的方法.它们的命名方式非常类似因此非常 ...
- Effective JavaScript Item 46 优先使用数组而不是Object类型来表示有顺序的集合
本系列作为Effective JavaScript的读书笔记. ECMAScript标准并没有规定对JavaScript的Object类型中的属性的存储顺序. 可是在使用for..in循环对Objec ...
- Effective JavaScript Item 10 避免使用with
本系列作为Effective JavaScript的读书笔记. Item 9:避免使用withkeyword 重点: 设计withkeyword本来是为了让代码变简洁,可是却起到了相反的效果.比方: ...
- Effective JavaScript Item 22 使用arguments来创建接受可变參数列表的函数
本系列作为Effective JavaScript的读书笔记. 在Item 21中,介绍了结合apply方法实现的可变參数列表函数average,它实际上仅仅声明了一个数组作为參数,可是利用apply ...
- Effective JavaScript Item 31 优先使用Object.getPrototypeOf,而不是__proto__
本系列作为Effective JavaScript的读书笔记. 在ES5中引入了Object.getPrototypeOf作为获取对象原型对象的标准API.可是在非常多运行环境中.也提供了一个特殊的_ ...
- Effective JavaScript Item 40 避免继承标准类型
本系列作为Effective JavaScript的读书笔记. ECMAScript标准库不大.可是提供了一些重要的类型如Array,Function和Date.在一些场合下.你或许会考虑继承当中的某 ...
随机推荐
- 关于心理的二十五种倾向(查理·芒格)-3
9)回馈倾向人们早就发现.和猿类,猴类,狗类等其它很多认知能力较为低下的物种同样,人类身上也有以德报德,以牙还牙的极端倾向:这样的倾向明显能够促进有利于成员利益的团体合作.这跟非常多社会性的动物的基因 ...
- MapReduce 图解流程
Anatomy of a MapReduce Job In MapReduce, a YARN application is called a Job. The implementation of t ...
- 经验总结56--mybatis返回主键
使用mybatis框架时,有时候须要新插入的数据的主键是多少. 1.oracle 因为oracle是建的序列文件,获取ID值. <insert id="insert" par ...
- 1.2.4 Java Annotation 提要
(本文是介绍依赖注入容器Spring和分析JUnit源码的准备知识) Java Annotation(标注) java.lang.annotation.Annotation是全部Java标注的父接口. ...
- linux java配置环境变量
export JAVA_HOME=/alidata/server/java/jdk1.8.0_65export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME ...
- arm cpu的架构及分类说明
今天在编译mplayer for mx27ads的时候, 碰到了armv5te与armv6优化的问题. 默认的交叉编译器支持armv5te也支持armv6,就默认使用了mplayer中mpeg4的ar ...
- [Typescript] Sorting arrays in TypeScript
In this lesson we cover all the details of how to sort a list of items using TypeScript. We also pre ...
- [Angular Directive] Structure directive and <template>
The structure directive is just a sugar syntax of <template>. Such as: <div *ngIf="nam ...
- js进阶-9-3/4 form对象有哪些常用属性
js进阶-9-3/4 form对象有哪些常用属性 一.总结 一句话总结: 1.一般html标签有哪些常用属性:name id value 2.form对象有哪些常用属性(特有):action meth ...
- python 使用顺序表实现栈和队列
栈: # -*- coding: utf-8 -*- # @author: Tele # @Time : 2019/04/24 下午 2:33 # 采用list(顺序表)实现栈结构,后入先出 clas ...