JavaScript Class

October 30, 2026

首先定义几个类。这里涵盖大部分情况，例如私有属性暂且不表。

class Clazz {
    static {
        console.log("staticField" in this); // -> false
    }
    field = "field"; // this.field
    accessor accessor = "accessor"; // Stage 3 accessor: get/set on Clazz.prototype; private value per instance.
    static staticField = "staticField"; // Clazz.staticField
    static accessor staticAccessor = "staticAccessor"; // Clazz.staticAccessor
    method() {
        // Clazz.prototype.method
        return "method";
    }
    static staticMethod() {
        // Clazz.staticMethod
        return "staticMethod";
    }
    get getter() {
        // get Clazz.prototype.getter
        return "getter";
    }
    set setter(_: unknown) {
        // set Clazz.prototype.setter
        console.log("setter");
    }
    static {
        console.log("static", this === Clazz, "staticField" in this); // -> true true
    }
    constructor() {
        console.log("constructor", this);
    }
}

class Clazz2 extends Clazz {
    method() {
        return "Clazz2 " + super.method();
    }
    static {
        console.log("static2", this === Clazz2); // -> true
    }
    constructor() {
        super();
        console.log("constructor2");
    }
}

const Clazz3 = class NamedClazz extends Clazz2 {
    method() {
        return "Clazz3 " + super.method();
    }
    static {
        console.log("static3", this === NamedClazz); // -> true
    }
};

我们将其手工降级 class 语法，可以看出类的定义方式。

注意为了清晰，这里不将 extends 称为继承。下面继承指的是原型链继承，即设置原型链（Reflect.setPrototypeOf），原型链查找操作（Reflect.get）。 extends 可以理解为一个语法糖。

"use strict";

// 每定义一个 accessor 就会创建一个实例到值的映射。因此每个实例都有自己的 accessor 值。
var accessorValues = new WeakMap();
// 静态 accessor 的值在类上共享，因此每个 accessor 只需要一个变量。
var staticAccessorValue;
var staticAccessorTarget = {
    get staticAccessor() {
        return staticAccessorValue;
    },
    set staticAccessor(value) {
        staticAccessorValue = value;
    },
};
var staticAccessorDescriptor = Object.getOwnPropertyDescriptor(staticAccessorTarget, "staticAccessor");

/* class Clazz */
function Clazz() {
    this.field = "field"; // this，最终通过 new 操作设置
    accessorValues.set(this, "accessor");
    console.log("constructor", this);
}

// 请注意！function 语法隐式定义了一个显式的字符串键 constructor，指向 Clazz。
// 即相当于执行了 Object.defineProperty(Clazz.prototype, "constructor", { value: Clazz, ... })

/* static {} */
// 每个静态块都是一个绑定 this 到当前类的作用域
(function () {
    console.log("staticField" in this);
}).call(Clazz);

/* accessor accessor = "accessor" */
// prototype 只是一个显式的普通字符串键（和 [[prototype]] 不同，因为原型链是隐式的）。
// class 语法会将这些东西放在 prototype 对象上。
// 这样 extends 的时候就知道去哪里找到父类定义的东西。
// accessor 会成为 getter 和 setter
Object.defineProperty(Clazz.prototype, "accessor", {
    get: function () {
        return accessorValues.get(this);
    },
    set: function (value) {
        accessorValues.set(this, value);
    },
    enumerable: false,
    configurable: true,
});

/* static staticField = "staticField" */
Object.defineProperty(Clazz, "staticField", {
    value: "staticField",
    writable: true,
    enumerable: true,
    configurable: true,
});

/* static accessor staticAccessor = "staticAccessor" */
// 静态 accessor 会成为类的 getter 和 setter
Object.defineProperty(Clazz, "staticAccessor", {
    get: staticAccessorDescriptor.get,
    set: staticAccessorDescriptor.set,
    enumerable: false,
    configurable: true,
});
staticAccessorValue = "staticAccessor";

/* method() */
Object.defineProperty(Clazz.prototype, "method", {
    value: function () {
        return "method";
    },
    writable: true,
    enumerable: false,
    configurable: true,
});

