The Semantics of All JS Class Elements

December 9, 2024

翻译自：https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html
过时警告：原文编写于 2018/05/02

本文总结了当前和提议的类字段和方法语义。在撰写本文时，除了私有静态字段和方法外，所有描述的语义都已获得 TC39 的一致意见。

我将讨论下表中的特性。完整的特性集是各列的乘积。

可见性	位置	类元素
公共	实例	字段
私有	静态	方法

我将详细描述每一列的语义，以及它们彼此组合以及与现有 JS 语言特性的组合结果。

ES6 已经提供了公共实例方法和静态方法。上述特性矩阵中的其余部分正在由三个独立的提案推进：

Chrome 72 已经提供了公共实例字段和公共静态字段。字段的实现工作正在 Firefox 和 Safari 中进行中。

心智模型

以下是上述各列的心智模型。下一节将通过具体的示例深入探讨语义，从而强化这些直觉。

可见性

公共元素是可写且可配置的属性。作为属性，公共元素参与原型继承。

私有元素仅可以通过词法作用域名称在具有特定来源的对象上访问。由于它们不是属性，因此它们也不参与原型继承。

换一种说法，私有的行为是公共行为的严格子集。封装正是通过词法作用域与对象分派来源限制的组合实现的。JS 中的私有概念是为 JS 设计的，与其他语言中的“私有”不同。

位置

实例元素在类的实例上访问。

静态元素在类构造函数上访问。

类元素

字段是与类关联的状态，具有良好的声明式语法。实例字段是每个实例的状态。静态字段是每个类构造函数的状态。

方法是与类关联的某种行为，具有良好的声明式语法。实例方法和静态方法每个类评估只有一个标识。实例方法位于原型上，静态方法位于类构造函数上。

通过示例具体说明语义

我希望通过以下示例阐明所有类元素的语义。每个示例之后都会简要解释突出显示的语义。

公共实例字段

类可以声明公共字段，这些字段可以在实例上作为属性访问。

公共实例字段是由 Object.defineProperty 添加的属性。它们在对象的基本类构造时间，在构造函数体运行之前添加。

javascript

class Ex1 {
    publicField;

    constructor() {
        let desc = Object.getOwnPropertyDescriptor(this, "publicField");
        assert(desc.value === undefined);
        assert(desc.writable);
        assert(desc.enumerable);
        assert(desc.configurable);
    }
}

new Ex1();

对于子类，如果在调用 super() 之前访问 this，则会抛出 ReferenceError。[(*)] 因此，公共实例字段是在 super() 返回时添加的。

javascript

class Ex2_Base {
    basePublicField;
}

class Ex2_Sub extends Ex2_Base {
    subPublicField;

    constructor() {
        super();

        assert(this.hasOwnProperty("basePublicField"));
        assert(this.hasOwnProperty("subPublicField"));
    }
}

new Ex2_Sub();

JavaScript 中的所有构造函数都可以返回不同的对象，从而覆盖 new 的结果以及来自 super() 的新绑定的 this 值。对于实例字段，如果超类构造函数返回不同的内容，则子类的字段仍然会被添加。

javascript

class Ex3_Base {
    basePublicField;
}

class Ex3_ReturnTrickBase {
    trickyBasePublicField;

    constructor() {
        return new Ex3_Base();
    }
}

class Ex3_ReturnTrickSub extends Ex3_ReturnTrickBase {
    trickySubPublicField;

    constructor() {
        super();

        assert(!this.hasOwnProperty("trickyBasePublicField"));
        assert(this.hasOwnProperty("basePublicField"));
        assert(this.hasOwnProperty("trickySubPublicField"));
    }
}

new Ex3_ReturnTrickSub();

公共字段名称可以像属性一样计算出来。它们在每个类评估时只计算一次。

javascript

let count = 0;
function makeEx4(sym) {
    return class Ex4 {
        [(count++, sym)];
    };
}

