Extend prototype function JavaScript

Question

I have an object that inherits from another object, like so:

var a = function ()
{

}
a.prototype.foo = function ()
{
    bar();
}

var b = function ()
{
    a.call(this)
}
b.prototype = Object.create(a.prototype);
b.prototype.constructor = b;

I want to have a method of b that is also named "foo" and extends a's function with the same name.

b.prototype.foo = function ()
{
    baz();
    // When .foo() is called, runs both bar() and baz()
}

Is there a simple way to accomplish this in native JavaScript without the aid of libraries?

user1050438 · Accepted Answer · 2015-07-18 18:54:03Z

4

if i understand you correctly you can extend the method

function A() {}

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

function B() {}

B.prototype = Object.create(A.prototype);
B.prototype.constructor = B;
B.prototype.foo = function() {
  A.prototype.foo.call(this);
  console.log('foo2');
}

var b = new B();

b.foo();

answered Jul 18, 2015 at 18:54

user1050438

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

Comments

kieranpotts · Accepted Answer · 2015-07-18 18:59:46Z

1

The simplest option:

b.prototype.foo = function () {
    bar();
    baz();
}

But if you make changes to a.prototype.foo, you will need to update b.prototype.foo with the same logic.

The better option is:

b.prototype.foo = function () {
    a.prototype.foo.call(this); 
    baz();
}

Now b.prototype.foo() calls a.prototype.foo() followed by its own internal logic. If you change a.prototype.foo(), those changes will be immediately reflected in the behaviour of b.prototype.foo() without requiring wider refactoring.

answered Jul 18, 2015 at 18:59

kieranpotts

1,63812 silver badges8 bronze badges

1 Comment

kieranpotts Over a year ago

That always happens. @Georgii Kats just beat me to it with the second solution, so make sure he gets the official answer if it's what you're looking for :)

Collectives™ on Stack Overflow

Extend prototype function JavaScript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related