/* static staticMethod() */
Object.defineProperty(Clazz, "staticMethod", {
    value: function () {
        return "staticMethod";
    },
    writable: true,
    enumerable: false,
    configurable: true,
});

/* get getter() | set setter() */
Object.defineProperties(Clazz.prototype, {
    getter: {
        get: function () {
            return "getter";
        },
        set: undefined,
        enumerable: false,
        configurable: true,
    },
    setter: {
        get: undefined,
        set: function (_) {
            console.log("setter");
        },
        enumerable: false,
        configurable: true,
    },
});

/* static {} */
(function () {
    console.log("static", this === Clazz, "staticField" in this);
}).call(Clazz);

function Clazz2() {
    Clazz.call(this); // super()
    console.log("constructor2");
}

/* class Clazz2 extends Clazz */
// 子类通过原型链继承父类的原型对象
Clazz2.prototype = Object.create(Clazz.prototype, {
    // Clazz2 的原型对象有一个显式的字符串键 constructor，指向 Clazz2。
    // 注意 function 语法隐式定义的 Clazz2.prototype.constructor = Clazz2，没有设置原型链！
    // 当我们使用 extends 语法时，同时会设置原型链！
    constructor: {
        value: Clazz2,
        writable: true,
        enumerable: false,
        configurable: true,
    },
});

/* method() */
Object.defineProperty(Clazz2.prototype, "method", {
    value: function () {
        // super.method() 通过父类原型上的方法调用
        return "Clazz2 " + Object.getPrototypeOf(Clazz2.prototype).method.call(this);
    },
    writable: true,
    enumerable: false,
    configurable: true,
});

/* Clazz2 extends Clazz */
Object.setPrototypeOf(Clazz2, Clazz);

/* static {} */
(function () {
    console.log("static2", this === Clazz2);
}).call(Clazz2);

// Named class expression: NamedClazz is visible only inside this scope.
var Clazz3 = (function () {
    function NamedClazz() {
        Clazz2.apply(this, arguments);
    }

    NamedClazz.prototype = Object.create(Clazz2.prototype, {
        constructor: {
            value: NamedClazz,
            writable: true,
            enumerable: false,
            configurable: true,
        },
    });

    /* method() */
    Object.defineProperty(NamedClazz.prototype, "method", {
        value: function () {
            return "Clazz3 " + Object.getPrototypeOf(NamedClazz.prototype).method.call(this);
        },
        writable: true,
        enumerable: false,
        configurable: true,
    });

    Object.setPrototypeOf(NamedClazz, Clazz2);

    /* static {} */
    (function () {
        console.log("static3", this === NamedClazz);
    }).call(NamedClazz);

    return NamedClazz;
})();

当编译器生成代码时，会创建一些辅助函数来完成相应的操作，我们可以看看 typescriptlang 是怎么编译的。注意编译目标选择 ES5。

new.target 是一个在构造函数中使用的元属性，它指向被 new 调用的构造函数。即当且仅当构造函数是通过 new 调用时，new.target 才会被设置为该构造函数，否则它的值为 undefined。

其中 __new 相当于 Reflect.construct。

class Clazz {
    constructor() {
        console.log("Clazz new.target:", new.target?.name);
        console.log("Clazz.field:", this.field);
    }
    field = "field";
    method() {
        return "method";
    }
}

class Clazz2 extends Clazz {
    constructor() {
        super();
        console.log("Clazz2 new.target:", new.target?.name);
        console.log("Clazz2.field:", this.field);
    }
    field = "field2";
    method() {
        return "Clazz2 " + super.method();
    }
}

// 注意下面的输出！
new Clazz();
// Clazz new.target: Clazz
// Clazz.field: field
new Clazz2();
// Clazz new.target: Clazz2
// Clazz.field: field
// Clazz2 new.target: Clazz2
// Clazz2.field: field2
Clazz();
// TypeError: Class constructor Clazz cannot be invoked without 'new'

请小心 super() 的调用顺序。下面给出降级的示例，可以解释这一点。

"use strict";

// 模拟 new.target。__new 负责在调用构造函数期间设置它。
var __newTarget;

var __extends = function (Derived, Base) {
    Derived.prototype = Object.create(Base.prototype, {
        constructor: {
            value: Derived,
            writable: true,
            enumerable: false,
            configurable: true,
        },
    });
    Object.setPrototypeOf(Derived, Base);
};

var __new = function (Constructor, ...args) {
    var instance = Object.create(Constructor.prototype);
    var prev = __newTarget;

    // 在构造函数执行期间，__newTarget 就是“最初被 new 的那个类”。
    // 即使内部通过 Clazz.apply(this) 调用父构造函数，也不会改变它。
    __newTarget = Constructor;

    try {
        var result = Constructor.apply(instance, args);
        return result !== null && (typeof result === "object" || typeof result === "function") ? result : instance;
    } finally {
        __newTarget = prev;
    }
};

function Clazz() {
    // class 构造函数不能被普通调用
    if (__newTarget === undefined) {
        throw new TypeError("Class constructor Clazz cannot be invoked without 'new'");
    }

    // 基类实例字段在 constructor body 之前初始化
    this.field = "field";

    console.log("Clazz new.target:", __newTarget?.name);
    console.log("Clazz.field:", this.field);
}

Object.defineProperty(Clazz.prototype, "method", {
    value: function () {
        return "method";
    },
    writable: true,
    enumerable: false,
    configurable: true,
});

function Clazz2() {
    // class 构造函数不能被普通调用
    if (__newTarget === undefined) {
        throw new TypeError("Class constructor Clazz2 cannot be invoked without 'new'");
    }

    // super()
    Clazz.apply(this, arguments);

    // 派生类实例字段在 super() 之后、constructor body 剩余部分之前初始化
    this.field = "field2";

    console.log("Clazz2 new.target:", __newTarget?.name);
    console.log("Clazz2.field:", this.field);
}

__extends(Clazz2, Clazz);

Object.defineProperty(Clazz2.prototype, "method", {
    value: function () {
        // super.method()
        return "Clazz2 " + Clazz.prototype.method.call(this);
    },
    writable: true,
    enumerable: false,
    configurable: true,
});

__new(Clazz);
// Clazz new.target: Clazz
// Clazz.field: field

__new(Clazz2);
// Clazz new.target: Clazz2
// Clazz.field: field
// Clazz2 new.target: Clazz2
// Clazz2.field: field2

Clazz();
// TypeError: Class constructor Clazz cannot be invoked without 'new'

注意到 super.method() 被编译为了 Clazz.prototype.method.call(this) 但 super 本身是动态绑定的，这意味着引擎总是知道调用 super 的那个函数所在的对象。

super 关键字只能出现在方法定义里（对象方法简写、类方法、构造函数）。

const one = {
    whoami() {
        return "one";
    },
};

const two = {
    __proto__: one,
    whoami() {
        // 当前函数的 [[HomeObject]] 被设置为 two
        // 这里 super 被绑定为 Object.getPrototypeOf(two)
        return super.whoami();
    },
    // 下面 SyntaxError: 'super' keyword unexpected here
    // whoami2: function () { return super.whoami() },
    // whoami3: () => super.whoami(),
};

const three = {
    whoami() {
        return "three";
    },
};

const four = {
    __proto__: three,
    whoami: two.whoami,
    whoami2() {
        return two.whoami();
    },
    whoami3: () => two.whoami(),
};

console.log(four.whoami()); // one
console.log(four.whoami2()); // one
console.log(four.whoami3()); // one

stage3 装饰器现在是 typescript 默认使用的装饰器语法。

function universal(value: any, context: DecoratorContext): any {
    console.log("@universal", value, context);

    context.addInitializer(function (this: any) {
        console.log("addInitializer", this);
    });

    switch (context.kind) {
        case "method":
            return function (this: any, ...args: any[]) {
                console.log("call", String(context.name));
                return value.apply(this, args);
            };
        case "getter":
            return function (this: any) {
                console.log("get", String(context.name));
                return value.call(this);
            };
        case "setter":
            return function (this: any, next: any) {
                console.log("set", String(context.name), next);
                return value.call(this, next);
            };
        case "field":
            return function (initialValue: any) {
                console.log("field init", String(context.name), initialValue);
                return initialValue;
            };
        case "accessor":
            return {
                get(this: any) {
                    return value.get.call(this);
                },
                set(this: any, next: any) {
                    value.set.call(this, next);
                },
                init(initialValue: any) {
                    console.log("accessor init", String(context.name), initialValue);
                    return initialValue;
                },
            };
    }
}

