Question

我有一个子类，它执行一些验证，调用扩展它的父类中的方法，这在所有地方都有效，除非我需要访问父类中的本地范围，请参阅下面的示例

子类

export default class ElementEvent extends Core {
  constructor(events){
    super(events);

    this.validation = this.validateEvent();
    this.element = this.getElement();
    this.triggered = false;
    this.player = false;
    this.waitForElementDelay = 3000;

    if (this.validation){
      if (this.element){
        this.processEvent();
      } else {
        this.waitForElement();
      }
    }

waitForElement(){
    const interval = setInterval(()=>{
      const el = this.getElement();
      if (el){
         this.element = el;
        this.processEvent();
        clearInterval(interval);
      }
    }, this.waitForElementDelay)
  }
  }

父

export default class Reading extends ElementEvent {
  constructor(event) {
    super(event);
    this.readingZoneHeight = 50; 
    this.wordsPerMinute = 300;
    this.timer = 0;
  }

  processEvent() {
    //this.elementEntryPoint = this.getElementEntryPoint();
    //this.elementExitPoint = this.getElementExitPoint();

    console.log(this);
    console.log(this.readingZoneHeight);
    window.addEventListener('scroll', () => {
      console.log('Inside Event Listener ' + this.readingZoneHeight);
      //this.handleWindowScroll();
    });
  }
}

当我控制日志时，这显示了一个阅读课，其中包含所有道具，应该阅读ZoneHeight，wordsPerMinute等，但是this.readingZoneHeight是未定义的，但是在事件监听器内，this.readingHeight是正确的值，所以不确定这里发生了什么？

任何帮助？

Answer 1

这是因为您从Reading的构造函数调用了processEvent的{{1}}方法。因此，这实际上是ElementEvent类的构造函数中super(event)调用的一部分。

由于Reading在您向super(event)实际分配任何内容之前发生，因此在您登录时this.readingZoneHeight为undefined。

使用从子类JS调用的方法的类作用域

1 个答案: