如何在子构造器Javascript ES6-class中调用Parent方法？

Question

我尝试从孩子的构造函数方法中调用父构造函数中的方法，但是我无法这样做。 是否可以在孩子的类的构造函数中调用父方法？

我们需要这样的结构，因为我们需要能够访问this在不同的范围： 该怎么办`无功自我= this`内ES6类？ 。 我创建了一个小示例代码来展示我们的问题：

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();

预期结果应为：

In Bar
In Foo

实际输出：

In Bar
TypeError: super.classMethod is not a function

当将classMethod移动到构造函数的范围之外时，一切都会按预期进行，除了我们无法访问var self=this如上面链接的StackOverflow问题中所述。

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();

实际输出：

In Bar
In Foo

是否可以通过Child的类构造函数内的方法来调用Parent的类构造函数内的方法？

Answer 1

尝试这个：

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();

您的第一个和第二个之间有一个重要的区别。 请注意，如果您定义这样的类：

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

然后，如果在控制台中键入： Foo.prototype.someMethod ，则可以访问该方法。 但是，该方法不能绑定到任何实例，因为您尚未使用new关键字，对吗？

但是，如果您定义这样的类：

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

情况将不再如此，因为在第二个示例中，实例化类时，在类的实例上定义了someMethod属性。

Answer 2

另一个技巧实际上是在构造函数中实例化父类并从那里调用方法：

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()

Answer 3

尝试这个

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();