this Vs. prototype [duplicate]

Question

Whats the difference between defining the method "area" as a property of "this" instead of "prototype"?

//console.clear()

function Rectangle(w, h) 
{
    this.width = w;
    this.height = h;
    this.area = function( ) { return this.width * this.height; }
}


var r = new Rectangle(2, 3);
var a = r.area( );

//console.log(a)

function Square(s) 
{
    this.side= s;
}

Square.prototype.area = function(){return this.side * this.side; }

var r = new Square(2);
var a = r.area( );

//console.log(a)

In JavaScript - The definitive guide in the section Prototypes and Inheritance of Chapter 9 , part 1, the author says that defining the method "area" inside the prototype object is beneficial, but his explanation wasn't really understandable:

"..the area of every single Rectangle object always refers to the same function (someone might change it, of course, but you usually intend the methods of an object to be constant). It is inefficient to use regular properties for methods that are intended to be shared by all objects of the same class (that is, all objects created with the same constructor)."

I know this question almost looks like this one, but it is not.

Answer 1

Defining a function with whatever = function() { ... } tends to create what's called a "closure", where the function can access local variables of the function that defines it. When you say this.fn = function() { ... }, each object gets an instance of the function (and a new closure). This is often used to create "private" variables in Javascript, but comes with a cost: each function (in each object) is distinct, and takes up more memory.

When you say Rectangle.prototype.fn = function() { ... }, one instance of the function is shared by all Rectangles. This saves memory, and can minimize some memory leaks in browsers that handle closures badly. If you don't need "private" members, or other such access to the defining function's local variables, it's usually a better idea.