@universal
class Example {
    @universal field = "field";
    @universal accessor accessor = "accessor";
    @universal method() {
        return "method";
    }
    @universal get getter() {
        return "getter";
    }
    @universal set setter(_: unknown) {
        console.log("setter");
    }
    @universal static staticField = "staticField";
    @universal static staticMethod() {
        return "staticMethod";
    }
}

const example = new Example();
console.log("example.field:", example.field);
console.log("example.accessor:", example.accessor);
console.log("example.method:", example.method());
console.log("example.getter:", example.getter);
example.setter = 1;
console.log("Example.staticField:", Example.staticField);
console.log("Example.staticMethod:", Example.staticMethod());

降级装饰器语法

"use strict";

function universal(value, context) {
    console.log("@universal", value, context);
    context.addInitializer(function () {
        console.log("addInitializer", this);
    });
    switch (context.kind) {
        case "method":
            return function (...args) {
                console.log("call", String(context.name));
                return value.apply(this, args);
            };
        case "getter":
            return function () {
                console.log("get", String(context.name));
                return value.call(this);
            };
        case "setter":
            return function (next) {
                console.log("set", String(context.name), next);
                return value.call(this, next);
            };
        case "field":
            return function (initialValue) {
                console.log("field init", String(context.name), initialValue);
                return initialValue;
            };
        case "accessor":
            return {
                get() {
                    return value.get.call(this);
                },
                set(next) {
                    value.set.call(this, next);
                },
                init(initialValue) {
                    console.log("accessor init", String(context.name), initialValue);
                    return initialValue;
                },
            };
    }
}

function __runInitializers(thisArg, initializers, value) {
    var useValue = arguments.length > 2;
    for (var i = 0; i < initializers.length; i++) {
        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
    }
    return useValue ? value : undefined;
}

// 初始化器收集（与 TS 生成语义一致）
var _staticExtraInitializers = []; // staticMethod 的 addInitializer
var _instanceExtraInitializers = []; // method/getter/setter 的 addInitializer
var _static_staticField_extraInitializers = [];
var _field_extraInitializers = [];
var _accessor_extraInitializers = [];
var _classExtraInitializers = [];
var _field_initializers = []; // field 装饰器返回的 init
var _accessor_initializers = []; // accessor 装饰器返回的 init
var _static_staticField_initializers = []; // staticField 装饰器返回的 init

// 用原生 class 定义类，字段用 __runInitializers 包裹
// staticField 故意不在类体内声明，延迟到装饰器调用后再初始化（与 TS 生成一致）
class Example {
    field =
        (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _field_initializers, "field"));

    // accessor 用私有字段 + getter/setter 模拟，方便装饰器替换 get/set
    #_accessor =
        (__runInitializers(this, _field_extraInitializers),
        __runInitializers(this, _accessor_initializers, "accessor"));
    get accessor() {
        return this.#_accessor;
    }
    set accessor(value) {
        this.#_accessor = value;
    }

    method() {
        return "method";
    }

    get getter() {
        return "getter";
    }

    set setter(_) {
        console.log("setter");
    }

    static staticMethod() {
        return "staticMethod";
    }

    constructor() {
        __runInitializers(this, _accessor_extraInitializers);
    }
}

// 装饰器调用顺序与 TS 生成一致：
// staticMethod → accessor → method → getter → setter → staticField → field → class

{
    const result = universal(Example.staticMethod, {
        kind: "method",
        name: "staticMethod",
        static: true,
        private: false,
        addInitializer: (fn) => _staticExtraInitializers.push(fn),
    });
    if (result !== undefined) Example.staticMethod = result;
}

