如何将原型附加到 JS 中的对象字面量 [英] How can I attach prototype to Object Literals in JS
问题描述
我试图理解 JavaScript 原型的本质,我试图在不使用类构造函数的情况下创建对象继承.
I am trying to understand JavaScripts Prototypal nature and I am trying to create object inheritance without using class like constructor functions.
如果它们都是三个对象字面量,我如何将来自 Animals 的原型链然后分别附加到 Cat 和 Dog?
How can I attach the prototype chain from Animals and then each to Cat and Dog if they are all three object literals?
另外,有没有办法执行 Object.create 并以文字形式添加更多属性(如 myCat).
Also, is there a way to do an Object.create and add more properties in literal form (like myCat).
我在下面添加了代码 &粘贴 bin http://jsbin.com/eqigox/edit#javascript
I've added the code below & to paste bin 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();
推荐答案
您可以使用 Object.create
将您定义的对象用作原型.例如:
You can use Object.create
to use your defined objects as prototypes. For instance:
var Dog = Object.create(Animal, {
bark : {
value: function() {
console.log("Woof! My name is " + this.name);
}
}
});
现在您可以创建一个新的 Dog 对象:
Now you can create a new Dog object:
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
的情况下工作,您可以使用构造函数:
Alternatively, if you're working in the absence of Object.create
, you can use constructors:
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/
For more information about Object.create: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/create/
有关构造函数和原型链的更多信息:https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/对象/构造函数
For more information about Constructors and prototypes chains: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/constructor
https://developer.mozilla.org/en/JavaScript/Guide/Inheritance_and_the_prototype_chain
这篇关于如何将原型附加到 JS 中的对象字面量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!