Custom Classes - this vs prototype?

Question

Possible Duplicate:
Advantages of using prototype, vs defining methods straight in the constructor?

What is the best practice when creating custom classes and public methods in JavaScript, and more importantly... why?

Using 'this' to create public methods?

var myClass = function() {

    this.myVar = "this is my value";

    this.myFunc = function() {
        alert( this.myVar );
    };

    this.myFunc();
};

-OR- Using 'prototype' to create public methods?

var myClass = function() {

    this.myFunc();
};

myClass.prototype = {

    myVar: "this is my value",

    myFunc: function() {
        alert( this.myVar );
    }

};

Many thanks!!!

Answer 1

Declaring a method using prototype will mean the method is available to an instance of that prototype at any time, as long as that instance is created after the method is declared.

Declaring it in the constructor using this.foo = function(){ ... } means the method will only be available after the point in the constructor where it is declared.

As a simple example lets look at named and anonymous functions.

In the following, we declare a named function and call it twice. Notice that the function executes fine from the first call even though the first call is before the declaration of the function:

foo();

function foo()
{
    alert("foo");
}

foo();

now, instead of a named function we'll use an anonymous function stored in a variable: Notice now that the first call causes an error because foo is undefined at this point.

foo();

var foo = function()
{
    alert("foo");
}

foo();

Prototypes work in a (conceptually) similar way, when we change the prototype of a function, we're affecting it before the instance of that function is created. So the following works fine:

function f ()
{
    this.bar();
}

f.prototype.bar = function()
{
    alert("bar");
};

var f1 = new f();

Notice that f.prototype.bar is physically declared after the line where we're calling it. Now compare that with the this. ... method. The following works as expected

function g()
{
    this.h = function(){
        alert("h");
    };

    this.h();
}

var g1 = new g();

while this does not because we're trying to call this.h before we've assigned a value to it:

function g()
{
    this.h();

    this.h = function(){
        alert("h");
    };
}

var g2 = new g();

Notice though that affecting the prototype of an function still uses the mechanism of assigning anonymous functions to properties of the prototype. What this means is that even using the prototype method, we can get errors if we instantiate an instance of the prototype before we've added a function to the prototype. For example, the following works fine:

function f ()
{
    this.bar();
}

f.prototype.bar = function()
{
    alert("bar");
};

var f1 = new f();

but if we move the var f1 = new f(); above the assignment to f.prototype.bar we get the an error:

function f ()
{
    this.bar();
}

var f1 = new f();

f.prototype.bar = function()
{
    alert("bar");
};