javascript - 控制台中正确的原型(prototype)链(具有对象继承)

Question

请原谅我被一些有效但没有在控制台上“按预期”显示的东西所困扰。

考虑以下代码:

function Person() {};
Person.prototype.PersonAction = function() {}

console.log( new Person() );

控制台将显示:

Person {PersonAction: function}
    __proto__: Person
        PersonAction: function () {}
        constructor: function Person() {}
        __proto__: Object

这一切都很好。现在考虑这段代码:

function Mammal() {};
Mammal.prototype.MammalAction = function() {}

function Person() {};
Person.prototype = new Mammal();
Person.prototype.PersonAction = function() {}

console.log( new Person() );

控制台将显示:

Person {PersonAction: function, MammalAction: function}
    __proto__: Mammal
        PersonAction: function () {}
        __proto__: Mammal
            MammalAction: function () {}
            constructor: function Mammal() {}
            __proto__: Object

虽然这有效(并且我理解为什么它会以这种方式显示)，但请注意 Mammal 的两个原型(prototype)，其中顶部的一个具有 PersonAction。这就是我所烦恼的一点。

我想知道是否有任何方法可以做到这一点，我认为“正确”:

Person {PersonAction: function}
    __proto__: Person
        PersonAction: function () {}
        constructor: function Person() {}
        __proto__: Mammal
            MammalAction: function () {}
            constructor: function Mammal() {}
            __proto__: Object

Answer 1

这将通过将构造函数设置回其应有的状态并使用 Object.create() 作为原型(prototype)来实现:

function Mammal() {};
Mammal.prototype.MammalAction = function() {}

function Person() {};
Person.prototype = Object.create(Mammal.prototype);
Person.prototype.PersonAction = function() {}
Person.prototype.constructor = Person;

console.log( new Person() );

它在 Chrome 中为您提供了以下内容:

Person {PersonAction: function, constructor: function, MammalAction: function}
    __proto__: Person
        PersonAction: function () {}
        constructor: function Person() {}
       __proto__: Mammal
           MammalAction: function () {}
           constructor: function Mammal() {}
           __proto__: Object

演示:http://jsfiddle.net/jfriend00/CJF3L/