javascript类中未定义的变量

Question

我在运行和理解 javascript 中的类时遇到问题。我正在用我制作的一个简单的应用程序对此进行试验。它的最终目标只是从textarea 中获取名称，将其存储在一个数组中，然后对其执行操作，例如将它们显示到屏幕上或随机播放它们。为此，我做了 2 节课。一个用于将名称存储到数组中，然后另一个从此类扩展以操作数组 - 只是为了组织。这是我的代码：

将名称存储到数组

import $ from 'jquery';

class SaveInput {

  // dom selection usually and firing events when a page loads.
  constructor(){
    this.mainText = $('.main-text');
    this.names = [];
    this.events();
  }

  //events to watch for such as click
   events() {
    // save names to array, no submit button
    this.mainText.blur(this.saveNameIndex.bind(this));
  }

  // methods to be called from events

  // save names without submitting
   saveNameIndex() {
    let namesResult = this.names = this.mainText.val().split('\n');
     return namesResult;
  }
}

export default SaveInput;

操作数组

import $ from 'jquery';
import SaveInput from './SaveInput';

class Display extends SaveInput {
  // dom selection usually and firing events when a page loads.
  constructor(names){
    super(names);

    this.h1= $('h1');
    this.events();
  }


  //events to watch for such as click
    events(){
    this.h1.click(this.log.bind(this));
  }

  // methods to be called from events

  //display images with names
  log () {
    console.log('test');
  }

}

export default Display;

我做什么并不重要，正如您从我的第二堂课中看到的那样，我只是想通过单击h1 标记来控制台记录一些文本来进行测试。应用加载时我总是遇到同样的错误：

App.js:10522 Uncaught TypeError: Cannot read property 'click' of undefined
    at Display.events (App.js:10522)
    at Display.SaveInput (App.js:96)
    at new Display (App.js:10509)
    at Object.defineProperty.value (App.js:10412)
    at __webpack_require__ (App.js:20)
    at Object.defineProperty.value (App.js:63)
    at App.js:66

我想要从saveInput 类中获得的唯一东西是名称数组，因此我可以将它传递下去，并且在我扩展该类时似乎存在一些冲突。我错过了什么？

Answer 1

当您创建Display 对象时，它首先调用基础对象的构造函数。 SaveInput 构造函数调用 this.events()，您已在派生的 Display 类中重写了它。该覆盖实现期望设置this.h1，但尚未设置，因此您会看到错误。

我真的不明白你在这里要做什么来知道要建议什么修复，但这是一个基于构造函数中发生的事情以及派生类准备好做什么的时间问题。可能您应该从构造函数中取出一些东西，以便在调用 this.events() 之前完全形成对象。

此外，如果您希望调用events() 的SaveInput 版本，则需要将super.events() 添加到events() 的Display 实现中，这样基础对象的版本也会被调用。