javascript - JavaScript 类中 undefined variable

Question

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

将名称存储到数组

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 构造函数调用您已在派生 Display 类中重写的 this.events() 。该重写的实现期望设置 this.h1，但它尚未设置，因此您会看到错误。

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

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