Is "OO" in Javascript efficient compared to normal OO Languages?

Question

JavaScript is not a class orientated programming language. However, there are some approaches to create object instances in JavaScript. I've read one such way is a function constructor approach to create "instances" and one way is this:

function Circle(radius) {
    this.radius = radius;
    Circle.prototype.area = function () {
        return this.radius * this.radius * 3.14
    }
}
smallWheel = new Circle(2); bigWheel = new Circle(5);
smallWheel.area == bigWheel.area => True;

Isn't there an inefficiency in that Circle.prototype.area is reset again to the same function "string" function () { return this.radius * this.radius * 3.14 when you invoke Circle(2) and Circle(5)?

Although it sets the same value over, isn't it inefficient? Imagine having hundreds of instances... and this can be inefficient?

From my understanding normal OO languages wouldn't need to compile functions over and over for an instance as it is shared. Can anyone clarify?

Edit: It was an oversight from my part , I missed a '}' in the next line after the function body . However the answer below is helpful especially the part that it should be defined outside and this.area is inefficient .

`Circle.prototype.area` must be defined out of the constructor body. — zerkms, May 24 '14 at 09:35
But how is that done ? The examples I see have it inside the function body . Yes keep it outside the function body seems to make it efficient - but how is that done ? Just write it separately ? — Nishant, May 24 '14 at 09:37
JavaScript is one of the _most_ object oriented languages compared to the more common _class_ oriented languages, just see how easy it is to create an object - `var a = {}`. — Benjamin Gruenbaum, May 24 '14 at 09:37
*Javascript is not Oject Oriented programming language.* Wrong, it *is* object-oriented. Not *class-based* object-oriented, but object-oriented nonetheless. — Frédéric Hamidi, May 24 '14 at 09:37
It actually isn't "as bad as it seems" to have the function from the *same* code (code, not just execution context!) attached to many objects. This is because modern JS implementation *share* the "compiled code" (whatever that may be), and thus only a lightweight function-object is created each time .. anyway, the `[prototype]` (when used correctly, as not done in the code) is the way to share properties (and thus objects) completely. — user2864740, May 24 '14 at 09:39
Is there any reason why this question gets so many down votes ? Am not asking a genuine question/doubt? — Nishant, May 24 '14 at 09:42
Probably because: 1) there are many duplicates for adhoc vs prototype methods, and; 2) where did *that* code come from? — user2864740, May 24 '14 at 09:42
Where did you see the object's prototype being handled inside the constructor? — JJJ, May 24 '14 at 09:42
I check the code again and it is outside . I am watching it on Misko Hevrey's video on JS introduction . And MOST importantly @Juhana , I just missed a '}' there — Nishant, May 24 '14 at 09:45
It's also worth mentioning [Object.create](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create). — Zirak, May 24 '14 at 09:46

score 6 · Accepted Answer · edited May 23 '17 at 10:32

I think you're getting confused between two approaches to defining an object in JavaScript:

function Circle(radius) {
    this.radius = radius;
    this.area = function () {
        return this.radius * this.radius * 3.14
    }
}

... vs:

function Circle(radius) {
    this.radius = radius;
}

Circle.prototype.area = function () {
    return this.radius * this.radius * 3.14
}

Both can be invoked and used in exactly the same way;

var x = new Circle(5);

x.area();

However, in the first example, yes, you're right; that function instance will exist on each instance of Circle, which, if you have many instances, is inefficient.

With the second example however, the area function exists once.

The difference between using the prototype chain to define methods vs. defining on this directly is gone through in much more detail in Use of 'prototype' vs. 'this' in JavaScript?; I highly recommend reading it.

Correct the first approach is clearly inefficient though it works . — Nishant, May 24 '14 at 09:43

score 3 · Answer 2 · edited May 24 '14 at 09:42

First -- JavaScript is very much an object oriented programming language.

It is not, however, a class based programming language.

There are far more efficient ways to write your constructor and object though:

function Circle(radius) {
    this.radius = radius;
}

Circle.prototype.area = function () {    
    return this.radius * this.radius * Math.PI;
};

smallWheel = new Circle(2);
bigWheel = new Circle(5);



// The same method -- this is true
console.log("Method match: " +    smallWheel.area == bigWheel.area);

// value match
console.log("Value match: " + smallWheel.area() == bigWheel.area());

I corrected my question thanks for clarifying it is "not class oritned" — Nishant, May 24 '14 at 09:40

Is "OO" in Javascript efficient compared to normal OO Languages?

2 Answers2