JavaScript OOP: method definition with or without "prototype" - Stack Overflow

admin管理员组

文章数量:1201171

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?

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?

• javascript
• oop
• methods
• prototype

Share Improve this question Follow edited May 8, 2012 at 20:02 Peter Mortensen 31.6k2222 gold badges109109 silver badges133133 bronze badges asked May 8, 2012 at 14:06 Jean-Philippe MartinJean-Philippe Martin 91111 gold badge1111 silver badges1919 bronze badges 2

• 1 possible duplicate of Use of 'prototype' vs. 'this' in Javascript? – Felix Kling Commented May 8, 2012 at 14:21
• Declaring javascript object method in constructor function vs. in prototype – cliffs of insanity Commented May 8, 2012 at 14:22

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 15

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.

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.

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.

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.

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.

本文标签： JavaScript OOP method definition with or without quotprototypequotStack Overflow