{
    const desc = Object.getOwnPropertyDescriptor(Example.prototype, "accessor");
    const result = universal(
        { get: desc.get, set: desc.set },
        {
            kind: "accessor",
            name: "accessor",
            static: false,
            private: false,
            addInitializer: (fn) => _accessor_extraInitializers.push(fn),
        },
    );
    if (result !== undefined) {
        if (result.get !== undefined) desc.get = result.get;
        if (result.set !== undefined) desc.set = result.set;
        if (result.init !== undefined) _accessor_initializers.unshift(result.init);
        Object.defineProperty(Example.prototype, "accessor", desc);
    }
}

{
    const result = universal(Example.prototype.method, {
        kind: "method",
        name: "method",
        static: false,
        private: false,
        addInitializer: (fn) => _instanceExtraInitializers.push(fn),
    });
    if (result !== undefined) Example.prototype.method = result;
}

{
    const desc = Object.getOwnPropertyDescriptor(Example.prototype, "getter");
    const result = universal(desc.get, {
        kind: "getter",
        name: "getter",
        static: false,
        private: false,
        addInitializer: (fn) => _instanceExtraInitializers.push(fn),
    });
    if (result !== undefined) {
        desc.get = result;
        Object.defineProperty(Example.prototype, "getter", desc);
    }
}

{
    const desc = Object.getOwnPropertyDescriptor(Example.prototype, "setter");
    const result = universal(desc.set, {
        kind: "setter",
        name: "setter",
        static: false,
        private: false,
        addInitializer: (fn) => _instanceExtraInitializers.push(fn),
    });
    if (result !== undefined) {
        desc.set = result;
        Object.defineProperty(Example.prototype, "setter", desc);
    }
}

{
    const result = universal(undefined, {
        kind: "field",
        name: "staticField",
        static: true,
        private: false,
        addInitializer: (fn) => _static_staticField_extraInitializers.push(fn),
    });
    if (result !== undefined) _static_staticField_initializers.unshift(result);
}

{
    const result = universal(undefined, {
        kind: "field",
        name: "field",
        static: false,
        private: false,
        addInitializer: (fn) => _field_extraInitializers.push(fn),
    });
    if (result !== undefined) _field_initializers.unshift(result);
}

{
    universal(Example, {
        kind: "class",
        name: "Example",
        addInitializer: (fn) => _classExtraInitializers.push(fn),
    });
}

// staticField 在装饰器调用之后再初始化（类体内故意没声明它）
Example.staticField =
    (__runInitializers(Example, _staticExtraInitializers),
    __runInitializers(Example, _static_staticField_initializers, "staticField"));
__runInitializers(Example, _static_staticField_extraInitializers);
__runInitializers(Example, _classExtraInitializers);

var example = new Example();
console.log("example.field:", example.field);
console.log("example.accessor:", example.accessor);
console.log("example.method:", example.method());
console.log("example.getter:", example.getter);
example.setter = 1;
console.log("Example.staticField:", Example.staticField);
console.log("Example.staticMethod:", Example.staticMethod());

←Back to home

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

