箭头函数可以在课堂上提升吗？ (javascript)

Question

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();
};

箭头函数没有被提升，只有常规函数被提升。为什么在 animate 函数内部可以调用 this.test？类中箭头函数的不同行为？

Answer 1

虽然没有提升箭头函数，但您在此处拥有的并不是 只是 箭头函数 - 您在这里使用的是 类字段，它们是用于分配的语法糖构造函数内部实例的值（在构造函数的开头，就在任何super 调用之后）。您的代码相当于：

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

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

不是吊装的问题。

首先this.animate 获得分配给它的函数。然后this.test 得到一个分配给它的函数。然后，最终，在 requestAnimationFrame 之后，this.animate 被调用。

关于这个更简单的例子：

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

fn1();

只要在函数被调用之前将函数分配给变量的行已经运行，一切都应该工作。