Personnage類，寫入功能的普通javascript錯誤

Question

我在制作帶有ES6格式的函數時遇到問題，在我的移動函數上出現此錯誤，但我想這樣做：

未捕獲到的SyntaxError：意外令牌=

如果您想要我代碼的其他部分，請告訴我。

class Personnage {

  constructor(direction) {
    this.x = 0
    this.y = 200
    this.direction = direction

  }

  move = (direction) => {
    let coord = {
      'x': this.x,
      'y': this.y
    };
    switch (direction) {
      case DIRECTION.GAUCHE:
        coord.x--
          console.log('gauche')
        break;
      case DIRECTION.DROITE:
        coord.x++
          console.log('droite')
        break;
      case DIRECTION.HAUT:
        console.log('espace')
        coord.y--
          break;
    }
    return coord;
  }
}

export default Personnage

Answer 1

該代碼不是“ ES6”（ES2015）格式。 要在Personnage類中編寫方法，請執行以下操作：

move(direction) {
    // ...code here...
}

您的代碼采用 正在考慮添加的形式 。 它目前處於第3階段（有關階段的含義， 請參見此處 ），這意味着它可能會在某個時候添加，並且得到了Babel這樣的編譯器的普遍支持，但是它還不是JavaScript的一部分（不是ES2015的又名“ ES6”，或ES2016，ES2017或即將推出的ES2018）。

和...之間的不同

// #1
move(direction) {
    // ...code here...
}

和

// #2
move = (direction) => {
    // ...code here...
};

（請注意;最后）；＃1使用方法語法在原型上創建要由所有實例共享的方法，而＃2是使用arrow函數的實例屬性初始化程序 ，該函數為每個實例創建一個新的arrow函數（就像它在構造函數中一樣）。 當您調用該方法時，這很重要（方法語法使用它所調用的this ，箭頭函數不使用，它們使用它們關閉的this ）。

Answer 2

move = (direction) => {部分錯誤。 您必須這樣寫：

class Personnage {

    constructor(direction) { ... }

    move(direction) { /* code goes here */ }
}