let key = Symbol("key");
let Ex4 = makeEx4(key);
assert(count === 0);
let ex4a = new Ex4();
assert(ex4a.hasOwnProperty(key));
assert(count === 1);
let ex4b = new Ex4();
assert(ex4b.hasOwnProperty(key));
assert(count === 1);

公共实例方法

类可以声明公共方法，这些方法可以通过原型在实例上访问。

公共实例方法在类评估时使用 Object.defineProperty 添加到类原型中。它们是可写的、不可枚举的和可配置的。

javascript

class Ex5 {
    publicMethod() {
        return 42;
    }
}

let desc = Object.getOwnPropertyDescriptor(Ex5.prototype, "publicMethod");
assert(desc.value === Ex5.prototype.publicMethod);
assert(desc.writable);
assert(!desc.enumerable);
assert(desc.configurable);

生成器函数、异步函数和异步生成器函数形式也可以是公共实例方法。

javascript

class Ex6 {
    *publicGeneratorMethod() {}
    async publicAsyncMethod() {}
    async *publicAsyncGeneratorMethod() {}
}

getter 和 setter 也是可以的。没有生成器、异步或异步生成器 getter 和 setter 形式。

javascript

class Ex7 {
    get publicAccessor() {
        return 42;
    }
    set publicAccessor(x) {}
}

let desc = Object.getOwnPropertyDescriptor(Ex7.prototype, "publicAccessor");
assert(desc.value === undefined);
assert(!desc.enumerable);
assert(desc.configurable);

在实例方法中，super 引用超类的 prototype 属性。以下是调用 Base.prototype.basePublicMethod。[^(†)]

javascript

class Ex8_Base {
    basePublicMethod() {
        return 42;
    }
}

class Ex8_Sub extends Ex8_Base {
    subPublicMethod() {
        return super.basePublicMethod();
    }
}

assert(new Ex8_Sub().subPublicMethod() === 42);

私有实例字段

类可以声明私有字段，这些字段可以在类声明本身的词法作用域内从基类或子类的实例中访问。

私有实例字段用 # 名称（称为“哈希名称”）声明，这些标识符以 # 为前缀。虽然字符不同，但这遵循了使用 _ 前缀属性名称来表示私有的约定。

# 是新的 _，

封装由语言而不是约定强制执行。# 是名称本身的一部分，在声明和访问中都使用。

javascript

class Ex9 {
    #privateField;

    constructor() {
        this.#privateField = 42;
    }
}

new Ex9();

# 名称的词法作用域规则比标识符名称的词法作用域规则更严格。引用不在作用域内的 # 名称是语法错误。

javascript

class Ex10_A {
    #privateField;

    constructor() {
        this.#nonExistentField = 42; // 语法错误
    }
}

javascript

class Ex10_B {
    #privateField;
}

new Ex10_B().#privateField; // 语法错误

与词法绑定一样，在相同作用域（即类声明）中具有多个同名 # 名称是语法错误，而通过嵌套作用域进行隐藏是允许的。

请注意，由于所有 # 名称都以 # 开头，而属性名称不能以 # 开头，因此两者不会冲突。

javascript

class Ex11_A {
  #privateField;
  #privateField; // 语法错误
}

javascript

class Ex11_Outer {
    #privateField;

    constructor() {
        class Ex11_Inner {
            #privateField;

            privateFieldValue() {
                return this.#privateField;
            }

            constructor() {
                this.#privateField = 42;
            }
        }

        assert(new Ex11_Inner().privateFieldValue() === 42);
        assert(this.#privateField === undefined);
    }
}

new Ex11_Outer();

delete # 名称也是语法错误。

javascript

class Ex12 {
  #privateField;
  constructor() {
    delete this.#privateField; // 语法错误
  }
}

私有字段访问严格比公共字段访问更严格。在没有具有该名称的私有字段的对象上获取 # 名称将引发 TypeError。设置 # 名称也是如此。私有字段不是属性，不参与原型继承之类的属性查找机制。这是为了启用封装，因为属性查找机制是可观察的，例如通过 Proxy。

私有字段将词法作用域与分派来源限制相结合。对于私有实例字段，来源是通过声明私有实例字段的类构造的，无论是作为基类还是子类。

javascript

class Ex13 {
    #privateField;

    getField() {
        return this.#privateField;
    }
    setField(v) {
        this.#privateField = v;
    }
}

let ex13 = new Ex13();
let onProto = Object.create(ex13);
assertThrows(() => ex13.getField.call({}), TypeError);
assertThrows(() => ex13.setField.call({}, 42), TypeError);
assertThrows(() => ex13.getField.call(onProto), TypeError);

# 名称可以通过直接 eval 访问，就像其他词法作用域的内容一样。

javascript

class Ex14 {
    #privateField;

    constructor() {
        eval("this.#privateField = 42");
    }
}

new Ex14();

私有字段与公共字段同时添加，在基类中在构造时间添加，或在子类中 super() 返回后添加。

javascript

class Ex15_Base {
    #basePrivateField;

    setBasePrivateField() {
        this.#basePrivateField = 42;
    }
}

class Ex15_Sub extends Ex15_Base {
    #subPrivateField;

    constructor() {
        super();

        this.setBasePrivateField();
        this.#subPrivateField = 84;
    }
}

new Ex15_Sub();

与公共实例字段一样，如果 super() 覆盖返回值，则子类的私有字段仍将被添加。对于实现者而言，这意味着私有字段可以添加到任意对象中。

javascript

class Ex16_ReturnTrickBase {
    constructor() {
        return new Proxy({}, {});
    }
}

class Ex16_ReturnTrickSub extends Ex16_ReturnTrickBase {
    #subPrivateField;

    constructor() {
        super();

        this.#subPrivateField = 42;
    }
}

new Ex16_ReturnTrickSub();

虽然 # 名称在语言中不是一等公民，但它们具有可观察的不同的每个类评估标识。一个类声明的评估不能访问同一声明的另一个评估的私有字段。

javascript

function makeEx17() {
    return class Ex17 {
        #privateField;

        getField() {
            return this.#privateField;
        }
    };
}

let ex17a = new makeEx17();
let ex17b = new makeEx17();
assertThrows(() => ex17a.getField.call(ex17b), TypeError);
assertThrows(() => ex17b.getField.call(ex17a), TypeError);

最后，请注意，目前没有访问 # 名称的简写表示法。它们的访问需要接收者。

私有实例方法

私有实例方法类似于公共实例方法。它们的访问方式与私有实例字段相同。

这些方法被指定为类实例的不可写私有字段。与私有实例字段一样，它们在基类的构造时间添加，并在子类的 super() 返回后添加。

javascript

class Ex18 {
    #privateMethod() {
        return 42;
    }

