CODEWITHSUNDEEP
javascriptoopmethodsprototype
Jean-Philippe Martin
Jean-Philippe Martin

Reputation: 911

JavaScript OOP: method definition with or without "prototype"

Is this code,

function Person() {
    function  myMethod() {
        alert ('hello');
    }
    this.method = myMethod;
}

equivalent to:

function Person() {    }
Person.prototype.method2  = function() {
    alert ('hello');
};

If yes, which method definition should I use and why?

Upvotes: 14

Views: 2991

Answers (5)

Brian Glaz
Brian Glaz

Reputation: 15676

In the first scenario, when you create a new person, var person1 = new Person();, it will have its own copy of myMethod. If you create 100 Person objects, they will each have their own copy of this method.

Using a prototype, every new Person object will share the method definition. This is much more memory efficient since there will only be one copy of the method.

If you are planning on having several Person objects, the second way is better.. but if there are only a few Person objects, it won't matter that much.

Upvotes: 2

The Alpha
The Alpha

Reputation: 146191

They have similar functionality but you should use the second approach (prototype) because when you will create an object using new Person() every object will share the same method2 but using the first approach each new object will have it's own myMethod() that will consume moe memory.

A few days ago I asked a similar question and got this answer.

Upvotes: 0

Imp
Imp

Reputation: 8609

It is not entirely equivalent.

In both cases, you define a function (constructor) Person() in the global namespace.

In the first case, you define a new function myMethod() in a closure inside the Person() function. Normally, the myMethod() function would not be available after the function/constructor Person() finishes. However, in this case you assign it to this.method. Thus, when you run the constructor

var myPerson = new Person();

A new object is created, then the Person() function is called with this set to the new object. Therefore, your new object receives a method field with myMethod function bound to it.

In the second case, method2 is defined inside the Person.prototype. In this case, when you call

var myPerson = new Person();

there will be no field defined directly inside your new object (as you do nothing with this in the function Person). However, every object contains a reference to its prototype. If the object is created by calling Person(), this reference is set to Person.prototype. Thus, your object will ultimately contain method2, though not directly in itself, but in the prototype. So when you call

myPerson.method2();

the interpreter looks for method2 inside the myPerson object and finds nothing, then it looks into the prototype of myPerson, which is Person.prototype and finds method2, so it calls it.

Long story short: in the first your constructor creates the method, so every time you call the constructor, a new method is created and inserted to the new object. In the second case, the method is stored in the prototype, so every object you create will have the reference to the same instance of your method.

Upvotes: 1

Matt Greer
Matt Greer

Reputation: 62027

They are functionally equivalent in your simple example, but behind the scenes work very differently. The prototype property on a function is really the "prototype template". It says "whenever an object is made and I am used as the object's constructor, give them this object as their prototype".

So all Persons created in your second example share the same copy of the method2 method.

In the first example, each time the interpreter encounters the function keyword, then it creates a new function object. So in the first example, each instance of Person has their own copy of the myMethod method. The vast majority of the time this doesn't matter. But this first approach uses more memory, and sometimes that does matter.

They are not functionally equivalent in more interesting cases. In the first example, myMethod can access local variables defined in Person, but the second example cannot, as one difference.

Upvotes: 15

Joe
Joe

Reputation: 82594

No, they are not equivalent. Although, they are similar. The first method will create a new function myMethod for each new Person() created.

The second method will have one function method2 that is "shared" by all Person's.

Upvotes: 0

Related Questions