JavaScript对象出现Uncaught RangeError: Maximum call stack size exceeded问题求助

你遇到的栈溢出错误，根源是setter方法里无限递归调用了自身。

以age的setter为例：当你执行user.age = 20时，会触发set age(value)方法；而方法里的this.age = value又会再次调用同一个setter，这个过程会无限重复，直到浏览器的调用栈被撑爆，就抛出了Uncaught RangeError: Maximum call stack size exceeded。place的setter也存在完全相同的问题。

修正方案 #

Setter的作用是校验并赋值给实际存储数据的变量，而不是直接赋值给对应的属性名（否则会触发自身）。我们可以用下划线开头的变量（这是JS社区约定的私有变量命名方式）来存储实际值，再配合对应的getter来读取：

let user = {
    name: "Fra",
    surname: "Emme",
    // 内部存储用的变量
    _age: null,
    _place: null,

    set age(value) {
        if (value < 18) {
            console.log(`${value} - You are underage :(`);
        } else {
            // 赋值给内部变量，不会触发setter
            this._age = value;
        }
    },
    // 添加getter来获取age值
    get age() {
        return this._age;
    },

    get fullName() {
        return `${this.name} ${this.surname}`;
    },

    set place(value) {
        if (value === "" || value === null || value.length <= 2) {
            console.log("Invalid place");
            return;
        }
        // 赋值给内部变量
        this._place = value;
    },
    // 添加getter来获取place值
    get place() {
        return this._place;
    }
};

user.age = 20;
user.place = "Rovereto";

console.log(user);
// 输出：{ name: 'Fra', surname: 'Emme', _age: 20, _place: 'Rovereto', age: [Getter/Setter], fullName: [Getter], place: [Getter/Setter] }
console.log(user.age); // 20
console.log(user.place); // Rovereto

关键说明 #

• 用_age、_place这类变量存储实际数据，避免和setter/getter的属性名冲突
• 在setter中操作内部变量，不会触发递归调用
• 添加对应的getter后，可以像访问普通属性一样获取user.age、user.place的值

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