Самостоятельная ссылка в литерале класса и создание экземпляра с помощью элемента DOM

Question

Я пытаюсь получить доступ к позициям X и Y элемента, созданного в литерале класса (или любым другим возможным способом, как в литерале объекта), и к методу, который тоже использует эти свойства, получая доступ к их стилям.

class ObjectScene {
  constructor(element) {
    this.element = element;
    let posX = this.element.offsetLeft;
    let posY = this.element.offsetTop;

    this.resetWall = () => {
      this.element.style.left = 'unset';
      this.element.style.right = '0px';
    }
  }
}

const wall = new ObjectScene(document.getElementById('wall'));
console.log(wall.posX);

<div class="wall" id="wall"></div>

Это потому, что posX и posY еще не ссылаются на элемент DOM?я получаю неопределенный и NaN пытается console.log свойства.

Я делаю это, потому что у меня есть как 3 функции, использующие все те же свойства, положение, положение сброса и тому подобное, но каждая из них отличаетсяЭлемент DOM.Так что это был один из способов сделать сухой код.

Answer 1

posX, posY просто существуют в рамках конструктора.Вы фактически создаете переменную, а не свойство вашего объекта.

Вы можете, например, назначить их this, как вы это сделали с element, и, таким образом, правильно создать свойство вашего объекта..

class ObjectScene {
  constructor(element) {
    this.element = element;
    this.posX = this.element.offsetLeft;
    this.posY = this.element.offsetTop;

    this.resetWall = () => {
      this.element.style.left = 'unset';
      this.element.style.right = '0px';
    }
  }
}

const wall = new ObjectScene(document.getElementById('wall'));
console.log(wall.posX);

<div class="wall" id="wall"></div>