JavaScript Object and Prototypes

**gits** · Feb 20 '09, 05:06 PM

ok .... let's have a closer look at it :) ...

typically you create a constructor like this:

Code:

function MY_OBJ() {
    this.prop = 'foo';
    this.func = function() { //whatever code };
}

// use the constructor
var my_obj = new MY_OBJ;

you cannot mix that with the : notation of properties ... the properties are declared with this.prop in the above case, and need explicit assignments.

Now you could even create a new object like this literally:

Code:

var foo = {
    a: 'some_value',
    b: function() { // whatever code }
};

here you create an instance of an object directly and you declare the properties a and b ... where b stores a reference to the function-code that is assigned to it. note: when you have a look at this ... this is where JSON is not far away ;) just have that as a string from a response and eval it and you have a native js-object ready for use.

so when you do:

Code:

some_obj.prototype = {
    // whatever 
};

you create a new prototype-obj with the properties/methods you want the some_obj to have.

the 'classical' way to do that is:

Code:

some_obj.prototype.my_new_function = function() {
    // function's code
}

so you just extend the prototype of the obj with just one property/method instead of overwriting the entire prototype. now you are asking how to call a method ... this is quite simple. when you have an instance you just call it like this:

Code:

obj_instance.method_name();

when you want to use the method without an instance, then just use:

Code:

constructor_name.prototype.method_name();

i hope this helps you? :)

kind regards

PS: be aware of the use of the this keyword when working with javascript object ... this always relates to the caller of a function ... so that might be tricky when starting to use objects in JavaScript.

**Frinavale** · Feb 20 '09, 05:21 PM

Originally posted by gits

ok .... let's have a closer look at it :) ...

you cannot mix that with the : notation of properties ... the properties are declared with this.prop in the above case, and need explicit assignments.

What is the name of the ":" notation so that I can look this up?

Originally posted by gits

Now you could even create a new object like this literally:

Code:

var foo = {
    a: 'some_value',
    b: function() { // whatever code }
};
where you create an instance of an object directly and...

Ok, "overwritin g" makes sense to me now, thanks.

Originally posted by gits

now you are asking how to call a method ... this is quite simple. when you have an instance you just call it like this:

Code:

obj_instance.method_name();

when you want to use the method without an instance, then just use:

Code:

constructor_name.prototype.method_name();

This is not exactly what I was asking.

I've defined 2 versions of the Divide() method: one in the Foo class and the other is in Foo's prototype.

The Divide() method in the Foo class simply returns a String stating that "you're in Foo's Divide function".

The Divide() method in Foo's prototype divides "a" property by "b" property.

I'm wondering how to call the Divide() method in the prototype for a live instance of Foo.....not how to statically call the Divide() method in the prototype...I don't know if I'm being clear here so if you don't understand my question I can try and restate it.

**gits** · Feb 20 '09, 05:31 PM

the prototype is first parsed and later when you create the instance then the member-variables are allocated. when you have a prototype-property for the obj and then create a member directly this will drop the reference to the prototypes method for this obj. so the member will 'override' the prototype for this instance ... you only could call it staticly

using the prototype is to prefer because members will always alloc memory while the prototype is read and parsed only once.

kind regards

**gits** · Feb 20 '09, 05:35 PM

ahh ... and i don't know whether there is a name for the : - notation ... it could only be used when you create JavaScript-objects through the literals {}:

Code:

var a = {};

// is equivalent to:

var a = new Object;

kind regards

**Frinavale** · Feb 20 '09, 05:41 PM

Originally posted by gits

the prototype is first parsed and later when you create the instance then the member-variables are allocated. when you have a prototype-property for the obj and then create a member directly this will drop the reference to the prototypes method for this obj. so the member will 'override' the prototype for this instance ... you only could call it staticly

Ok I didn't know this. In fact I had a completely different view on this. I thought that the JavaScript engine would fist search the Object for the property/method and if it couldn't find it it would then search the prototype....

I thought the reason for why I couldn't get to the prototype's method was because the JavaScript engine found the method in the Object and simply used that method.

Are you saying that if there is a method defined in the Object, that there is no possible way to access a method with the same name in the prototype because it's being overwritten?

This honestly seems a bit backwards to me....I was thinking that I could use the prototype object to "extend" functionality of existing objects....but if I can't overwrite the existing methods then this idea obviously wont work.

This is disappointing

Originally posted by gits

using the prototype is to prefer because members will always alloc memory while the prototype is read and parsed only once.

This will let allow for extended functionality on existing methods/properties as well...?? (testing)

**gits** · Feb 20 '09, 05:53 PM

not exactly ... it is the following way:

1. script is loaded and parsed ... so even all prototypes are parsed for the classes first - all prototype-props become part of this for the constructor
2. now you create an instance -> the constructor is executed ... and the new function is assigned to the name that first had a reference to the prototypes method.

to overwrite you have to create a instance first and then overwrite the method for that instance or make use of inheritance and use different classes:

Code:

function FOO() {}

FOO.prototype.my_func = function() {};

function CHILD_FOO() {}

CHILD_FOO.prototype = new FOO;

CHILD_FOO.prototype.constructor = CHILD_FOO;

CHILD_FOO.prototype.my_func = function() {};

var child_foo = new CHILD_FOO;

**Frinavale** · Feb 20 '09, 05:59 PM

I'll try your example in a sec...

But this is working:

Code:

<html>
<body>

<script type="text/javascript">

function Foo(firstNumber,secondNumber){
  this.a = firstNumber; //"a" is now a property of the Foo Object
  this.b = secondNumber;//"b" is now a property of the Foo Object
};
Foo.prototype = {
    Add: function(){return this.a + this.b;},
    Divide: function(){return this.a/this.b;},
    Multiply: function(){return this.a * this.b;}
};

function GrownUpFoo(firstNumber, secondNumber, thirdNumber){
   this.Foo = new Foo(firstNumber, secondNumber);
   this.c = thirdNumber;
};

GrownUpFoo.prototype = {
     Multiply: function(){return this.Foo.a * this.Foo.b * this.c;}
};


var instanceOfGrownUpFoo = new GrownUpFoo(2,3,4);
document.write(instanceOfGrownUpFoo.Multiply());
document.write("<br />");
document.write(instanceOfGrownUpFoo.Foo.Multiply());

</script>

</body>
</html>

**Frinavale** · Feb 20 '09, 06:11 PM

Originally posted by gits

not exactly ... it is the following way:

1. script is loaded and parsed ... so even all prototypes are parsed for the classes first - all prototype-props become part of this for the constructor
2. now you create an instance -> the constructor is executed ... and the new function is assigned to the name that first had a reference to the prototypes method.

to overwrite you have to create a instance first and then overwrite the method for that instance or make use of inheritance and use different classes:

Ok that's basically what I did in my experiment.
This method also allows me to overwrite the method defined in the "class" function of the base...

Code:

<html>
<body>
 
<script type="text/javascript">
 
function Foo(firstNumber,secondNumber){
  this.a = firstNumber; //"a" is now a property of the Foo Object
  this.b = secondNumber;//"b" is now a property of the Foo Object
  this.Multiply = function(){return this.a * this.b;};
};
Foo.prototype = {
    Add: function(){return this.a + this.b;},
    Divide: function(){return this.a/this.b;},
};
 
function GrownUpFoo(firstNumber, secondNumber, thirdNumber){
   this.Foo = new Foo(firstNumber, secondNumber);
   this.c = thirdNumber;
};
 
GrownUpFoo.prototype = {
//The following agumetns the multiply method
     Multiply: function(){return this.Foo.Multiply() * this.c;}
};
 
 
var instanceOfGrownUpFoo = new GrownUpFoo(2,3,4);
document.write(instanceOfGrownUpFoo.Multiply());
document.write("<br />");
document.write(instanceOfGrownUpFoo.Foo.Multiply());
 
</script>
 
</body>
</html>

**Frinavale** · Feb 20 '09, 06:18 PM

Thanks a lot for your help Gits!
I have a much better understand about the JavaScript engine, JavaScript Objects, and even inheritance in JavaScript.

:)

