0

Recently I started learning Javascript as I am comming from Java world. I got this book called JavaScript The Definitive guide.. I am now a little confused about Prototypes and Inheritance. I want to know what is difference between setting a function to object property and functions prototype. From the book example :

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

With this new version of the constructor, you can write code like this:

// How big is a sheet of U.S. Letter paper in square inches?
var r = new Rectangle(8.5, 11);
var a = r.area( );

This solution works better but is still not optimal (why) . Every rectangle created will have three properties ( Yes, and so what ? ). The width and height properties may be different for each rectangle, but 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 (WHY ??? What is the problem ? ) (that is, all objects created with the same constructor).

Adelin
  • 18,144
  • 26
  • 115
  • 175
  • In this case I should define area as prototype: Rectangle.prototype.area=function()... That way all Recangle share the same function since calculating area is always the same for Rectangle this is a good thing. when with or height changes then calling area assures the always return the right value. You could set area when creating the object but then you'll have to create getters and settings for both with and height to re calculate area when changing either of them. – HMR May 25 '13 at 13:01
  • If you want to understand how prototype works and how to create object instances from functions than try to run this code: http://stackoverflow.com/questions/16063394/prototypical-inheritance-writing-up/16063711#16063711 I suggest using Firefox with firebug plugin or Chrome, you can copy and paste code in the console and run it without reloading pages every time. – HMR May 25 '13 at 13:03
  • 1
    @HMR: there is already a "reference" answer on SO: http://stackoverflow.com/questions/1595611/how-to-properly-create-a-custom-object-in-javascript#1598077 – zerkms May 25 '13 at 13:09
  • The link I posted was aimed at people trying to understand how prototype works (basic). The link you posted is a good complete reference but hard to digest when starting out. A little more complete would be goog.inherits http://docs.closure-library.googlecode.com/git/closure_goog_base.js.source.html#line1466 this sets childs superClass_ to be used when you want to call a parent function when overriding it using goog.base (on the same page) – HMR May 25 '13 at 13:45
  • @zerkms +1 and thank you for the link. Nice way to solve parametered constructors with _init, goog.inherit needs you to call Parent.call or Parent.apply yourself. – HMR May 25 '13 at 14:37

1 Answers1

5

Rectangle object always refers to the same function

That's incorrect. Every rectangle object will have its own copy of a function assigned to area property.

While if you used a prototype-based definition you would have a single function shared across all the instances.

So from the performance and memory consumption point of view it's better to define it as

Rectangle.prototype.area = function() {
    return this.width * this.height;
};
zerkms
  • 249,484
  • 69
  • 436
  • 539
  • @Adio: personally I don't think there are other differences I would care of. – zerkms May 25 '13 at 13:05
  • Re setting and re defining the area will affect all instances of Rectangle even the ones that were created before re defining the area function. You can't change the value of a prototype on an instance: b=new Rectangle();b.area=55; This will add an area property to b with value 55 but does not affect area of other Rectangle instances (they get it from Rectangle). It's confusing so I send you the link to experiment with again: http://stackoverflow.com/questions/16063394/prototypical-inheritance-writing-up/16063711#16063711 – HMR May 25 '13 at 13:18
  • @HMR: I have no idea what you're talking about. Before continuing to argue please point me to my words when I said that it would change it. And, uhm, I **do** understand how references work in javascript. And it's not confusing me, since I fully understand how prototype-based inheritance works in js. – zerkms May 25 '13 at 13:19
  • @zerkms Tried to answer Adio's question "Are there other differences" assuming he meant specifying attributes with "this" or prototype (not even mentioning var/closures). The confusing part was aimed at the OP since "inheritance" through prototype doesn't really work like in class based languages. It's not easy to explain in a comment so posted the link with most common things people fall for (like not expecting prototype values shared among instances and not being able to assign new value of the prototype through an instance). I see I forgot the @ Adio in the pref comment, sorry for that. – HMR May 25 '13 at 14:48