what is the difference between these two method representations in js

Question

I am developing a website. I have come to a conclusion that I need to build a somewhat more complex framework for my javascript code. I have started researching different example of how to write a javascript library. I came up with somewhat confusing ways to write down methods. I'd really appreciator some clarification.

So here is how I would normally write down a method:

var ReportEnhancements =
 function () {
     this.Name = function()
     {
        alert('It is me!');
     }
}

And here is another way to represent methods:

 ReportEnhancements.prototype.Tooltip = {
          setByTitle :function(elementsToTooltip) {
              alert('I am about to be tooltiped!')
         }
 }

There are two things that puzzle me:

When should I use the prototype keyword? When should I just declare the method into a member's name?
Look at setByTitle and Name, as you can see, they are different, even though they both declare methods and both methods are public.
Why the difference between this.Name = function() and setByTitle :function() . Why is there two different syntaxes to declare methods?

Edit:

I am getting closer to understanding the differences, but there is one big issues I haven't completely grasped yet. Why do these two ways to represent methods, and thereby classes have two different access rules. I cannot seem to declare a private method in a javascript object literal. On the other hand, if I have got a regular nested element, I cannot seem to expose it as a public modifier. What is the thing with the access modifiers ?

Thank you!

possible duplicate of [Use of 'prototype' vs. 'this' in Javascript?](http://stackoverflow.com/questions/310870/use-of-prototype-vs-this-in-javascript) — David Tang, Mar 16 '11 at 14:09

Alnitak · Accepted Answer · 2011-03-16T16:49:10.850

One significant difference (although this doesn't answer the why either is preferred) is scope.

In the former, this.Name() has access to any other variables declared in the outer function, because it's all one closure. It's known as a "privileged method".

The latter version, being declared completely outside of the original scope has no access to those "private" member variables.

Technically the latter is actually more memory efficient, since that function is only created once. In the first version the inner function is recreated every time an object of that type is instantiated. If you've only got a few such objects handing around it doesn't matter, but if you're going to create hundreds of them then you really should use the prototype based method.

EDIT - regarding your edit about access modifiers:

Well, there's actually no access modification at all.

The former method creates a "closure", and closures can contain variable declarations, which have local-only scope. However a function is also an object, so adding properties to this exposes those properties to the outside world. A common way to "export" a method or variable is to do this:

var MyType = function() {
    var method = function() { ... };   // this is private variable

    this.method = method;              // this is a public property pointing
};                                     // to the private variable

On the other hand, the latter method with an object literal doesn't create a closure, it's just a stack of named properties whose values happen to contain function references.

All of the properties of an object can be accessed from the outside, so everything created with an object literal is implicitly "public".

I see, it somewhat helps understand the answer for question 1. Do you know though what is the meaning of method declaration in the two methods. Why the difference btween this.Name = function() and setByTitle :function() ? — vondip, Mar 16 '11 at 14:05
the second one is using "object literal syntax", so it's actually creating ToolTip.setByTitle — Alnitak, Mar 16 '11 at 14:08

score 1 · Answer 2 · answered Mar 16 '11 at 14:10

With prototype you can modify standard javascript objects. For example you can do

String.prototype.encode = function(){...};

or

Function.prototype.declareMethod = function(param){ this.prototype[param.name] = param.functionBody; return this; };

Since function is in the prototype chain you can then use delcareMethod on anything else.

what is the difference between these two method representations in js

2 Answers2