Использование функций стрелок es6 внутри класса

Question

Когда я изменяю функцию draw(){ //} на draw = () => { // }, я получаю сообщение об ошибке типа «Uncaught SyntaxError: Неожиданный токен =».В чем может быть причина?

Answer 1

Вам нужно будет использовать свойства класса babel , которые будут переносить:

class Picture {
  draw = () => {
    console.log('drawing')
  }
}

в

class Picture {
  constructor() {
    this.draw = () => {
      console.log('drawing');
    };
  }
}

Вы можете попробовать это в этом repl (обязательно включите class properties transform plugin)

Answer 2

Прежде всего, вы, вероятно, не должны этого делать.Зачем?Ну, потому что функции стрелок семантически не совпадают с обычными функциями.

Если вы зарегистрируете функции как this.draw = () => {//}, то каждый экземпляр вашего class* будет иметь дублирующее определение этой функции, которое являетсятрата пространства и неправильное использование некоторых основных функций языка, таких как наследование прототипов.

draw(), с другой стороны, регистры, которые функционируют в prototype, так что определение функции рисования может быть общим для всех экземпляров.и даже динамически изменяется для ВСЕХ экземпляров одновременно.

Answer 3

В вашем конструкторе вы можете иметь this.draw = () => {//}, но в этом нет особого смысла. draw(){//} должно быть хорошо для всего, что вы хотите.

Ниже, в моем примере, я показал оба варианта использования, поскольку вы можете видеть, что ничего не сохраняется с помощью функции стрелки.

class StandardFunction {
  draw() {
    console.log('StandardFunction: you called draw')
  }
}

class ArrowFunction {
  constructor() {
    this.draw = () => {
      console.log('ArrowFunction: you called draw')
    }
  }
}

const test1 = new StandardFunction();
const test2 = new ArrowFunction();

test1.draw();
test2.draw();

Надеюсь, вы найдете это полезным