在 JavaScript 中按引用存储变量

document.querySelector(".myDiv").innerHTML不保存对 HTML 内容的引用，而是返回包含元素后代的 HTML 序列化的字符串。

所以你不能使用 .myDivContent += "Hello";

更好的方法是将选择器保存在变量中，并将其值更新为

let myDiv = document.querySelector(".myDiv");
myDiv.innerHTML += "Hello";

在这里，变量包含对选择器的引用，因此您可以更新上面的类似内容myDivinnerHTML

“引用”的魔力只能通过共享变量、属性名称或闭包来实现。

闭包是唯一可以真正按照您想象的方式进行引用的东西。您需要两个函数。一个用于获取，一个用于设置：

• get: () => thing
• set: value => thing = value

这创造了一个“参考”，以你的思维方式。thing

另一个问题是，这需要我们获取并设置相同的值，因此我们需要使用属性来实现这一点。但是属性需要一个对象，你不能只有一个裸露的属性。因此，让我描述几种方法：+=

方法 1 - 无闭合

下面是可以使用属性创建间接引用其他对象（不带闭包）的对象的一种方法。属性允许您使用语法以演示的方式修改任意值（如字符串）。+=

我将引用定义为一个对象和该对象的属性。

class Ref {
  constructor(obj, prop) {
    this.obj = obj;
    this.prop = prop;
  }
  get value() {
    return this.obj[this.prop];
  }
  set value(val) {
    return this.obj[this.prop] = val;
  }
}

const person = { greeting: "Hello" };
const ref = new Ref(person, 'greeting');
ref.value += ' world';
console.log(person);

在上面的示例中，我创建了一个对象并将其存储在一个名为 person 的变量中。然后，我创建一个引用该对象和属性名称的对象。你可以说，因为 reading from 调用 getter，写入 to 调用 setter。运算符同时执行这两项操作 -- 它读取然后写入，从而修改对象。{ greeting: "Hello" }Refgreetingref.value += 'something'ref.valueref.value+=

这具有有限的灵活性，并且要求您有一个对象和一个属性来引用您希望能够获取/设置的事物。

方法 2 - 关闭

上面的例子不够灵活，无法引用局部变量。例如，它没有办法修改变量，但它可以修改变量引用的对象。所以，一般来说，如果你需要更大的灵活性，你可以动态地安装属性，并使用 getter & setter 中的闭包来引用要修改的东西，并带有如下的箭头函数：Refpersonperson

var myLocalVariable = "Hello";
Object.defineProperty(this, "ref", {
  get: () => myLocalVariable,
  set: val => myLocalVariable = val
});
this.ref += ' world';
console.log(myLocalVariable);

但是，你不能有一个裸属性，所以你必须将 getter/setter 分配给一个对象。您可以像上面一样使用，但在不合适的情况下，您必须创建自己的对象来保存属性。this

方法 3 - 保持简单

在您的情况下，您可能只想保留对元素的引用，而不是对其内容的引用。这足够灵活，可以引用任何对象（但不能引用变量）。对于大多数情况来说，这可能已经足够了。myDivmyDivContent

let myDiv = document.querySelector(".myDiv");
myDiv.innerHTML += " world";

<div class="myDiv">Hello</div>