JS Inheritance example: too much recursion

Question

Sorry for dump question I am new to js. I would like to override f2() function in D "class". But for some reason Fire Fox told me: "too much recursion". Could you please point me where recursion happening and how to make this code work as expected?

var B = function () {
};
B.prototype.f2 = function (x) {
    return 2 * x;
};

var C = function () {
    B.call(this);
};

var D = function () {
    C.call(this);
};

D.prototype.f2 = function (x) {
    return C.prototype.f2.call(this, x) * 7;
};

inherit(B, C);
inherit(C, D);

function inherit(Child, Parent) {
    Child.prototype = Object.create(Parent.prototype);
    Child.prototype.constructor = Child;
}

var d = new D();
console.log(d.f2(3));

I'm curious why you're studying ES5 prototype chains so intently (based on this and at least one other question of yours I've answered). The inherit function above is outdated. As of ES2015, there's a simple, clear, declarative syntax for this, and that syntax can be transpiled for older environments that don't support it yet. It's much easier to understand in that syntax. So studying this outdated way of doing it seems...non-optimal. — T.J. Crowder
– T.J. Crowder, Commented Oct 31, 2016 at 10:57
Thank you a lot, your answers are very helpful! I attended training about classical oop pattern in js, and we were asked to implement it in a two ways ES5 and ES2015. But I see what you are saying, it makes sense and makes js world ,that I just get acquainted with, more clear. — Rudziankoŭ
– Rudziankoŭ, Commented Oct 31, 2016 at 11:19

T.J. Crowder · Accepted Answer · 2016-10-31 10:55:41Z

Two problems:

You need to set up the XYZ.prototype objects before you try to add properties to them. Since your inherit function creates them, you must ensure that you do things in the right order.
You have the order of the parent and child backward in your inherit calls. It's inherit(child, parent), not inherit(parent, child).

var B = function () {
};
B.prototype.f2 = function (x) {
    return 2 * x;
};

var C = function () {
    B.call(this);
};
inherit(C, B);            // *** Moved and updated

var D = function () {
    C.call(this);
};
inherit(D, C);            // *** Moved and updated

D.prototype.f2 = function (x) {
    return C.prototype.f2.call(this, x) * 7;
};

function inherit(Child, Parent) {
    Child.prototype = Object.create(Parent.prototype);
    Child.prototype.constructor = Child;
}

var d = new D();
console.log(d.f2(3));

The ES2015 version, for comparison:

class B {
  f2(x) {
    return 2 * x;
  }
}

class C extends B {
}

class D extends C {
  f2(x) {
    return super.f2(x) * 7;
  }
}

const d = new D();
console.log(d.f2(3));

Collectives™ on Stack Overflow

JS Inheritance example: too much recursion

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related