你的位置:首页 > Java教程

[Java教程][Effective JavaScript 笔记]第38条:在子类的构造函数中调用父类的构造函数


示例

场景类

场景图(scene)是在可视化的过程中(如游戏或图形仿真场景)描述一个场景的对象集合。一个简单的场景包含了在该场景中的所有对象(称角色),以及所有角色的预加载图像数据集,还包含一个底层图形显示的引用(通常被称为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(); }};

角色基类

场景中所有的角色都是继承自基类Actor。基类Actor抽象出了一些通用的方法。每个角色都存储了其自身场景的引用以及坐标位置,然后将自身添加到场景的角色注册表中。

function Actor(scene,x,y){  this.scece=scene;  this.x=0;  this.y=0;  scene.register(this); }

为了能改变角色在场景中的位置,我们提供了一个moveTo方法。该方法改变角色坐标,然后重绘场景。

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有一个type字段,可以用来查找它在图像表中的图像。一旦我们有了这个图像数据,就可以使用底层图形库将其绘制到图形上下文中。

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;}

角色子类

我们将角色的特定类型实现为Actor的子类。例如,在街机游戏中太空飞船就会有一个扩展自Actor的SpaceShip类。像所有的类一样,SpaceShip被定义为一个构造函数。但是为了确保SpaceShip的实例能作为角色被正确地初始化,其构造函数必须显式地调用Actor的构造函数。通过将接收者绑定到该新对象来调用Actor可以达到此目的.

function SpaceShip(scene,x,y){ Actor.call(this,scene,x,y); this.points=0;}

首先调用Actor的构造函数能确保通过Actor创建的所有实例属性都被添加到了新对象中。然后,SpaceShip可以定义自身的实例属性,如飞船当前的积分数。为了使SpaceShip成为Actor的正确的子类,其原型必须继承自Actor.prototype。做这种扩展的最好方式是使用ES5的Object.create方法。

SpaceShip.prototype=Object.create(Actor.prototype);

构造函数创建子类原型问题

如果我们试图使用Actor的构造函数来创建SpaceShip的原型对象,会有几个问题。
第一个问题是没有任何合理的参数传递给Actor。

SpaceShip.prototype=new Actor();

当初始化SpaceShip原型时,我们尚未创建任何能作为第一个参数来传递的场景。并且SpaceShip的原型加入到场景的注册表中,而这绝不是我们想做的。这是一种使用子类时常用的方法。应当仅仅在子类构造函数中调用父类构造函数,而不是当创建子类原型时调用它。
一旦创建了SpaceShip的原型对象,我们就可以向其添加所有的可被实例共享的属性,包含一个用于在场景的图像数据表中检索的type名,以及一些太空飞船的特定方法。

SpaceShip.protoype.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);}

图示角色及子类关系

图示SpaceShip实例的继承层次结构图。
image

红框为基类与子类关系,构造函数也是Function类的一个实例,Function类的原型对象也继承自是Object的原型对象。
注意:scene,x,y属性只被定义在实例对象中,而不是被定义在原型对象中,尽管SpaceShip是被Actor构造函数创建的。

提示

  • 在子类构造函数中显式地传入this作为显式的接收者调用父类构造函数

  • 使用Object.create函数来构造子类的原型对象以避免调用父类的构造函数