类文本中的自引用，并使用 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 试图控制台.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>