this.x не повторяется

Question

Я пытаюсь передать переменную методу объекта и получаю сообщение об ошибке, в котором говорится: this.phrase не повторяется

Я использую два объекта и передаю эту переменную из одного объекта в другой

Класс фразы

console.clear()
class Phrase {
  constructor(phrase) {
  console.log("Phrase constructor")
    this.phrase = phrase;
  }

  addPhraseToDisplay() {
  console.log("Phrase addPhraseToDisplay")
    let arr = [...this.phrase];
    arr.forEach(letter => {
      let li = $(`<li>${letter}</li>`);
      if (letter !== ' ') {
        li.addClass(`hide letter ${letter}`);
        $('#phrase ul').append(li);
      } else {
        let li = $(`<li>${letter}</li>`);
        li.addClass('hide space');
        $('#phrase ul').append(li);
      }
      return letter;
    });
  }

}


class Game {

  constructor() {
  console.log("Game constructor")
    this.missed = 0;
    //directly put the phrases in the constructor
    this.phrases = [new Phrase("hello world"),
      new Phrase("Wolf on wall street"),
      new Phrase("Despite making"),
      new Phrase("Karen took the kids"),
      new Phrase("alright about to head out")
    ];
    this.activePhrase = null;
  }

  getRandomPhrase() {
  console.log("Game getRandomPhrase()")
    //returns 5 of the random phrases
    return this.phrases[Math.floor(Math.random() * this.phrases.length)];
  }


  startGame() {
  console.log("Game startGame")
    let hid = document.getElementById('overlay');
    hid.style.display = "none";
    let phrs = this.getRandomPhrase();
    let stor = new Phrase(phrs);
    stor.addPhraseToDisplay();
  }


}

g = new Game()
g.startGame()

<div id="overlay"></div>

Чего мне не хватает?

Answer 1

Вот еще один способ, которым вы могли бы решить это. Вы получили ошибку из-за этих строк:

let phrs = this.getRandomPhrase(); // phrs is an instance of Phrase
let stor = new Phrase(phrs); // stor is new Phrase(new Phrase(...))
stor.addPhraseToDisplay();

Как ваш код, phrs уже является экземпляром Phrase. Поэтому вы объявили stor как new Phrase(new Phrase(/* some string */)). Ошибка возникает из stor.addPhraseToDisplay с использованием синтаксиса расширения на входе в конструктор Phrase. Это прекрасно работает, когда вводом является String, но вы используете синтаксис расширения для экземпляра Phrase, который не повторяется; например, [...new Phrase('abc')].

Просто удалите Phrase вызовы конструктора из this.phrases и вместо этого реализуйте его как массив строк; тогда ошибка больше не срабатывает:

console.clear()
class Phrase {
  constructor(phrase) {
  console.log("Phrase constructor")
    this.phrase = phrase;
  }

  addPhraseToDisplay() {
  console.log("Phrase addPhraseToDisplay")
    let arr = [...this.phrase];
    arr.forEach(letter => {
      let li = $(`<li>${letter}</li>`);
      if (letter !== ' ') {
        li.addClass(`hide letter ${letter}`);
        $('#phrase ul').append(li);
      } else {
        let li = $(`<li>${letter}</li>`);
        li.addClass('hide space');
        $('#phrase ul').append(li);
      }
      return letter;
    });
  }

}


class Game {

  constructor() {
  console.log("Game constructor")
    this.missed = 0;
    //directly put the phrases in the constructor
    this.phrases = [
      "hello world",
      "Wolf on wall street",
      "Despite making",
      "Karen took the kids",
      "alright about to head out"
    ];
    this.activePhrase = null;
  }

  getRandomPhrase() {
  console.log("Game getRandomPhrase()")
    //returns 5 of the random phrases
    return this.phrases[Math.floor(Math.random() * this.phrases.length)];
  }


  startGame() {
  console.log("Game startGame")
    let hid = document.getElementById('overlay');
    hid.style.display = "none";
    let phrs = this.getRandomPhrase();
    let stor = new Phrase(phrs);
    stor.addPhraseToDisplay();
  }


}

g = new Game()
g.startGame()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="phrase"><ul></ul></div>
<div id="overlay"></div>

Answer 2

Ваша ошибка была в том, что вы создали новую фразу из фразы с этим

let stor = new Phrase(phrs);

избавиться от этого, и это работает

console.clear()
class Phrase {
  constructor(phrase) {
  console.log("Phrase constructor")
    this.phrase = phrase;
  }

  addPhraseToDisplay() {
  console.log("Phrase addPhraseToDisplay")
    let arr = [...this.phrase];
    arr.forEach(letter => {
      let li = $(`<li>${letter}</li>`);
      if (letter !== ' ') {
        li.addClass(`hide letter ${letter}`);
        $('#phrase ul').append(li);
      } else {
        let li = $(`<li>${letter}</li>`);
        li.addClass('hide space');
        $('#phrase ul').append(li);
      }
      return letter;
    });
  }

}


class Game {

  constructor() {
  console.log("Game constructor")
    this.missed = 0;
    //directly put the phrases in the constructor
    this.phrases = [new Phrase("hello world"),
      new Phrase("Wolf on wall street"),
      new Phrase("Despite making"),
      new Phrase("Karen took the kids"),
      new Phrase("alright about to head out")
    ];
    this.activePhrase = null;
  }

  getRandomPhrase() {
  console.log("Game getRandomPhrase()")
    //returns 5 of the random phrases
    return this.phrases[Math.floor(Math.random() * this.phrases.length)];
  }


  startGame() {
  console.log("Game startGame")
    let hid = document.getElementById('overlay');
    hid.style.display = "none";
    let phrs = this.getRandomPhrase();
    //let stor = new Phrase(phrs);
    phrs.addPhraseToDisplay();
  }


}

g = new Game()
g.startGame()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="phrase"><ul></ul></div>
<div id="overlay"></div>

Это должно быть сделано `addPhraseToDisplay` должен быть методом` Game`, а не `Phrase`

console.clear()
class Phrase {
  constructor(phrase) {
    this.phrase = phrase;
  }


}


class Game {

  constructor() {
    this.missed = 0;
    //directly put the phrases in the constructor
    this.phrases = [new Phrase("hello world"),
      new Phrase("Wolf on wall street"),
      new Phrase("Despite making"),
      new Phrase("Karen took the kids"),
      new Phrase("alright about to head out")
    ];
    this.activePhrase = null;
  }

  getRandomPhrase() {
    //returns 5 of the random phrases
    return this.phrases[Math.floor(Math.random() * this.phrases.length)];
  }


  startGame() {
    let hid = document.getElementById('overlay');
    hid.style.display = "none";
    let phrs = this.getRandomPhrase();
    this.addPhraseToDisplay(phrs);
  }


  addPhraseToDisplay(phrs) {
    let arr = [...phrs.phrase];
    arr.forEach(letter => {
      let li = $(`<li>${letter}</li>`);
      if (letter !== ' ') {
        li.addClass(`hide letter ${letter}`);
        $('#phrase ul').append(li);
      } else {
        let li = $(`<li>${letter}</li>`);
        li.addClass('hide space');
        $('#phrase ul').append(li);
      }
      return letter;
    });
  }


}

g = new Game()
g.startGame()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="phrase"><ul></ul></div> <div id="overlay"></div>