对象生命周期与网页方法调用之间的关系

Question

我是 OOP 的新手，我对实例化对象和通过网页调用的方法之间的关系有一些疑问。

例如。我有一个对象，其方法将元素附加到网页中，如下所示：

var Elm = function (x, y) {
  this.x = x;
  this.y = y;
};

Elm.prototype.insert = function () {
  let img = document.createElement("img");
  img.id = "pic1";
  img.src = "http://someurl.com/images/pic.png";
  img.style.position = 'absolute';
  img.style.left = this.x + "px";
  img.style.top = this.y + "px";
  document.body.appendChild(img);
};

Elm.prototype.move = function (x,y) {
  this.x += x;
  this.y += y;
};

function img_insert(x,y) {
  var pic = new Elm(x, y);
  pic.insert();
}

function img_move(x,y) {
  img.move(x,y);
}

然后在 html 中我有 2 个按钮，一个调用 img_insert，第二个调用 img_move。即使我按照顺序先调用 img_insert 然后调用 img_move。第二个不行。

调用第一个函数 img_insert 后，最终结果将是网页上的“物理”榆树，而在代码离开函数后，我理解对象的方式就消失了。问题在于第二个函数：img_move 并不是真正关于操纵已经死去的对象，而是实际上关于通过 id 获取 img 并更改 x 和 y 样式属性来操纵 DOM，对吧？

我知道如何进行 DOM 操作，我的疑问实际上是关于代码设计及其与网页的关系。提前感谢您的意见。

Answer 1

move 方法是更新Elm 的x 和y 属性。但是他们并没有更新 img 的样式。

试试类似的东西

var Elm = function (x, y) {
  this.x = x;
  this.y = y;
};

Elm.prototype.insert = function () {
  this.img = document.createElement("img");
  this.img.id = "pic1";
  this.img.src = "http://someurl.com/images/pic.png";
  this.img.style.position = 'absolute';
  this.img.style.left = this.x + "px";
  this.img.style.top = this.y + "px";
  document.body.appendChild(this.img);
};

Elm.prototype.move = function (x,y) {
  this.x += x;
  this.img.style.left = this.x + "px";
  this.y += y;
  this.img.style.top = this.y + "px";
};

var pic;

function img_insert(x,y) {
  pic = new Elm(x, y);
  pic.insert();
}

function img_move(x,y) {
  pic.move(x,y);
}