Ключевое слово Super не работает с переменными при попытке расширить библиотеку p5.js - PullRequest
Новая
       8

Ключевое слово Super не работает с переменными при попытке расширить библиотеку p5.js

0 голосов
/ 11 января 2019

Я хочу расширить библиотеку p5.js, чтобы текст ошибки отображался в разных местах на экране. Я буду использовать его в разных местах моего приложения, и я считаю, что лучше сделать это, чем дублировать код.

На данный момент почти все работает нормально, за исключением некоторых свойств. Например, если я получу доступ к super.height, я получу 0, а если я получу доступ к this.height, я получу фактическую высоту окна. Но при доступе к this.height я получаю сообщение о том, что height не определено в CustomP5, что правильно, но в то же время сбивает с толку. 

import * as p5 from 'p5';

export class CustomP5 extends p5 {
  ... // private fields not related to this issue
  constructor(sketch, htmlElement) {
    super(sketch, htmlElement);

    // Set tooltip error variables
    this.resetTooltipError();
  }

  setSetup(setupFunction) {
    super.setup = () => {
      setupFunction();
      this.setupAdditional();
    }
  }

  setDraw(drawFunction) {
    super.draw = () => {
      drawFunction();
      this.drawAdditional();
    };
  }

  showTooltipError() {
    ...
  }

Есть ли причина, по которой super.height, super.mouseX и super.mouseY не работают, в то время как super.draw или super.mousePressed работают правильно?

PS: Я совершенно новичок в js и ts, поэтому наберитесь терпения, если я ошибаюсь, пожалуйста.

1 Ответ

0 голосов
/ 11 января 2019

Я не эксперт, но похоже, что super работает только с функциями, а не с переменными.

Вы говорите, что это работает с super.draw и super.mousePressed. Это обе функции. Вы говорите, что он не работает с super.height, super.mouseX или super.mouseY. Все это переменные.

Это соответствует MDN документам для супер:

Ключевое слово super используется для доступа и вызова функций в родительском объекте. 

class Rectangle {
  constructor(height, width) {
    this.name = 'Rectangle';
    this.height = height;
    this.width = width;
  }
  sayName() {
    console.log('Hi, I am a ', this.name + '.');
  }
  get area() {
    return this.height * this.width;
  }
  set area(value) {
    this.height = this.width = Math.sqrt(value);
  }
}

class Square extends Rectangle {
  constructor(length) {
    this.height; // ReferenceError, super needs to be called first!

    // Here, it calls the parent class' constructor with lengths
    // provided for the Rectangle's width and height
    super(length, length);

    // Note: In derived classes, super() must be called before you
    // can use 'this'. Leaving this out will cause a reference error.
    this.name = 'Square';
  }
}

Так что звучит так, как будто это работает, как задумано. Возможно, вы захотите потратить некоторое время на изучение того, как наследование и ключевое слово super работают в JavaScript.

...