Question

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

我们需要这种构造，因为我们需要访问how to do `var self = this` inside es6 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

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

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

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

3 个答案: