javascript - Javascript 类为什么/如何通过在它们之前加上下划线前缀来访问它们自己的值？

Question

我发现在一个教程中找到了一个类，它允许 getter 和 setter 函数访问构造函数中名为 visible set 的字段，该字段与 getter/setter 具有相同的名称，通过前缀下划线。这里发生了什么？为什么这行得通，难道 getter/setter 函数不应该因为字段名称不正确而无法找到它吗？

class WeirdClass {
        constructor() {
            this.visible = false;
        }
        get visible() {
            return this._visible;
        }
        set visible(v) {
            this._visible = v;
        }
    }

Answer 1

想象一下，如果在没有 _visible 的情况下我们直接从 getter 和 setter 访问 this.visible:

class WeirdClass {
     constructor() {
         this.visible = false;
     }
     get visible() {
         return this.visible; //calls the getter recursively
     }
     set visible(v) {
         this.visible = v; //calls the setter recursively
     }
}

这里没有_visible，我们在所有情况下都访问this.visible。在这种情况下，当您访问 WeirdClass 实例上的 visible 属性时，它将触发 getter，后者将尝试访问 this.visible 将再次调用 getter 的属性，这将导致无限递归。

为了防止这种情况发生，他们在实例上创建了一个 _visible 属性，这样当您从 WeirdClass 实例访问 visible 属性时它不会导致无限递归并实际上通过 getter/setter 访问另一个属性 _visible。

事实上，如果您尝试实例化 WeirdClass，它甚至不会让您:

class WeirdClass {
     constructor() {
        this.visible = false;
     }
     get visible() {
        return this.visible; //calls the getter recursively
     }
     set visible(v) {
        this.visible = v; //calls the setter recursively
     }
}
//Uncaught RangeError: Maximum call stack size exceeded
const weirdClass = new WeirdClass();

这是因为构造函数试图在 this.visible 中设置 false，这会递归地触发 setter。