Prototype doesn't work as expected
Im using the following code to learn JS prototype and how to work with objects (after reading about it on the net Im new for JS ...) I want to create a root object that can use a different class and extend not sure if if i do it right ... currently i have an error in sound (can't set the property "sound" to undefined), any idea what i am doing wrong or maybe there is a better way to write this (for me it is third project ... :))
var obj = function(name){
this.name = name;
};
obj.prototype.getName = function(){
return this.name;
}
var person = new obj("Bill");
console.log(person.getName());
var animal = new obj();
animal.prototype.sound = function(sound){
console.log(sound)
}
var dog = new animal();
dog.sound("wof");
source to share
new obj();
returns an object not like a function, so when you call
var animal = new obj();
The variable animal
will be filled with an object that is NOT a function. This statement
var dog = new animal();
returns undefined
because animal is not a function (constructor function). Note that the operator is new
used for functions only for non-literal objects
For more information on this topic please see this question
Simple JavaScript inheritance pattern
First define the base class (there is no concept of class in JS, but I use it for more convenience)
function Obj(name){
this.name = name;
}
Obj.prototype.setName = function(name){
this.name = name;
}
Next, you can define a class animal
that extends the class obj
.
function Animal(name, legs){
// This is its own property
this.legs = legs;
// This is accessible via prototype chain
this.setName(name);
}
// link this class to the obj class
Animal.prototype = new Obj();
The rendered diagram for this template will look like this:
Animal
+------------+
| legs | Obj
| __proto__ | -----> +-----------+
+------------+ | name | prototype object for Obj
| __proto__ | -------> +--------------------+
+-----------+ | setName function |
+--------------------+
UPDATE # 1
To declare another class Person
, for example, you can do this:
function Person(name, addr, phoneNo){
this.name = name; // This is inherited from the Obj class
this.addr = addr; // Its own property
this.phoneNo = phoneNo; // Its own propert
this.legs = 2; // This is from Animal
}
Person.prototype = new Animal();
source to share
This is because the sound is undefined - the property does not exist.
An easy way to create an object with sound property is simply (using jquery):
var animal = { walk: function(){ return 'animal is walking'; }, legs: 4 }
var dog = $.extend({ sound: '' }, animal);
dog.sound = 'woof';
The reason your example is not working is because you instantiated obj that has no sound property. Therefore, you need a mechanism to extend the object you created. So in my example, I'll show you a quick and easy way to do it.
source to share
Are you trying to do inheritance
You must do
var animal = function () {}
animal.prototype = new obj();
animal.prototype.constructor=animal;
src: http://phrogz.net/js/classes/OOPinJS2.html
Another way you can find out what you can use:
obj.prototype.__defineGetter__("name", function () { return this.n; /* where n is the name */ });
and use it this way
var a = new obj("foo");
console.log(a.name);
source to share