class Clazz { static { console.log("staticField" in this); // -> false } field = "field"; // this.field accessor accessor = "accessor"; // Stage 3 accessor: get/set on Clazz.prototype; private value per instance. static staticField = "staticField"; // Clazz.staticField static accessor staticAccessor = "staticAccessor"; // Clazz.staticAccessor method() { // Clazz.prototype.method return "method"; } static staticMethod() { // Clazz.staticMethod return "staticMethod"; } get getter() { // get Clazz.prototype.getter return "getter"; } set setter(_: unknown) { // set Clazz.prototype.setter console.log("setter"); } static { console.log("static", this === Clazz, "staticField" in this); // -> true true } constructor() { console.log("constructor", this); } } class Clazz2 extends Clazz { method() { return "Clazz2 " + super.method(); } static { console.log("static2", this === Clazz2); // -> true } constructor() { super(); console.log("constructor2"); } } const Clazz3 = class NamedClazz extends Clazz2 { method() { return "Clazz3 " + super.method(); } static { console.log("static3", this === NamedClazz); // -> true } };

"use strict"; // 每定义一个 accessor 就会创建一个实例到值的映射。因此每个实例都有自己的 accessor 值。 var accessorValues = new WeakMap(); // 静态 accessor 的值在类上共享，因此每个 accessor 只需要一个变量。 var staticAccessorValue; var staticAccessorTarget = { get staticAccessor() { return staticAccessorValue; }, set staticAccessor(value) { staticAccessorValue = value; }, }; var staticAccessorDescriptor = Object.getOwnPropertyDescriptor(staticAccessorTarget, "staticAccessor"); /* class Clazz */ function Clazz() { this.field = "field"; // this，最终通过 new 操作设置 accessorValues.set(this, "accessor"); console.log("constructor", this); } // 请注意！function 语法隐式定义了一个显式的字符串键 constructor，指向 Clazz。 // 即相当于执行了 Object.defineProperty(Clazz.prototype, "constructor", { value: Clazz, ... }) /* static {} */ // 每个静态块都是一个绑定 this 到当前类的作用域 (function () { console.log("staticField" in this); }).call(Clazz); /* accessor accessor = "accessor" */ // prototype 只是一个显式的普通字符串键（和 [[prototype]] 不同，因为原型链是隐式的）。 // class 语法会将这些东西放在 prototype 对象上。 // 这样 extends 的时候就知道去哪里找到父类定义的东西。 // accessor 会成为 getter 和 setter Object.defineProperty(Clazz.prototype, "accessor", { get: function () { return accessorValues.get(this); }, set: function (value) { accessorValues.set(this, value); }, enumerable: false, configurable: true, }); /* static staticField = "staticField" */ Object.defineProperty(Clazz, "staticField", { value: "staticField", writable: true, enumerable: true, configurable: true, }); /* static accessor staticAccessor = "staticAccessor" */ // 静态 accessor 会成为类的 getter 和 setter Object.defineProperty(Clazz, "staticAccessor", { get: staticAccessorDescriptor.get, set: staticAccessorDescriptor.set, enumerable: false, configurable: true, }); staticAccessorValue = "staticAccessor"; /* method() */ Object.defineProperty(Clazz.prototype, "method", { value: function () { return "method"; }, writable: true, enumerable: false, configurable: true, }); /* static staticMethod() */ Object.defineProperty(Clazz, "staticMethod", { value: function () { return "staticMethod"; }, writable: true, enumerable: false, configurable: true, }); /* get getter() | set setter() */ Object.defineProperties(Clazz.prototype, { getter: { get: function () { return "getter"; }, set: undefined, enumerable: false, configurable: true, }, setter: { get: undefined, set: function (_) { console.log("setter"); }, enumerable: false, configurable: true, }, }); /* static {} */ (function () { console.log("static", this === Clazz, "staticField" in this); }).call(Clazz); function Clazz2() { Clazz.call(this); // super() console.log("constructor2"); } /* class Clazz2 extends Clazz */ // 子类通过原型链继承父类的原型对象 Clazz2.prototype = Object.create(Clazz.prototype, { // Clazz2 的原型对象有一个显式的字符串键 constructor，指向 Clazz2。 // 注意 function 语法隐式定义的 Clazz2.prototype.constructor = Clazz2，没有设置原型链！ // 当我们使用 extends 语法时，同时会设置原型链！ constructor: { value: Clazz2, writable: true, enumerable: false, configurable: true, }, }); /* method() */ Object.defineProperty(Clazz2.prototype, "method", { value: function () { // super.method() 通过父类原型上的方法调用 return "Clazz2 " + Object.getPrototypeOf(Clazz2.prototype).method.call(this); }, writable: true, enumerable: false, configurable: true, }); /* Clazz2 extends Clazz */ Object.setPrototypeOf(Clazz2, Clazz); /* static {} */ (function () { console.log("static2", this === Clazz2); }).call(Clazz2); // Named class expression: NamedClazz is visible only inside this scope. var Clazz3 = (function () { function NamedClazz() { Clazz2.apply(this, arguments); } NamedClazz.prototype = Object.create(Clazz2.prototype, { constructor: { value: NamedClazz, writable: true, enumerable: false, configurable: true, }, }); /* method() */ Object.defineProperty(NamedClazz.prototype, "method", { value: function () { return "Clazz3 " + Object.getPrototypeOf(NamedClazz.prototype).method.call(this); }, writable: true, enumerable: false, configurable: true, }); Object.setPrototypeOf(NamedClazz, Clazz2); /* static {} */ (function () { console.log("static3", this === NamedClazz); }).call(NamedClazz); return NamedClazz; })();

class Clazz { constructor() { console.log("Clazz new.target:", new.target?.name); console.log("Clazz.field:", this.field); } field = "field"; method() { return "method"; } } class Clazz2 extends Clazz { constructor() { super(); console.log("Clazz2 new.target:", new.target?.name); console.log("Clazz2.field:", this.field); } field = "field2"; method() { return "Clazz2 " + super.method(); } } // 注意下面的输出！ new Clazz(); // Clazz new.target: Clazz // Clazz.field: field new Clazz2(); // Clazz new.target: Clazz2 // Clazz.field: field // Clazz2 new.target: Clazz2 // Clazz2.field: field2 Clazz(); // TypeError: Class constructor Clazz cannot be invoked without 'new'

"use strict"; // 模拟 new.target。__new 负责在调用构造函数期间设置它。 var __newTarget; var __extends = function (Derived, Base) { Derived.prototype = Object.create(Base.prototype, { constructor: { value: Derived, writable: true, enumerable: false, configurable: true, }, }); Object.setPrototypeOf(Derived, Base); }; var __new = function (Constructor, ...args) { var instance = Object.create(Constructor.prototype); var prev = __newTarget; // 在构造函数执行期间，__newTarget 就是“最初被 new 的那个类”。 // 即使内部通过 Clazz.apply(this) 调用父构造函数，也不会改变它。 __newTarget = Constructor; try { var result = Constructor.apply(instance, args); return result !== null && (typeof result === "object" || typeof result === "function") ? result : instance; } finally { __newTarget = prev; } }; function Clazz() { // class 构造函数不能被普通调用 if (__newTarget === undefined) { throw new TypeError("Class constructor Clazz cannot be invoked without 'new'"); } // 基类实例字段在 constructor body 之前初始化 this.field = "field"; console.log("Clazz new.target:", __newTarget?.name); console.log("Clazz.field:", this.field); } Object.defineProperty(Clazz.prototype, "method", { value: function () { return "method"; }, writable: true, enumerable: false, configurable: true, }); function Clazz2() { // class 构造函数不能被普通调用 if (__newTarget === undefined) { throw new TypeError("Class constructor Clazz2 cannot be invoked without 'new'"); } // super() Clazz.apply(this, arguments); // 派生类实例字段在 super() 之后、constructor body 剩余部分之前初始化 this.field = "field2"; console.log("Clazz2 new.target:", __newTarget?.name); console.log("Clazz2.field:", this.field); } __extends(Clazz2, Clazz); Object.defineProperty(Clazz2.prototype, "method", { value: function () { // super.method() return "Clazz2 " + Clazz.prototype.method.call(this); }, writable: true, enumerable: false, configurable: true, }); __new(Clazz); // Clazz new.target: Clazz // Clazz.field: field __new(Clazz2); // Clazz new.target: Clazz2 // Clazz.field: field // Clazz2 new.target: Clazz2 // Clazz2.field: field2 Clazz(); // TypeError: Class constructor Clazz cannot be invoked without 'new'

"use strict"; function universal(value, context) { console.log("@universal", value, context); context.addInitializer(function () { console.log("addInitializer", this); }); switch (context.kind) { case "method": return function (...args) { console.log("call", String(context.name)); return value.apply(this, args); }; case "getter": return function () { console.log("get", String(context.name)); return value.call(this); }; case "setter": return function (next) { console.log("set", String(context.name), next); return value.call(this, next); }; case "field": return function (initialValue) { console.log("field init", String(context.name), initialValue); return initialValue; }; case "accessor": return { get() { return value.get.call(this); }, set(next) { value.set.call(this, next); }, init(initialValue) { console.log("accessor init", String(context.name), initialValue); return initialValue; }, }; } } function __runInitializers(thisArg, initializers, value) { var useValue = arguments.length > 2; for (var i = 0; i < initializers.length; i++) { value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg); } return useValue ? value : undefined; } // 初始化器收集（与 TS 生成语义一致） var _staticExtraInitializers = []; // staticMethod 的 addInitializer var _instanceExtraInitializers = []; // method/getter/setter 的 addInitializer var _static_staticField_extraInitializers = []; var _field_extraInitializers = []; var _accessor_extraInitializers = []; var _classExtraInitializers = []; var _field_initializers = []; // field 装饰器返回的 init var _accessor_initializers = []; // accessor 装饰器返回的 init var _static_staticField_initializers = []; // staticField 装饰器返回的 init // 用原生 class 定义类，字段用 __runInitializers 包裹 // staticField 故意不在类体内声明，延迟到装饰器调用后再初始化（与 TS 生成一致） class Example { field = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _field_initializers, "field")); // accessor 用私有字段 + getter/setter 模拟，方便装饰器替换 get/set #_accessor = (__runInitializers(this, _field_extraInitializers), __runInitializers(this, _accessor_initializers, "accessor")); get accessor() { return this.#_accessor; } set accessor(value) { this.#_accessor = value; } method() { return "method"; } get getter() { return "getter"; } set setter(_) { console.log("setter"); } static staticMethod() { return "staticMethod"; } constructor() { __runInitializers(this, _accessor_extraInitializers); } } // 装饰器调用顺序与 TS 生成一致： // staticMethod → accessor → method → getter → setter → staticField → field → class { const result = universal(Example.staticMethod, { kind: "method", name: "staticMethod", static: true, private: false, addInitializer: (fn) => _staticExtraInitializers.push(fn), }); if (result !== undefined) Example.staticMethod = result; } { const desc = Object.getOwnPropertyDescriptor(Example.prototype, "accessor"); const result = universal( { get: desc.get, set: desc.set }, { kind: "accessor", name: "accessor", static: false, private: false, addInitializer: (fn) => _accessor_extraInitializers.push(fn), }, ); if (result !== undefined) { if (result.get !== undefined) desc.get = result.get; if (result.set !== undefined) desc.set = result.set; if (result.init !== undefined) _accessor_initializers.unshift(result.init); Object.defineProperty(Example.prototype, "accessor", desc); } } { const result = universal(Example.prototype.method, { kind: "method", name: "method", static: false, private: false, addInitializer: (fn) => _instanceExtraInitializers.push(fn), }); if (result !== undefined) Example.prototype.method = result; } { const desc = Object.getOwnPropertyDescriptor(Example.prototype, "getter"); const result = universal(desc.get, { kind: "getter", name: "getter", static: false, private: false, addInitializer: (fn) => _instanceExtraInitializers.push(fn), }); if (result !== undefined) { desc.get = result; Object.defineProperty(Example.prototype, "getter", desc); } } { const desc = Object.getOwnPropertyDescriptor(Example.prototype, "setter"); const result = universal(desc.set, { kind: "setter", name: "setter", static: false, private: false, addInitializer: (fn) => _instanceExtraInitializers.push(fn), }); if (result !== undefined) { desc.set = result; Object.defineProperty(Example.prototype, "setter", desc); } } { const result = universal(undefined, { kind: "field", name: "staticField", static: true, private: false, addInitializer: (fn) => _static_staticField_extraInitializers.push(fn), }); if (result !== undefined) _static_staticField_initializers.unshift(result); } { const result = universal(undefined, { kind: "field", name: "field", static: false, private: false, addInitializer: (fn) => _field_extraInitializers.push(fn), }); if (result !== undefined) _field_initializers.unshift(result); } { universal(Example, { kind: "class", name: "Example", addInitializer: (fn) => _classExtraInitializers.push(fn), }); } // staticField 在装饰器调用之后再初始化（类体内故意没声明它） Example.staticField = (__runInitializers(Example, _staticExtraInitializers), __runInitializers(Example, _static_staticField_initializers, "staticField")); __runInitializers(Example, _static_staticField_extraInitializers); __runInitializers(Example, _classExtraInitializers); var example = new Example(); console.log("example.field:", example.field); console.log("example.accessor:", example.accessor); console.log("example.method:", example.method()); console.log("example.getter:", example.getter); example.setter = 1; console.log("Example.staticField:", Example.staticField); console.log("Example.staticMethod:", Example.staticMethod());