    constructor() {
        assert(this.#privateMethod() === 42);
        assertThrows(() => (this.#privateMethod = null), TypeError);
    }
}

new Ex18();

生成器函数、异步函数和异步生成器函数形式也可以是私有实例方法。

javascript

class Ex19 {
    *#privateGeneratorMethod() {}
    async #privateAsyncMethod() {}
    async *#privateAsyncGeneratorMethod() {}
}

getter 和 setter 也是可以的。对于私有实例方法，没有生成器、异步或异步生成器 getter 和 setter 形式。

私有方法被指定为一个每个实例的 # 名称到属性描述符的映射列表。这保留了与公共实例方法的可表达形式的对称性，并强制执行私有字段附带的限制。

javascript

class Ex20 {
    get #privateAccessor() {
        return 42;
    }
    set #privateAccessor(x) {}

    constructor() {
        assert(this.#privateAccessor === 42);
        this.#privateAccessor = "ignored";
    }
}

new Ex20();

每个类评估只有一个私有实例方法的函数标识。即使它们被指定为每个实例的私有字段，实例方法也会在所有实例之间共享。

javascript

let exfiltrated;
class Ex21 {
    #privateMethod() {}

    constructor() {
        if (exfiltrated === undefined) {
            exfiltrated = this.#privateMethod;
        }
        assert(exfiltrated === this.#privateMethod);
    }
}

new Ex21();

在私有实例方法中，super 和 this 遵循与公共实例方法相同的语义。由于私有字段和方法不会添加到原型中，因此下面的 #privateMethod() 会抛出异常。类似地，当将不兼容来源的对象作为接收者传递给实例私有方法时，私有字段查找会抛出异常。

javascript

class Ex22_Base {
  #privateMethod() { return 42; }
}

class Ex22_Sub extends Ex22_Base {
  #privateMethod() {
    assertThrows(() => super.#privateMethod(), TypeError);
  }

  #privateMethodTwo() {
    this.#privateMethod();
  }

  publicMethod() {
    this.#privateMethodTwo();
  }

  constructor() {
    this.#privateMethod();
  }
}

assertThrows(() => (new Ex22_Sub).publicMethod.call({}), TypeError);

实例字段初始化器

所有字段都可以使用就地声明的初始化器表达式进行初始化。初始化器按声明顺序运行。实例字段初始化器表达式被指定为不可观察实例方法的主体，这决定了 this、new.target 和 super 的值。

没有初始化器的字段将初始化为 undefined。

javascript

class Ex23 {
    #privateField = 42;
    publicFieldOne = 84;
    publicFieldTwo;

    constructor() {
        assert(this.#privateField === 42);
        assert(this.publicFieldOne === 84);
        assert(this.publicFieldTwo === undefined);
    }
}

new Ex23();

字段初始化器在添加字段时按声明顺序运行，并且此顺序可由初始化器观察到。在评估 #privateField 的初始化器时，由于 publicField 尚未添加，因此 #privateField 为 false。由于 #privateField 之后是 publicField，因此使用 this.#privateField 初始化 publicField 也不会出错。

这些初始化器被指定为返回初始化器表达式结果的方法。在实现中不必对方法进行具体化，但这种规范的虚拟方法决定了 this 的值。在实例字段初始化器中，this 是正在构造的对象。在实例字段初始化器运行时，this 是可访问的。

javascript

class Ex24 {
    #privateField = this.hasOwnProperty("publicField");
    publicField = this.#privateField;

    constructor() {
        assert(!this.#privateField);
        assert(!this.publicField);
    }
}

new Ex24();

在同一个类声明中允许使用多个同名的公共字段和方法，并且它们的初始化器按顺序运行。由于公共方法和字段是使用 Object.defineProperty 添加的属性，因此最后一个字段或方法会覆盖所有之前的字段或方法。

对于私有字段和方法，这种情况不会发生，因为在相同作用域中使用多个同名的 # 名称是语法错误。

javascript

let log = "";
class Ex25 {
    publicField = ((log += "1"), 42);
    publicField = ((log += "2"), 84);
    publicField() {}
}

assert(typeof new Ex25().publicField === "function");
assert(log === "12");

实例方法在运行任何初始化器之前添加，因此所有实例方法都可以在实例字段初始化器中使用。

javascript

class Ex26 {
    #privateField = this.#privateMethod();
    publicField = this.#privateField;

    #privateMethod() {
        return 42;
    }
}

assert(new Ex26().publicField === 42);

在字段初始化器中，new.target 为 undefined。

javascript

class Ex27 {
    publicField = new.target;
}

assert(new Ex27().publicField === undefined);

与实例方法一样，super 在实例字段初始化器中引用超类的原型。

javascript

class Ex28_Base {
    baseMethod() {
        return 42;
    }
}

class Ex28_Sub extends Ex28_Base {
    subPublicField = super.baseMethod();
}

assert(new Ex28_Sub().subPublicField === 42);

类体始终是严格代码，因此初始化器不能通过直接 eval 泄漏任何新的绑定。

javascript

class Ex29 {
    publicField = eval("var x = 42;");
}

new Ex29();
assertThrows(() => x, ReferenceError);

在字段初始化器中使用 arguments 是语法错误。

javascript

// 语法错误
class Ex30 {
  publicField = arguments;
}

公共静态字段

类可以声明公共静态字段，这些字段可以在类构造函数上作为属性访问。

公共静态字段在类评估时使用 Object.defineProperty 添加到类构造函数中。除此之外，它们的语义与公共实例字段相同。

javascript

class Ex31 {
    static PUBLIC_STATIC_FIELD;
}

let desc = Object.getOwnPropertyDescriptor(Ex31, "PUBLIC_STATIC_FIELD");
assert(desc.value === undefined);
assert(desc.writable);
assert(desc.enumerable);
assert(desc.configurable);

公共静态字段仅在其定义的类上初始化，而不是在子类上重新初始化。子类构造函数具有其超类作为其原型。超类的公共静态字段通过原型链访问。

javascript

class Ex32_Base {
    static BASE_PUBLIC_STATIC_FIELD;
}

class Ex32_Sub extends Ex32_Base {
    static SUB_PUBLIC_STATIC_FIELD;
}

assert(Ex32_Base.hasOwnProperty("BASE_PUBLIC_STATIC_FIELD"));
assert(Ex32_Sub.hasOwnProperty("SUB_PUBLIC_STATIC_FIELD"));
assert(Object.getPrototypeOf(Ex32_Sub) === Ex32_Base);

公共静态方法

公共静态方法声明为函数形式，并且像公共静态字段一样，也可以作为类构造函数上的属性访问。与公共实例方法一样，也接受生成器函数、异步函数、异步生成器函数、getter 和 setter 形式。

这些方法在类评估时使用 Object.defineProperty 添加到类构造函数中。与公共实例方法一样，它们是可写的、不可枚举的和可配置的。

javascript

class Ex33 {
    static publicStaticMethod() {
        return 42;
    }
}

let desc = Object.getOwnPropertyDescriptor(Ex33, "publicStaticMethod");
assert(desc.value === Ex33.publicMethod);
assert(desc.writable);
assert(!desc.enumerable);
assert(desc.configurable);

在静态方法中，super 引用超类构造函数，并且可以访问超类的公共静态方法。[^(‡)]

javascript

class Ex34_Base {
    static basePublicStaticMethod() {
        return 42;
    }
}

class Ex34_Sub extends Ex34_Base {
    static subPublicStaticMethod() {
        return super.basePublicStaticMethod();
    }
}

assert(Ex34_Sub.subPublicStaticMethod() === 42);

私有静态字段

类可以声明私有字段，这些字段可以在类声明本身的词法作用域内从类构造函数中访问。

私有静态字段在类评估时添加到类构造函数中。

javascript

class Ex35 {
    static #PRIVATE_STATIC_FIELD;

    static publicStaticMethod() {
        Ex35.#PRIVATE_STATIC_FIELD = 42;
        return Ex35.#PRIVATE_STATIC_FIELD;
    }
}

assert(Ex35.publicStaticMethod() === 42);

私有静态字段的来源限制将访问限制为类构造函数。以下代码会抛出异常，因为 basePublicStaticMethod 的 this 值是子类构造函数，它没有 #BASE_PRIVATE_STATIC_FIELD 字段。这是私有字段来源限制与 this 动态性的组合的自然结果，尽管对某些人来说出乎意料。

可以通过始终使用类构造函数作为接收者来访问私有静态元素来避免此类错误。

javascript

class Ex36_Base {
    static #BASE_PRIVATE_STATIC_FIELD;

    static basePublicStaticMethod() {
        return this.#BASE_PRIVATE_STATIC_FIELD;
    }
}

class Ex36_Sub extends Ex36_Base {}

assertThrows(() => Ex36_Sub.basePublicStaticMethod(), TypeError);

私有静态方法

私有静态方法类似于公共静态方法。它们的访问方式与私有静态字段相同。

这些方法被指定为类构造函数的不可写私有字段。与私有静态字段一样，它们在类评估时添加。

与所有方法一样，也接受生成器函数、异步函数、异步生成器函数、getter 和 setter 形式。

javascript

class Ex37 {
    static #privateStaticMethod() {
        return 42;
    }

    constructor() {
        assertThrows(() => (Ex37.#privateStaticMethod = null), TypeError);
        assert(Ex37.#privateStaticMethod() === 42);
    }
}

new Ex37();

与公共静态方法一样，super 引用超类构造函数。

javascript

class Ex38_Base {
    static basePublicStaticMethod() {
        return 42;
    }
}

class Ex38_Sub extends Ex38_Base {
    static #subStaticPrivateMethod() {
        assert(super.basePublicStaticMethod() === 42);
    }

    static check() {
        Ex38_Sub.#subStaticPrivateMethod();
    }
}

Ex38_Sub.check();

静态字段初始化器

静态字段可以具有就地初始化器。与实例字段初始化器一样，它们也按声明顺序运行，并且表达式被指定为不可观察静态方法的主体。

与实例字段初始化器一样，静态方法在运行任何初始化器之前添加，因此所有静态方法都可以在静态字段初始化器中使用。

由于初始化器表达式被指定为静态方法主体，因此 super 引用超类构造函数，this 引用类构造函数。

javascript

class Ex39_Base {
    static BASE_PUBLIC_STATIC_FIELD = this;
    static basePublicStaticMethod() {
        return 42;
    }
}

class Ex39_Sub extends Ex39_Base {
    static SUB_PUBLIC_STATIC_FIELD = super.basePublicStaticMethod();
}

assert(Ex39_Sub.BASE_PUBLIC_STATIC_FIELD === Ex39_Base);
assert(Ex39_Sub.SUB_PUBLIC_STATIC_FIELD === 42);

在评估静态字段初始化器时，类作用域内的类名绑定已初始化（即可以访问并且不会抛出 ReferenceError）。

javascript

class Ex40 {
    static #PRIVATE_STATIC_FIELD = 42;
    static PUBLIC_STATIC_FIELD = Ex40.#PRIVATE_STATIC_FIELD;
}

assert(Ex40.PUBLIC_STATIC_FIELD === 42);

一些要点

我们已经探讨了所有 JavaScript 类元素的语义。也许有些语义令人惊讶，而另一些则在意料之中。我相信私有字段不匹配直觉的一个常见原因是 # 名称的来源限制，我希望本文有助于更清楚地说明这一点。最后，我提供这两句格言：

# 是新的 _

并且

私有字段具有来源限制

致谢

我要感谢 Dan Ehrenberg 为类特性所做的不懈努力和对本文编辑的帮助，以及 Rob Palmer 的校对和建议。

编辑

2018 年 5 月 2 日 — 更正了示例 38；重新格式化以在移动设备上更好地阅读。
2018 年 5 月 3 日 — 将 this 语义添加到示例 39。
2018 年 5 月 4 日 — 更正了示例 3。（来自 Thomas Chetwin）
2018 年 11 月 6 日 — 将静态字段提案从第 2 阶段更新到第 3 阶段。
2019 年 2 月 1 日 — 更正了示例 15。（来自 @WomanCorn）

[^(*)]: 在子类构造函数中，this 处于 TDZ（时间死区），直到 super() 返回。

[^(†)]: 在实例方法中，[[HomeObject]] 是类原型。

[^(‡)]: 在静态方法中，[[HomeObject]] 是类构造函数。

←Back to home

This work is licensed under CC BY-NC-SA 4.0