JavaScript对象属性引用的全局变量更新后属性不同步更新如何解决

问题根本原因 #

你遇到的问题本质是字符串赋值为静态计算：对象myObj初始化时，infoText的字符串拼接逻辑只会执行一次，直接把当时的clickVal值拼进固定字符串里，后续clickVal更新不会触发这个字符串重新计算，所以不管怎么调用cardContent拿到的都是初始值。

可选解决方案 #

方案1：使用Getter动态计算属性（推荐） #

把infoText定义为对象的Getter访问器，每次读取这个属性的时候都会实时计算最新值，原有调用逻辑完全不用改动：

const myObj = {
  cost: 10,
  // 改成getter，每次访问时动态拼接最新的clickVal
  get infoText() {
    return `This displays the current value of your click <br />
    Current click = ${clickVal}`
  }
};

方案2：手动同步更新属性值 #

如果不想用Getter，可以在每次修改clickVal的位置，同步更新myObj.infoText的值：

function upgradeClick() {
  count -= myObj.cost;
  clickVal += 1;
  // 手动更新infoText为最新值
  myObj.infoText = `This displays the current value of your click <br />
  Current click = ${clickVal}`;
  cardContent(myObj)
}

缺点是所有修改clickVal的位置都要同步加更新逻辑，容易遗漏。

方案3：把infoText改为方法调用 #

把infoText定义为函数，每次使用时调用拿到最新值，需要调整调用处的写法：

const myObj = {
  cost: 10,
  infoText: function() {
    return `This displays the current value of your click <br />
    Current click = ${clickVal}`
  }
};

// 调用处改成执行方法
function cardContent(obj) {
  targetEl = document.getElementById('targetId');
  targetEl.innerHTML = obj.infoText();
}

内容的提问来源于stack exchange，提问作者Chilli