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;

Maniuplate Array

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()之前对象就可以完全形成。

另外，如果您希望调用SaveInput events()版super.events()，则需要将Display添加到events() {{1}}的{{1}}实现中，以便基础对象的版本也被调用。

javascript类

1 个答案: