Can a javascript object override its parent method and call it in that method?

Question

Imagine the following scenario:

I have two classes: Parent and Child. Parent has a method foo(). Child wants to override foo(), and within do whatever foo() did in Parent's foo().

In any other programming language i would just do something like

foo(){
  super.foo();
  //do new stuff
}

But in javascript there's no such thing. Here's a short version of my code:

function Parent( name, stuff ){
  this.name = name;
  this.stuff = stuff;
}

Parent.prototype = {        
  foo: function(){ 
    console.log('foo');
  }
}

function Child(name, stuff, otherStuff ){
  Parent.call(this, name, stuff);
  this.otherStuff = otherStuff;
}

Child.prototype = new Parent();
Child.prototype.foo = function(){

  ???//I want to call my parents foo()! :(
  console.log('bar');

}

What I want to achieve is that when an instance of Child calls foo() i can get foobar in the console.

Thanks!

PS: please, no JQuery, PrototypeJS, ExtJs, etc... This is a Javascript project and also a learning exercise. Thank you.

possible duplicate of Calling overridden methods in JavaScript — Ja͢ck
– Ja͢ck, Commented Nov 18, 2013 at 15:35

Tibos · Accepted Answer · 2013-11-18 15:57:09Z

First of all, your implementation of inheritance is not great. I propose the following change:

// Child.prototype = new Parent(); // bad because you instantiate parent here
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

With that in mind, i wrote this helper function:

function base(object, methodName) {
  var proto = object.constructor.prototype;
  var args = Array.prototype.slice.call(arguments, 2);
  while (proto = Object.getPrototypeOf(proto)) 
    if (proto[methodName])  
      return proto[methodName].apply(this,args);
  throw Error('No method with name ' + methodName + ' found in prototype chain');
}

// usage:

Child.prototype.foo = function(){
  base(this, 'foo', 'argument1', 'argument2');  
  console.log('bar');
};

It has slightly more than what you wanted, in that you don't have to wonder where the method is defined in the inheritance chain, it will go all the way up to the root and try to find the method. I also expanded your example a bit with a Grandparent to exhibit this issue. The foo method has been moved from the Parent to the Grandparent (and Parent inherits from Grandparent).

Grandparent demo: http://jsbin.com/iwaWaRe/2/edit

NOTE: The implementation is loosely based on Google Closure Library's implementation of goog.base.

Guilherme · Accepted Answer · 2013-11-18 15:24:02Z

1

Its simply, you can use the prototype and use call/apply to call the parents function.

Child.prototype.foo = function(){
  Parent.prototype.foo.apply(this, arguments);
  console.log('bar');
}

Take a look: http://jsfiddle.net/J4wHW/

answered Nov 18, 2013 at 15:24

Guilherme

1,14610 silver badges17 bronze badges

1 Comment

whtlnv Over a year ago

Not as pretty as super.foo(), but it sure works. Thanks a lot!

Collectives™ on Stack Overflow

Can a javascript object override its parent method and call it in that method?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related