Effective JavaScript Item 38 calls the parent class constructor in the subclass constructor

this series as effective JavaScript 's reading notes.

in a game or graphic simulation application, there will be scenes (Scene) this concept. A scene contains a collection of objects called Roles (actors). Each role has an image to represent according to its type, and the scene also needs to hold a reference to the underlying graphical presentation object, called the context :

function Scene (context, width, height, images) {This.context = Context;this.width = Width;this.height = Height;this.image s = 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 ();}};

All roles in the scene inherit from a base class that abstracts the properties and methods that are available to all roles. For example, each role object will hold a reference to the scene it is in, and the coordinate information:

function Actor (scene, X, y) {this.scene = Scene;this.x = X;this.y = Y;scene.register (this);}

in the same way, Actor type of prototype The public method is defined on the object:

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

with the role base class, you can create a concrete type on top of it. For example, when creating a spaceship (spaceship) character, you can do this:

Function spaceship (scene, X, y) {Actor.call (this, scene, X, y); this.points = 0;}

in order to let Spaceship can have attributes that all roles should have, so the Spaceship in the constructor body first called the parent class (Actor) constructor, followed by the initialization of the Spaceship The properties of the instance itself, such as the above points .

in order to letSpaceshiptype is indeed a real fieldActorSubtype of the type,Spaceshiptype ofprototypeobjects must also inherit from theActortype ofprototypeobject. This can be done byES5provided byobject.createmethod to complete(Non-ES5the implementation of the method can be referencedItem):

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

if Spaceship of the prototype object is called by the Actor constructor to obtain, a series of questions will appear:

Spaceship.prototype = new Actor ();

in call actor When the constructor, you cannot pass in reasonable parameters. Because actor accepts scene objects and coordinate information as arguments, and spaceship type prototype object is designed to accommodate spaceship Some common properties and methods, obviously scene and coordinate information will follow spaceship instance of the different, put this information in prototype object is not appropriate.

a constructor for a parent type can only be called in a constructor of a subtype, whereas a subtype's prototype object is inherited from the parent type. prototype object. This is important to note when creating subtypes of prototype .

once the subtype has been completed prototype object, you can set the common properties and methods on it:

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

at this point, Actor type, Spaceship types and their prototype the relationships between objects are as follows:

Summarize

1. calls the constructor of the parent type in the constructor of the subtype, and explicitly passes in the This the point.
2. Use object.create method to create a sub-type of the prototype object to avoid calls to the parent type constructor.

Effective JavaScript Item 38 calls the parent class constructor in the subclass constructor