JavaScript中依赖x的因变量y值为何不随x递增而变化

核心原因 #

JavaScript 中的普通变量赋值是一次性的值拷贝操作，不存在自动的依赖绑定：
你代码中var y = x + 10这行只会在脚本初始化执行到这一行的时候计算一次结果：当时x的值是2，计算得到12后直接把12这个数值赋值给y，赋值完成后y和x就彻底脱离关联了。后续你修改x的值，不会自动触发y的重新计算，所以y的值会一直保持初始的12不变。

实现y随x自动更新的方案 #

如果需要y始终跟随x的变化更新，有两种常用实现方式：

• 方案1：手动在x修改后重新计算y

var x=2;
var y;
// 封装y的计算逻辑
function calcY() {
  y = x + 10;
}
// 初始化时先算一次y
calcY();

function increment(){
  alert(x);
  alert(y);
  x++;
  calcY(); // x修改后重新计算y
}

• 方案2：使用 getter 计算属性，每次访问y时自动计算最新值

const data = {
  x: 2,
  // 定义y为getter，每次访问都会触发计算
  get y() {
    return this.x + 10
  }
}

function increment(){
  alert(data.x);
  alert(data.y); // 自动获取最新的计算结果
  data.x++;
}

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