Question

I’m just getting into JavaScript and I’m trying to wrap my head around prototypal inheritance. It appears that there’s multiple ways to achieve the same effect, so I wanted to see if there is any best practices or reasons to do things one way over the other. Here’s what I’m talking about:

// Method 1
function Rabbit() {
    this.name = "Hoppy";

    this.hop = function() {
        console.log("I am hopping!");
    }
}

// Method 2
function Rabbit() {}

Rabbit.prototype = {
    name: "Hoppy",

    hop: function() {
        console.log("I am hopping!");
    }
}

// Method 3
function Rabbit() {
    this.name = "Hoppy";
}

Rabbit.prototype.hop = function() {
    console.log("I am hopping!");
}

// Testing code (each method tested with others commented out)
var rabbit = new Rabbit();
console.log("rabbit.name = " + rabbit.name);        
rabbit.hop();

All of these appear to have the same effect individually (unless I’m missing something). So is one method preferred over the other? How do you do it?

Answer 1

When you put a method on the prototype, every instance object shares the same reference to the method. If you have 10 instances, there is 1 copy of the method.

When you do what you did in example 1, every instance object has its own version of the same method, so if you create 10 of your objects, there are 10 copies of the code running around.

Using the prototype works because javascript has machinery for associated a function execution with a instance, i.e. it sets the this property for the execution of the function.

So using the prototype is highly preferred since it uses less space (unless of course, that is what you want).

In method 2, you are setting the prototype by setting it equal to an object literal. Note that here you are setting a property, which I think you don’t intend to do, since all instances will get the same property.

In Method 3, you are building the prototype one assignment at a time.

I prefer method 3 for all things. i.e. In my constructor I set my property values

myObj = function(p1){
   this.p1; // every instance will probably have its own value anyway.
}

myObj.prototype.method1 = function(){..} // all instances share the same method, but when invoked  **this** has the right scope.