hoisting - kan en pilfunktion hoistas i en klass? (javascript)

class App {
  constructor() {
    this.canvas = document.createElement('canvas');
    document.body.appendChild(this.canvas);
    this.ctx = this.canvas.getContext('2d');

    this.pixelRatio = window.devicePixelRatio > 1 ? 2 : 1;

    window.addEventListener('resize', this.resize.bind(this), false);
    this.resize();

    window.requestAnimationFrame(this.animate);
  }

  resize() {
    this.stageWidth = document.body.clientWidth;
    this.stageHeight = document.body.clientHeight;
  }

  animate = () => {
    this.test(); // ---> here!
  };

  test = () => {
    console.log('here!');
  };
}

window.onload = () => {
  new App();
};

En pilfunktion hoistas inte, endast vanliga funktioner hoistas. Hur kommer det sig att man inuti animate-funktionen kan kalla this.test? Olika beteende för pilfunktioner i en klass?

Svar #1

Även om pilfunktioner inte hoistas, är det du har här inte bara pilfunktioner - du använder klassfält här, vilket är syntaxsocker för att tilldela ett värde till instansen inuti konstruktorn (i början av konstruktorn, precis efter eventuella super-anrop). Din kod är ekvivalent med:

class App {
  constructor() {
    this.animate = () => {
      this.test(); // ---> here!
    };

    this.test = () => {
      console.log('here!');
    };
    this.canvas = document.createElement('canvas');
    // ...
  }
}

Det är inte en fråga om hissning.

Först tilldelas this.animate en funktion. Sedan tilldelas this.test en funktion. Sedan, till slut, efter ett requestAnimationFrame, anropas this.animate.

För ett mer minimalistiskt exempel på detta:

const fn1 = () => {
  fn2();
};
const fn2 = () => {
  console.log('fn2');
};

fn1();

Så länge raden som tilldelar funktionen till variabeln har körts innan funktionen kallas, borde allt fungera.