为何JavaScript对象中的count属性无法被持久修改？

先看你的代码：

console.log("hello");

var data = {
    data() {
        return { count: 0 };
    },
    plus() {
        return ++this.data().count;
    },
};

console.log(data.data().count); //0
console.log(data.plus()); //1
console.log(data.data().count); //0

问题核心很直白：每次调用data()方法，都会生成并返回一个全新的{ count: 0 }对象。

• 第一次打印data.data().count，拿到的是刚生成的新对象的count，值为0
• 调用plus()时，this.data()又创建了一个临时对象，你对这个对象的count做了自增并返回1，但这个对象用完就被丢弃了，根本没和持久状态挂钩
• 第三次打印data.data().count，再次生成新对象，count还是初始的0

解决办法 #

要保持状态一致，得把状态存在对象的固定属性里，而非每次返回新对象。这里给两种常见写法：

写法1：用独立属性存储状态

console.log("hello");

var data = {
    _count: 0,
    data() {
        return { count: this._count };
    },
    plus() {
        return ++this._count;
    },
};

console.log(data.data().count); //0
console.log(data.plus()); //1
console.log(data.data().count); //1

写法2：始终返回同一个状态对象

console.log("hello");

var data = {
    _state: { count: 0 },
    data() {
        return this._state;
    },
    plus() {
        return ++this.data().count;
    },
};

console.log(data.data().count); //0
console.log(data.plus()); //1
console.log(data.data().count); //1

内容的提问来源于stack exchange，提问作者M.Jumman