Javascript : How to override and wrap a method from parent object?

Question

My intend:

• With an object o with a method work
• Print "Hello" before o.work()
• Print "Bye" after o.work()
• o.work() will be called by a 3rd party

My attempt:

// sample library object
var o = {
     score: 5,
     work: function() {
                     console.log(this.score);
                }
};

// my code
var cons = function () {
     this.score = 10;
     this.work = function () {
          console. log("Hello");
           // how to call parent's work() ?
           // if I do this.prototype.work() -> prints 5
           // But parent's work should be called when this.score is 10
          console. log("Bye");
     };
 };
 cons.prototype = o;
 my_o = new cons();

 // my_o will be passed to 3rd party instead of o

In short:

• I am attempting to decorate inherited method.
• Its easy with super but JavaScript doesn't have super.

They say prototypal inheritance is supirior.

Update:

• work() uses this.score, which is overridden after inheritance.

Update 2:

• Expectation is o.work() should print 5
• Expectation is my_o.work() should print 10

Answer 1

It's a bit ugly, but you can call cons.prototype.work;

var Cons = function () {
     this.work = function () {
         alert('Hello');
         cons.prototype.work.call(this); // <= here
         alert('Bye');
     };
 };

Or more generic:

var Cons = function () {
     this.parentwork = arguments.callee.prototype.work;
     this.work = function () {
         alert('Hello');
         this.parentwork.call(this);
         alert('Bye');
     };
};

See this jsFiddle

Answer 2

You need to either know exactly who the parent you are trying to call is, and call it directly (passing the local this value using the .call method) or you need to use an OOP library that implements such abilities at the cost of requiring a rather convoluted code design.

Answer 3

No, you would need to give the do function in the constructor and the do function in the prototype different names.

Instance members created inside a constructor will occlude properties of the same name defined in the prototype

Have a look at this pic from john resig book :

When we run the test by loading the page into the browser, we see that the test passes! This shows that instance members created inside a constructor will occlude properties of the same name defined in the prototype.

The precedence of the initialization operations is important and goes as follows:

• 1 Properties are bound to the object instance from the prototype.
• 2 Properties are added to the object instance within the constructor function.

Answer 4

replace the line

 // how to call parent's work() ?

with

cons.prototype.work();

as simple as that:)

Answer 5

Figured it out :

// sample library object
var o = {
     score: 5,
     work: function() {
                     console.log(this.score);
                }
};

// my code
var cons = function () {
     this.score = 10;
     this.parent = arguments.callee.prototype;
     this.work = function () {
          console. log("Hello");
           // this.prototype.work() // Doesn't work since 'this' is an object
           // objects don't contain a link to prototype.
           // ###### With direct reference to `cons` ###### //
           // cons.prototype.work(); // (No Context) -> prints 5
                    // OR
           cons.prototype.work.call(this); // (With 'this' context) -> prints 10
           // ###### Without direct reference to `cons` [ Preferred ] ###### //
           // this.parent.work(); // (No Context) -> prints 5
                    // OR
           this.parent.work.call(this); // (With 'this' context) -> prints 10
          console. log("Bye");
     };
 };
 cons.prototype = o;
 my_o = new cons();

 my_o.work();

Expectations Met:

• o.work() prints 5
• my_o.work() prints 10