Overriding a javascript method

Question

I'm new to OOP in javascript. I can't get it right when I want to override a method. I made an example of my problem below. Also in http://jsfiddle.net/sRyQA/

function myGeometryObject(r, x, y){

    this.r = r;
    this.x = x;
    this.y = y;

    var OBJ = this;

    this.returnArea = function(){
        return 'wrong override';
    }
}

function myRectangle(r, x, y){
    myGeometryObject.call(this, r, x, y);
}
myRectangle.prototype = new myGeometryObject();

myRectangle.prototype.returnArea = function(){
    return 'right override';//I want JS to use this method
}
var rectangle = new myRectangle(0, 5, 5);
alert(rectangle.returnArea());

Felix Kling · Accepted Answer · 2011-07-04 12:46:53Z

8

The problem is that

this.returnArea = function(){
    return 'wrong override';
}

will set the property of that particular instance (as you are correctly calling the parent's constructor on the new MyRectangle instance) , and this will "override" all inherited methods.

Your prototype chain looks like this:

 +------------------+        +------------------+        +------------------+
 | MyRectangle      |        | MyRectangle      |        | MyGeometry       |
 | instance         |------->| prototype        |------->| prototype        |
 |                  |        |                  |        |                  |
 | wrong returnArea |        | right returnArea |        |                  |
 +------------------+        +------------------+        +------------------+
                             (MyGeometry instance)

where the retunArea method at the instance is the one you assign in the MyGeometryObject constructor and the one of the prototype is the one you have overwritten.

But if you assign this method to MyGeometryObject's prototype

function MyGeometryObject(r, x, y) { 
    this.r = r;
    this.x = x;
    this.y = y;    
}

MyGeometryObject.prototype.returnArea = function(){
    return 'wrong override';
}

then it will work, as the right returnArea method will come earlier in the prototype chain:

 +------------------+        +------------------+        +------------------+
 | MyRectangle      |        | MyRectangle      |        | MyGeometry       |
 | instance         |------->| prototype        |------->| prototype        |
 |                  |        |                  |        |                  |
 |                  |        | right returnArea |        | wrong returnArea |
 +------------------+        +------------------+        +------------------+
                             (MyGeometry instance)

Further notes:

Constructor function names should start with a capital letter.
If you set the prototype of MyRectangle this way, you should also set the constructor property back to MyRectangle:
```
MyRectangle.prototype = new MyGeometryObject();
MyRectangle.prototype.constructor = MyRectangle;
```

edited Jul 4, 2011 at 12:46

answered Jul 4, 2011 at 12:26

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

katspaugh Over a year ago

Another way is to overwrite the method in the myRectangle constructor (after applying the arguments to the myGeometryObject constructor). jsfiddle.net/sRyQA/2

einstein Over a year ago

@Felix KLing What does MyRectangle.prototype.constructor = MyRectangle do?

Felix Kling Over a year ago

@Woho87: It sets the constructor property of the prototype to MyRectangle. This property always points the the function the prototype is the prototype of. Try: function Foo(){}; console.dir(Foo.protoype);.

japrescott Over a year ago

@Woho87, it makes sure, that when calling new myRectagle, the correct constructor (therefor the myRectangle function, assigning the this.x, this.y etc.) will be called instead of the one of MyGeometryObject!

Collectives™ on Stack Overflow

Overriding a javascript method

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related