javascript prototype confusion

Question

Possible Duplicate:
Javascript - this Vs. prototype

This article says that prototype object can also help you quickly add a custom method to an object that is reflected on all instances of it.

But this code (without using prototype object) also adds method for all instances:

function al(){
  this.show = function(){alert('hi!')}

}

var x = new al();
x.show();

var y = new al();
y.show();

What could be the advantage of prototype object here? Did i misread that article?

score 4 · Answer 1 · answered Sep 25 '11 at 16:19

4

The difference here is you're adding the method show to the instance of al not the prototype. Adding to the prototype effects all instances of al while adding to the instance only affects that instance.

Here's a sample that adds show to the prototype vs. the instance

function al() {

}

al.prototype.show = function () { alert("hi"); };

The key here is that now every instance of al will have access to the single instance of show which is attached to the prototype. Even more powerful is the ability to augment existing objects via the prototype

var x = new al(); 
console.log(x.Prop);  // x.Prop === undefined
al.prototype.Prop = 42;
console.log(x.Prop);  // x.Prop === 42

answered Sep 25 '11 at 16:19

JaredPar

733,204
149
1,241
1,454

but instead of adding via prototype, i can edit constructor function definition (e.g. this.Prop = 42 inside of function al()) What is the benefit of prototype object then?? Only memory usage as Ben Clayton said?? – DrStrangeLove Sep 25 '11 at 17:03
@DrStrangeLove: A better example would have been to create an instance and then change the prototype. You would have seen that the previously created object also has the new property. So by extending the prototype you can extend already created instances. – Felix Kling Sep 25 '11 at 17:37
i see. but what's wrong with adding new methods to constructor function?? It should affect all the instances.. – DrStrangeLove Sep 25 '11 at 18:48
@DrStrangeLove you don't always get to write the constructor and even if you did by leveraging the prototype you can add methods from separate files and so keep the project modular. – clockworkgeek Sep 25 '11 at 19:17

score 1 · Answer 2 · answered Sep 25 '11 at 16:19

The main issue is with memory usage. Your first code sample will create a new copy of the function 'show' for each instance of your class. If you use the prototype method, there's a single copy of the function shared between all the instances. The 'this' operator in the function is then used to get access to the instance being edited.

This may not matter all that much for two or three instances, but if there may be many hundreds or thousands of instances, each of them having separate copies of of the function will make a huge difference to the performance of your app.

score 0 · Answer 3 · answered Sep 25 '11 at 16:21

yes the difference is that when you do it the way you did, every al instance has its own copy of the show method.

If you put it on the prototype, all instances share a copy of the method, with the context (i.e. scope) getting applied for you when the method is invoked. Its much more efficient to put the method on the prototype.

score 0 · Answer 4 · answered Sep 25 '11 at 16:22

What it means is that if you wanted to add a member function or variable to al after it is defined--especially if al were defined by someone else. If you didn't know about prototyping, you might try the following:

function al(){
  this.show = function(){alert('hi!')}

}

al.newfunction = function(){alert('hello!')}

var x = new al();
x.show();
// THIS WILL FAIL
x.newfunction();

Instead, you would need to say:

al.prototype.newfunction = function(){alert('hello!')}

var x = new al();
x.show();
// THIS WILL SUCCEED
x.newfunction();

score 0 · Answer 5 · answered Sep 25 '11 at 16:24

The show method you have defined is decalred as part of the al object. prototype would allow you to exetend an existing class. There's an example below that would add a 'trim' function to the string object. Once you have added the function to your code the 'trim' function would be available to all instances of the string object

String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ''); };

score 0 · Answer 6 · answered Sep 25 '11 at 16:25

See this example.

<script>
  function al(){
    this.show = function(){alert('hi!')}
  }

  var x = new al();
  x.show();

  var y = new al();
  y.show();
  y.test = function (){alert('no prototype!')};
  y.test();
  //x.test(); // error 

  al.prototype.test2 = function (){alert('prototype!')}; // edit al prototype
  y.test2(); // no error
  x.test2(); // no error
</script>

javascript prototype confusion

6 Answers6