JavaScript计算器类方法内属性与HTML关联机制疑问

你疑惑的currentOperand、previousOperand、operation其实是计算器的内部状态变量——它们用来存储计算过程中的数据（当前输入的数字、上一步的数字、选中的运算符），本身和HTML元素没有直接绑定，但通过类里的updateDisplay方法，实现了状态和屏幕显示的同步。

先理清类里的两类属性： #

• 构造函数里定义的this.currentOperandElement、this.previousOperandElement：这些是直接指向HTML中操作数显示元素的实例属性，负责控制屏幕上的内容展示。
• clear（以及其他方法）里的this.currentOperand等：这些是计算器的内存状态，用来记录计算的中间值，相当于计算器“脑子”里存的数据，和DOM无关，只负责逻辑层面的存储。

核心同步机制：updateDisplay方法 #

这个方法是连接内部状态和屏幕显示的桥梁，它会把内部状态变量的值，赋值给对应的DOM元素的文本内容。比如项目里的核心代码：

updateDisplay() {
  this.currentOperandElement.textContent = this.currentOperand
  this.previousOperandElement.textContent = `${this.previousOperand} ${this.operation || ''}`
}

每次计算器的状态发生变化（比如输入数字、点击运算符、清空、计算结果），对应的方法（appendNumber、chooseOperation、clear、compute）都会在修改完内部状态后，调用updateDisplay，把最新的状态同步到屏幕上。

举个实际流程例子： #

比如你点击清空按钮：

1. 触发clear()方法，把内部状态重置：

   this.currentOperand = ''
   this.previousOperand = ''
   this.operation = undefined
   

2. 方法最后调用this.updateDisplay()，把重置后的状态赋值给DOM元素，屏幕上的操作数区域就变成空的了。

再比如你输入数字“5”：

1. 触发appendNumber()方法，把this.currentOperand的值改成“5”
2. 调用updateDisplay()，把this.currentOperand的“5”赋值给this.currentOperandElement.textContent，屏幕上就显示出“5”了。

简单说，内部状态变量负责“存数据”，DOM元素负责“显示数据”，updateDisplay就是把“存的数”放到“显示的地方”的搬运工。

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