如何追踪对象属性的值历史并实现值回退功能？

问题背景 #

现有两个修改this.value的方法：

1. changeValue()：按顺序把this.value从无值切换成value1→value2→value3

   changeValue(){
     if(!this.value){
       this.value = 'value1'
     }
     else if(this.value === 'value1'){
       this.value = 'value2'
     }
     else if(this.value === 'value2'){
       this.value = 'value3'
     }
   },
   

2. changeValues()：当this.value是value2或value3时，直接改成valueX

   changeValues(){
     if(this.value === 'value2' || this.value === 'value3'){
       this.value = 'valueX'
     }
   },
   

现在要写个changeBack()方法，点击后把valueX变回之前的value2或value3，而且没法提前指定要回退到哪个值，得靠追踪变量的历史记录来实现：

changeBack(){
  // if last value was value2 change back to value2
  // if last value was value3 then change back to value3
}

解决办法 #

核心就是存下切换到valueX之前的那个值，这样回退的时候直接用就行。

基础实现（只支持单次回退） #

1. 给你的对象/组件加个新的变量，比如this.previousValue，专门用来存切换到valueX前的旧值。
2. 改一下changeValues()方法，在改成valueX之前，先把当前值存到previousValue里：

   changeValues(){
     if(this.value === 'value2' || this.value === 'value3'){
       // 先记下来当前值，后面回退要用
       this.previousValue = this.value;
       this.value = 'valueX'
     }
   },
   

3. 写changeBack()的时候，只要当前值是valueX，就把this.value改回previousValue：

   changeBack(){
     // 只有当前是valueX的时候才回退，避免误操作
     if(this.value === 'valueX' && this.previousValue){
       this.value = this.previousValue;
       // 可选：回退完可以把previousValue清空，防止重复点回退
       // this.previousValue = null;
     }
   },
   

进阶实现（支持多次回退） #

如果需要来回切换多次（比如value2→valueX→value2→valueX再回退），可以用数组栈来存完整的历史记录：

1. 加个this.valueHistory = []数组，用来存每次修改前的旧值。
2. 所有修改this.value的方法，都在改之前把当前值压进数组：

   changeValue(){
     // 修改前先存历史
     this.valueHistory.push(this.value);
     if(!this.value){
       this.value = 'value1'
     }
     else if(this.value === 'value1'){
       this.value = 'value2'
     }
     else if(this.value === 'value2'){
       this.value = 'value3'
     }
   },
   changeValues(){
     if(this.value === 'value2' || this.value === 'value3'){
       this.valueHistory.push(this.value);
       this.value = 'valueX'
     }
   },
   

3. changeBack()直接从数组最后取出上一次的值：

   changeBack(){
     // 确保历史记录不为空
     if(this.valueHistory.length > 0){
       this.value = this.valueHistory.pop();
     }
   },
   

这样不管怎么切换，都能精准回退到上一步的值。

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