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

as this series effective JavaScript 's reading notes.

in the application of a game or graphic simulation. There is the concept of scene. A collection of objects is included in a scene called a role (actor).

Each character will have an image for its type to represent, and at the same time the scene 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 the roles in the scene inherit from a base class that abstracts the properties and methods that all roles have. 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, the 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;};

has a role base class. You can create a detailed 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, for example, 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 achieved byES5provided byobject.createmethod Complete(Non-ES5the implementation of the way to participate inItem):

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

Assumptions 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 is not able to pass in a reasonable number of parameters. Because actor accepts scene objects and coordinate information as a parameter, and spaceship type prototype object is designed to accommodate spaceship Some of the common properties and methods of the type. Obviously scene and coordinate information will follow spaceship instance is different. Place this information in prototype

the constructor of the parent type can only be called in the constructor of the subtype, and the subtype's prototype object is inherited from the parent type. prototype object.

This should be noted when creating subtypes of prototype .

Once the subtype is complete prototype the creation of the 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 such as the following:

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 the sub-type prototype object to avoid calling the constructor of the parent class.

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