-Frinny

**Frinavale** · Feb 20 '09, 06:38 PM

Just to recap everything I learned here:

There are 2 ways to define and use a class in JavaScript.
The fist allows you to define a class and use it to create multiple instances (objects) of it.

The other defines a class and creates an instance of it at the same time (literally) but cannot be used to create more instances of the class..

To create a class that you can create multiple instances of you need to define it like:

Code:

 function MY_CLASS() {
    this.aProperty = 'foo';
    this.aFunction = function() { return "something"; };
}

Then you can use it to create multiple instances:

Code:

var firstMyClassInstance = new MY_CLASS();
var secondMyClassInstance = new MY_CLASS();
var thirdMyClassInstance = new MY_CLASS();

If you don't need to more than one instance of the class, you can define one and create an instance of it at the same time by:

Code:

//the variable anObject is an object that is an instance of the class defined inline/litterally
var anObject= {
    aProperty: 'some_value',
    aFunction: function() { return "something";}
};

Also the prototype property is an Object that is part of every Object.
It is used to provide additional properties/methods to an Object but is not to be used to "overwrite" any properties/methods in the class that is a part of. The JavaScript engine loads and parses the prototype Object and anything defined within the prototype becomes part the Object that the prototype belongs to.

This is why my attempts to overwrite the method defined in the "class" function with a method defined in the prototype property was failing.

You cannot use the prototype property like inheritance, to overwrite the methods in the class that is is a part of.

You have to properly create a new derived class that inherits the first class in order to extend functionality in the base class.

**gits** · Feb 20 '09, 06:39 PM

no problem ... glad i could have been of some help :)

kind regards,
gits

**gits** · Feb 20 '09, 06:44 PM

Originally posted by Frinavale

Also the prototype property is an Object that is part of every Object.
It is used to provide additional properties/methods to an Object but is not to be used to "overwrite" any properties/methods.

that's right except when you use inheritance ... as you see in my previous example ... the inheritance was made by overwriting the prototype of the child-obj with a new instance of the parent-class and then you could overwrite the inherited method with a new one ... in the child-obj's class

kind regards

**gits** · Feb 20 '09, 06:49 PM

and just one more note for optimizing it a bit: when you create an instance without any parameters for the constructor then you might leave out the brackets ... this avoids the parsing of an empty args list for the parser and performs better ;)

**Frinavale** · Feb 20 '09, 06:52 PM

Originally posted by gits

that's right except when you use inheritance ... as you see in my previous example ... the inheritance was made by overwriting the prototype of the child-obj with a new instance of the parent-class and then you could overwrite the inherited method with a new one ... in the child-obj's class

kind regards

Haha, don't try and confuse me now, I've finally got it!
:)

The only way to overwrite a method defined in a "class" function is to create a new "child-class" function. This child class is able to overwrite the methods in the parent-class.

JavaScript Object and Prototypes

JavaScript Object and Prototypes

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment