javascript - 从对象内部刷新对象

Question

我正在尝试找到一种从对象内部刷新对象的方法，尽管我不确定是否可能。

刷新的意思是通过调用方法而不是赋值来替换当前对象。

此代码将查找每个输入元素，并将元素引用以及每个元素的 name 和 value 属性存储在单独的数组中。

HTMLElement.prototype.getChildInputs = function() {
  let eles = [...this.querySelectorAll("input")];
  return {
    eles,
    fields: eles.map(ele => {
      return {
        name: ele.name,
        value: ele.value || ""
      }
    }),
    refresh: function() {
      return this.getChildInputs();
    }
  }
}

注意请记住，这是一个最小的示例

HTMLElement.prototype.getChildInputs = function() {
  let eles = [...this.querySelectorAll("input")];
  return {
    eles,
    fields: eles.map(ele => {
      return {
        name: ele.name,
        value: ele.value || ""
      }
    }),
    refresh: function() {
      return this.getChildInputs();
    }
  }
}

let i = document.querySelector(".container").getChildInputs();
console.log(i);

<div class="container">
  <div class="field">
    <label>first name</label>
    <input name="f_name" />
  </div>
  <div class="field">
    <label>last name</label>
    <input name="l_name" />
  </div>
  <hr/>
  <div class="field">
    <label>username</label>
    <input name="username" />
  </div>
  <div class="field">
    <label>password</label><input name="password" type="password">
  </div>
</div>

为了刷新上述对象，我必须使用变量赋值，a.e.

i = i.refresh();

我想做的是能够简单地写

i.refresh();

并让对象重写自身。我最初的尝试是最明显的，但这是不允许的:

HTMLElement.prototype.getChildInputs = function() {
  ...
  return {
    ...,
    refresh: function() {
      this = this.getChildInputs();
    }
  }
}

让我相信这可能是不可能的，但我可能错误地思考了这个问题。任何帮助都会非常好。

Answer 1

也许像这样？

HTMLElement.prototype.getChildInputs = function() {
  const parent = this;
  return {
    eles: [...parent.querySelectorAll("input")],
    get fields() {
      this.eles.map(ele => {
        return {
          name: ele.name,
          value: ele.value || ""
        }
      })
    },
    refresh() {
      this.eles = [...parent.querySelectorAll("input")]
    }
  }
}