How to call Parent method inside Child constructor Javascript ES6-classes?

Question

I try to call a method inside the parent's constructor from a child's constructor method, but I'm unable to do so. Is it possible to call the parent's method inside the constructor of the child's class?

We need this construction since we need to have access to this in different scopes: how to do `var self = this` inside es6 class?. I created a little example code which showcases our problem:

class Foo{
    constructor() {
        this.classMethod = () => {
            console.log('In Foo');
        };
    }
}

class Bar extends Foo{
    constructor() {
        super()
        this.classMethod = () => {
            console.log('In Bar');
            super.classMethod(); // How to call the this.classMethod() in Foo?
        };
    }
}

bar = new Bar();
bar.classMethod();

Expected result should be:

In Bar
In Foo

Actual output:

In Bar
TypeError: super.classMethod is not a function

When the classMethod is moved outside the scope of the constructor, everything works as expected, except that we don't have access to var self=this as stated in the StackOverflow question linked above.

class Foo{
    constructor() { }

    classMethod() {
        console.log('In Foo');
    };

}

class Bar extends Foo{
    constructor() {
        super();
    }

    classMethod () {
        console.log('In Bar');
        super.classMethod();
    };
}

bar = new Bar();
bar.classMethod();

Actual output:

In Bar
In Foo

Is it possible to call a method inside the Parent's class constructor via a method inside the Child's class constructor?

Josep · Accepted Answer · 2019-01-23T10:58:05.813

Try this:

class Foo{
    constructor() {
        this.classMethod = () => {
            console.log('In Foo');
        };
    }
}

class Bar extends Foo{
    constructor() {
        super();
        const originalClassMethod = this.classMethod.bind(this);
        this.classMethod = () => {
            console.log('In Bar');
            originalClassMethod();
        };
    }
}

bar = new Bar();
bar.classMethod();

There is an important difference between your first snipped and your second one. Notice that if you define a class like this:

class Foo {
  someMethod() {
    return 'foo';
  }
}

Then if in the console you type: Foo.prototype.someMethod you will have accesss to that method. However, that method can not be bound to any instance because you have not used the new keyword yet, right?

However, if you define a class like this:

class Foo {
  constructor() {
    this.someMethod = () => 'foo';
  }
}

That will not longer be the case, because in the second example, the property someMethod is defined on the instance of the class when the class is being instantiated.

score 0 · Answer 2 · answered Jan 23 '19 at 11:09

Try this

class Foo {
  constructor() {
    this.classMethod = function () {
        console.log('In Foo');
    };
  }
}

class Bar extends Foo{
  constructor() {
    super();
    this.barClassMethod = function () {
        console.log('In Bar');
        this.classMethod(); // How to call the this.classMethod() in Foo?
    };
  }
}

bar = new Bar();
bar.barClassMethod();

score 0 · Answer 3 · answered Jan 23 '19 at 11:13

Another trick would be actually instantiating the parent class in your constructor and call the method from there:

class Foo {
  constructor() {
    this.classMethod = () => {
      console.log('In Foo');
    };
  }
}

class Bar extends Foo {
  constructor() {
    super()
    this.classMethod = () => {
      console.log('In Bar');
      (new Foo).classMethod()
    };
  }
}

bar = new Bar();
bar.classMethod()

How to call Parent method inside Child constructor Javascript ES6-classes?

3 Answers3