Переменные класса Javascript и методы класса не могут быть упомянуты внутри класса

Эта проблема меня ооочень сильно беспокоит. Я уверен, что на этот вопрос был дан ответ, но я в растерянности, так как искал около получаса.

Вот моя проблема:

В Javascript я создал класс Game.

В настоящее время класс выглядит так:

class Game {
    this.test = "";
    this.number = 0;
    constructor()
    {
        this.cWidth = 480;
        this.cHeight = 360;
        this.i = 0;

    }
    run()
    {

        var human = new User(192,175);
        var bot1 = new Bot(339,92);
        var bot2 = new Bot(352,255);
        setInterval(this.updateGameArea, 1000 / 60);
    }
    updateGameArea()
    {
        this.clear();
        this.update();

    }
    clear()
    {
        ctx.clearRect(0,0,this.cWidth,this.cHeight);
        ctx.fillStyle = "#FFFFFF"
        console.info("cleared! cwidth = " + this.cWidth + "; cHeight = " + this.cHeight);
    }
    update()
    {
        var pos = getCoords();
        drawMousePos();
        return;
    }
}

Game game = new game();
game.run();

Обратите внимание, что этот класс также запускается внутри JQuery $(document).ready(function(){}), но должен работать, поскольку работают другие, более простые классы.

У меня несколько проблем:

  1. Переменные не могут быть определены вне класса. test и number выдают синтаксические ошибки, говоря, что game.js:161 Uncaught SyntaxError: Unexpected token .

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

  1. В updateGameArea() нельзя ссылаться на clear() и update(). Однако в run() они могут. Мне удалось обойти это, установив clear() и update() в статическое состояние и вызвав их с помощью Game.update() и Game.clear(), но я бы предпочел, чтобы я мог сделать это правильно.

  2. Переменные cWidth и cHeight НЕ содержат своих значений. Когда я тестировал clear(), когда он был статическим, cWidth и cHeight оба не были определены.

Любая помощь очень ценится.

this.test = ""; this.number = 0; должен находиться внутри constructor. В противном случае это недопустимый JavaScript. Также setInterval(this.updateGameArea.bind(this), ...) или setInterval(() => this.updateGameArea(), ...) для сохранения контекста вызова.
Patrick Roberts 13.03.2018 19:32
test, number, cWidth и cHeight не являются «переменными», это поля экземпляра. Переменные объявляются с помощью var и let, что дает им возможность быть доступными внутри. Члены this.Xyz привязаны к конкретному экземпляру класса и не могут работать в разных экземплярах.
Scott Marcus 13.03.2018 19:33
Game game = new game(); действительно должен быть чем-то вроде const game = new Game();
Bergi 13.03.2018 19:35

"Согласно странице синтаксиса класса Mozilla, кажется, что можно создавать экземпляры переменных с помощью ключевого слова this без конструктора." - нет, где вы это читаете?

Bergi 13.03.2018 19:37

Спасибо за помощь. Я ошибся в одном из примеров, когда переменная была создана с использованием ключевого слова this INSIDE функции внутри класса.

mobimobi 13.03.2018 19:40

«Переменные» никогда не «инстанцируются» (они «инициализируются» - создаются экземпляры объектов), и если перед ними стоит this, они не являются переменными, это поля экземпляра.

Scott Marcus 13.03.2018 19:48

Понятно. Спасибо за исправление.

mobimobi 13.03.2018 19:56
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
7
34
0

Другие вопросы по теме