Question

我正在尝试理解JavaScripts Prototypal性质，我试图在不使用类构造函数的情况下创建对象继承。

如果它们都是三个对象文字，我如何附加动物的原型链，然后每个链接到Cat和Dog？

此外，有没有办法做一个Object.create并以文字形式添加更多属性（如myCat）。

我已添加以下代码＆amp;粘贴箱http://jsbin.com/eqigox/edit#javascript

var Animal = {
    name        : null,
    hairColor   : null,
    legs        : 4,

    getName : function() {
        return this.name;
    },
    getColor : function() {
        console.log("The hair color is " + this.hairColor);
    }
};

/* Somehow Dog extends Animal */

var Dog = {
    bark : function() {
        console.log("Woof! My name is ");
    }
};

/* Somehow Cat Extends Animal */

var Cat = {
    getName : function() {
        return this.name;
    },

    meow : function() {
        console.log("Meow! My name is " + this.name);
    }
};


/* myDog extends Dog */

var myDog = Object.create(Dog);

/* Adding in with dot notation */
myDog.name = "Remi";
myDog.hairColor = "Brown";
myDog.fetch = function() {
    console.log("He runs and brings back it back");
};


/* This would be nice to add properties in litteral form */
var myCat = Object.create(Cat, {
    name        : "Fluffy",
    hairColor   : "white",
    legs : 3, //bad accident!
    chaseBall : function(){
        console.log("It chases a ball");
    }

});

myDog.getColor();

Answer 1

您可以使用Object.create将定义的对象用作原型。例如：

var Dog = Object.create(Animal, {
    bark : {
        value: function() {
            console.log("Woof! My name is " + this.name);
        }
    }
});

现在您可以创建一个新的Dog对象：

var myDog = Object.create(Dog);
myDog.bark();  // 'Woof! My name is null'
myDog.getColor();  // 'The hair color is null'

示例：http://jsfiddle.net/5Q3W7/1/

或者，如果您在没有Object.create的情况下工作，则可以使用构造函数：

function Animal() {
    this.name = null;
    this.hairColor = null;
    this.legs = 4;
};

Animal.prototype = {
    getName : function() {
        return this.name;
    },
    getColor : function() {
        console.log("The hair color is " + this.hairColor);
    }
}

function Dog() {
}

Dog.prototype = new Animal;
Dog.prototype.bark = function() {
    console.log("Woof! My name is " + this.name);
};

示例：http://jsfiddle.net/5Q3W7/2/

有关Object.create的更多信息：https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/create/

有关构造函数和原型链的更多信息： https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/constructor

https://developer.mozilla.org/en/JavaScript/Guide/Inheritance_and_the_prototype_chain

Answer 2

修改：完全忽略Object.create。 @ jMerliN的答案更合适，除非你需要更广泛的向后兼容性。

Animal，Cat和Dog共享Object.prototype，因为它们是Object的实例，但这不是您想要放置方法的地方。

您可以使用extend函数来模仿继承：

var Dog = {
    bark : function() {
        console.log("Woof! My name is ")
    }
}

jQuery.extend(Dog, Animal)

这可能是下划线的_.extend或您自己的扩展功能，它只是复制它的属性：

function extend(obj, source){
    for (var prop in source) {
        obj[prop] = source[prop]
    }
}

请注意引用：字符串，数字，布尔值等“原始”值将复制，而对象，函数和数组将引用：

var Animal = {
    tags: [1,2,3]
}

var Dog = {
    //...
}

_.extend(Dog, Animal)

Dog.tags.push(4)

Dog.tags // [1,2,3,4]
Animal.tags // [1,2,3,4] oh no!

没有理由经历这一点，它容易出错并且内存效率较低;只使用构造函数：）

如何在JS中将原型附加到Object Literals

2 个答案: