尝试扩展 p5.js 库时 Super 关键字不适用于变量

Question

我想扩展 p5.js 库以便在屏幕上的不同位置显示错误文本。我将在我的应用程序的不同地方使用它，我相信这样做比复制代码更好。

目前，除了一些属性外，几乎所有的东西都工作正常。例如，如果我访问 super.height，我将获得 0，而如果我访问 this.height，我将获得实际的 window 高度。但是，当访问 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，如有错误请耐心等待

Answer 1

我不是专家，但听起来 super 只适用于函数，不适用于变量。

你说它适用于 super.draw 和 super.mousePressed。这些都是功能。你说它不适用于 super.height、super.mouseX 或 super.mouseY。这些都是变数。

这与超级的 MDN docs 匹配：

The super keyword is used to access and call functions on an object's parent.

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.

中的工作原理

尝试扩展 p5.js 库时 Super 关键字不适用于变量

Super keyword doesn't work with variables when trying to extend p5.js library

angularjs

typescript

p5.js