javascript - javascript类中 undefined variable

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;

我做什么并不重要，正如您从我的第 2 堂课中看到的那样，我只是试图通过单击 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 构造函数调用您在派生 Display 类中覆盖的 this.events()。覆盖的实现期望设置 this.h1，但尚未设置，因此您会看到错误。

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

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