简体   繁体   中英

Can anyone explain why the prototype chain shouldn't say `Dog`->`Animal`->`Creature`?

I was looking for good example of Javascript prototypical inheritance on SO and this question, Benefits of using 'Object.create' for inheritance , has an excellent answer and so I tried to push my luck by adding another object type to the prototype chain and I found something that looks strange.

The original listing has Dog inheriting from Animal and we can see Animal in the prototype chain. However, if we add Creature and have Animal inheriting from that then Animal disappears from the reported prototype chain if we use console.info.

Can anyone explain why the prototype chain shouldn't say Dog -> Animal -> Creature ?

在此处输入图像描述

Here is code listing

"use strict";

//https://www.typescriptlang.org/docs/handbook/classes.html
var Creature = (function () {
    function Creature() {
        return this;
    }

    Creature.prototype.deadOrAlive = function () {
        console.log("alive"); //hard code for now
    }

    return Creature;
}());

var Animal = (function () {

    Animal.prototype = Object.create(Creature.prototype);

    function Animal() {
        return this;
    }

    Animal.prototype.move = function (distanceInMeters) {
        if (distanceInMeters === void 0) {
            distanceInMeters = 0;
        }
        console.log("Animal moved " + distanceInMeters + "m.");
    };

    return Animal;
}());

var Dog = (function () {

    /* https://stackoverflow.com/questions/17392857/benefits-of-using-object-create-for-inheritance/17393153#answer-17393153 */
    Dog.prototype = Object.create(Animal.prototype);

    function Dog() {
        return this;
    }
    Dog.prototype.bark = function () {
        console.log("Woof! Woof!");
    };
    return Dog;
}());

var dog = new Dog();
dog.bark();
dog.move(10);
dog.bark();
dog.deadOrAlive();
//debugger; 

A colleague at a Javascript boot camp of which I am member has come up with a one-line solution, just use Object.setPrototypeOf( Animal.prototype, Creature.prototype ) . Thanks, Ray!

//https://www.typescriptlang.org/docs/handbook/classes.html
"use strict";

var Creature = (function () {
    function Creature() {
        return this;
    }

    Creature.prototype.deadOrAlive = function () {
        console.log("alive"); //hard code for now
    }

    return Creature;
}());

var Animal = (function () {
    Object.setPrototypeOf( Animal.prototype, Creature.prototype )

    function Animal() {
        return this;
    }

    Animal.prototype.move = function (distanceInMeters) {
        if (distanceInMeters === void 0) {
            distanceInMeters = 0;
        }
        console.log("Animal moved " + distanceInMeters + "m.");
    };

    return Animal;
}());

var Dog = (function () {
    /* https://stackoverflow.com/questions/17392857/benefits-of-using-object-create-for-inheritance/17393153#answer-17393153 */
    Object.setPrototypeOf( Dog.prototype, Animal.prototype )

    function Dog() {
        return this;
    }
    Dog.prototype.bark = function () {
        console.log("Woof! Woof!");
    };
    return Dog;
}());

var dog = new Dog();
dog.bark();
dog.move(10);
dog.bark();
dog.deadOrAlive();
//debugger;

在此处输入图像描述

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM