admin管理员组文章数量:1316512
I'm trying to grasp OOP with JavaScript with very simple examples.
My goal is to create a class hierarchy with Animals as the example.
In a simplified animal hierarchy we may see something like this:
Animal
/\
Mammal Reptile
/\ /\
Human Dog Snake Alligator
I want to take this example and create classes within JavaScript. Here is my attempt. What can I do to make it better?
function Animal(name) {
this.name = name;
}
function Mammal() {
this.hasHair = true;
this.numEyes = 2;
this.blood = "warm";
}
function Dog(breed) {
this.breed = breed;
this.numLegs = 4;
}
Dog.prototype = new Animal("Fido");
Dog.prototype = new Mammal();
var Fido = new Dog("Lab");
console.log(Fido.name); // returns undefined when i want it to return Fido
console.log(Fido.hasHair); // returns true as expected
console.log(Fido.breed); // returns lab as expected
What I would like to do is have dog extend the properties of Mammal and Animal since it is both but it is not working correctly. I am assuming because i'm calling dog.prototype = new Mammal() after new Animal() that it is overwriting the connection.
How do I properly write out these classes so that I can call all properties of their parent classes?
Thank you.
I'm trying to grasp OOP with JavaScript with very simple examples.
My goal is to create a class hierarchy with Animals as the example.
In a simplified animal hierarchy we may see something like this:
Animal
/\
Mammal Reptile
/\ /\
Human Dog Snake Alligator
I want to take this example and create classes within JavaScript. Here is my attempt. What can I do to make it better?
function Animal(name) {
this.name = name;
}
function Mammal() {
this.hasHair = true;
this.numEyes = 2;
this.blood = "warm";
}
function Dog(breed) {
this.breed = breed;
this.numLegs = 4;
}
Dog.prototype = new Animal("Fido");
Dog.prototype = new Mammal();
var Fido = new Dog("Lab");
console.log(Fido.name); // returns undefined when i want it to return Fido
console.log(Fido.hasHair); // returns true as expected
console.log(Fido.breed); // returns lab as expected
What I would like to do is have dog extend the properties of Mammal and Animal since it is both but it is not working correctly. I am assuming because i'm calling dog.prototype = new Mammal() after new Animal() that it is overwriting the connection.
How do I properly write out these classes so that I can call all properties of their parent classes?
Thank you.
Share Improve this question asked Apr 24, 2015 at 4:30 sjmartinsjmartin 3,9624 gold badges22 silver badges32 bronze badges 1- Is this roughly what you want? jsfiddle/294d88su – aroth Commented Apr 24, 2015 at 4:45
1 Answer
Reset to default 8You want to make use of Prototypical Inheritance, which in Javascript is a bit awkward but powerful.
function Animal(name) {
this.name = name;
}
// Example method on the Animal object
Animal.prototype.getName = function() {
return this.name;
}
function Mammal(name, hasHair) {
// Use the parent constructor and set the correct `this`
Animal.call(this, name);
this.hasHair = hasHair;
}
// Inherit the Animal prototype
Mammal.prototype = Object.create(Animal.prototype);
// Set the Mammal constructor to 'Mammal'
Mammal.prototype.constructor = Mammal;
Mammal.prototype.getHasHair = function() {
return this.hasHair;
}
function Dog(name, breed) {
// Use the parent constructor and set the correct `this`
// Assume the dog has hair
Mammal.call(this, name, true);
this.breed = breed;
}
// Inherit the Mammal prototype
Dog.prototype = Object.create(Mammal.prototype);
// Set the Dog constructor to 'Dog'
Dog.prototype.constructor = Dog;
Dog.prototype.getBreed = function() {
return this.breed;
}
var fido = new Dog('Fido', 'Lab');
fido.getName(); // 'Fido'
fido.getHasHair(); // true
fido.getBreed(); // 'Lab'
A good resource to OOP in Javascript can be found on Mozilla Developer Network
本文标签: Basic JavaScript Prototype and Inheritance Example for AnimalsStack Overflow
版权声明:本文标题:Basic JavaScript Prototype and Inheritance Example for Animals - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1741998020a2410441.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论