创建Character类时触发RangeError: Maximum call stack size exceeded错误排查

你的代码触发栈溢出错误的核心原因是getter和setter的无限递归调用：

• 在get firstName()中写return this.firstName时，访问this.firstName会再次触发该getter方法，形成无限循环；
• 同理，set firstName(newName)里的this.firstName = newName会再次触发setter方法，同样陷入递归。

JavaScript的getter/setter会拦截同名属性的访问与赋值操作，因此不能直接在getter/setter内部操作同名的实例属性。

修正后的代码 #

class Character {
    constructor(firstName, lastName, height){
        this._firstName = firstName;
        this.lastName = lastName;
        this.height = height;
    }

    get firstName(){
        return this._firstName;
    }
    
    set firstName(newName){
        this._firstName = newName;
    }
}

const hombre = new Character("Pedro", "Blanch", 186);

console.log(hombre.firstName); // 输出 "Pedro"

修改说明 #

将实例属性命名为_firstName（下划线开头是JavaScript中约定俗成的私有属性命名规范），让getter和setter操作这个独立属性，避免触发自身的递归调用。这样既保留了getter/setter的封装能力，又不会出现栈溢出问题。

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