为什么私有字段处理在 JavaScript 中无法按预期方式工作？

Question

我认为下一个（简化的）代码应该可以工作：

class WfConfigurable {
    constructor(config) {
        this._init(config);
    }
    _init(config) {
        this.configure(config);
    }
    configure(config) {}
}

class WfStateful extends WfConfigurable {
    #saveSuspend = 0;
    constructor(config) {
        super(config);
    }
    get saving() { return this.#saveSuspend == 0; }
    configure(config) {
        this.suspendSave();
        super.configure(config);
        this.continueSave();
    }
    suspendSave() {
        this.#saveSuspend++;
    }
    continueSave(force) {
        if (force) {
            this.#saveSuspend = 0;
        } else {
            this.#saveSuspend = Math.max(this.#saveSuspend - 1, 0);
        }
    }
}

class WfApp extends WfStateful {
    constructor(config) {
        super(config);
    }
}

const wfApp = new WfApp({});

但是我收到了下一条错误消息：

TypeError：无法从类未声明的对象中读取私有成员#saveSuspend
在 WfApp.suspendSave ((index):24:13)
在 WfApp.configure （（索引）：19:14）
在 WfApp._init ((索引):7:14)
在新的 WfConfigurable ((index):4:14)
在新的 WfStateful ((index):15:9)
在新的 WfApp ((index):37:9)
在（索引）：41：15

Answer 1

问题似乎非常明显 - 超类 WfConfigurable 无法访问使用

#saveSuspend

的代码。 在您的情况下，超类的构造函数调用

_init

，它调用

configure

，它已被覆盖以使用

#saveSuspend

。

即使

#saveSuspend

不是私有的，以这种方式使用它仍然是一个问题，因为它不会被初始化。 这是因为实例成员在调用 super() 之前不会被初始化。 因此，如果您公开

suspendSave

并在

this.saveSuespend++

之后进行日志调用，您会发现结果将是

NaN

。 有很多方法可以重构，你可以自己弄清楚。 一般来说，构造函数调用可能由于多种原因（例如您在本期中发现的 JavaScript 特定原因）而被覆盖的方法是一个坏主意。