When Should You Avoid `Child.prototype = Parent.Prototype` in JavaScript Inheritance?

When to Avoid Child.prototype = Parent.Prototype in JavaScript Inheritance

While it's common practice to inherit in JavaScript using Child.prototype = new Parent();, there are exceptions where Child.prototype = Parent.Prototype may cause unintended behaviors.

Consider the following snippet:

function GameObject(oImg, x, y) {

    this.x = x;
    this.y = y;
    this.img = oImg;

    this.hit = new Object();
    this.hitBox.x = x;
    this.hitBox.y = y;
    this.hitBox.width = oImg.width;
    this.hitBox.height = oImg.height;

}

Spaceship.prototype = new GameObject();
Spaceship.prototype.constructor = Spaceship;

function Spaceship(){
    console.log("instantiate ship");
    GameObject.apply(this, arguments);
    this.vx = 0;
    this.vy = 0;
    this.speed = 3;
    this.friction = 0.94;
}

Upon inspecting the Spaceship constructor, you'll notice that its __proto__ property points to Spaceship, not GameObject. This is because the lines:

this.hitBox.width = oImg.width;
this.hitBox.height = oImg.height;

assign properties directly to this.hitBox, which doesn't exist in the GameObject prototype. This behavior is problematic because it:

• Breaks inheritance: When using Child.prototype = Parent.Prototype, the Child prototype doesn't inherit any new functions added to the Parent prototype.
• Violates the instanceof check: As the Spaceship instance's __proto__ points to Spaceship instead of GameObject, checking if(object instanceof GameObject) will fail.

Why Use Child.prototype = new Parent(); Instead

Child.prototype = new Parent(); invokes the constructor of the Parent class and assigns its newly created instance to the Child prototype. This ensures that:

• Inheritance is preserved: Any new functions added to the Parent prototype will automatically be inherited by the Child.
• instanceof checks are accurate: The __proto__ of the Child instance points to the Parent prototype, allowing the correct instanceof check.

Alternative Solution

In modern browsers that support Object.create, you can use Spaceship.prototype = Object.create(GameObject.prototype); to create the child prototype. This is functionally equivalent to Child.prototype = new Parent(); but is more concise and avoids the unnecessary constructor call.

The above is the detailed content of When Should You Avoid `Child.prototype = Parent.Prototype` in JavaScript Inheritance?. For more information, please follow other related articles on the PHP Chinese website!