如何在 Child 构造函数 Javascript ES6-类中调用 Parent 方法？

Question

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

的构造函数中调用父方法

我们需要这种构造，因为我们需要在不同的范围内访问 this：。我创建了一个小示例代码来展示我们的问题：

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

当 class 方法移出构造函数的范围时，一切都按预期工作，除了我们无法访问 var self=this ，如上面链接的 Whosebug 问题中所述。

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

是否可以通过子 class 构造函数中的方法调用父 class 构造函数中的方法？

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：

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

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

但是，如果您这样定义 class：

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

情况将不再如此，因为在第二个示例中，属性 someMethod 是在 class 的实例上定义的，而 class 是正在实例化。

Answer 2

试试这个

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

Answer 3

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

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

如何在 Child 构造函数 Javascript ES6-类中调用 Parent 方法？

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

javascript

es6-class

如何在 Child 构造函数 Javascript ES6-类 中调用 Parent 方法？

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

javascript

es6-class

如何在 Child 构造函数 Javascript ES6-类中调用 Parent 方法？