Cocos Creator3.8.7开源引擎解析（三）

原创已于 2026-08-09 16:47:31 修改 · 211 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

Creator

于 2026-08-09 12:08:00 首次发布

CCCLASS装饰器

一、先简单看看装饰器的作用

语法：@***；实际是函数的调用。

本质：在TS编译JS时，会根据具体的装饰器装饰的类型定义（构造器函数）、方法函数、属性定义等位置时，生成对应的js代码。

比如：

// 一个简单的装饰器示例，演示 TypeScript 装饰器在编译后如何变成 __decorate 调用

// 1. 类装饰器：给类打上一个标记，并在控制台打印类被"定义"的时机
function seal(target: Function) {
    console.log('[类装饰器] 类被定义时执行，target =', (target as any).name);
    Object.seal(target);
    Object.seal(target.prototype);
}

// 2. 方法装饰器：在方法执行前后打印日志（AOP 思路）
function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    console.log('[方法装饰器] 处理的方法 =', propertyKey);
    const original = descriptor.value;
    descriptor.value = function (...args: any[]) {
        console.log('  方法调用前，参数 =', args);
        const result = original.apply(this, args);
        console.log('  方法调用后，返回值 =', result);
        return result;
    };
    return descriptor;
}

// 3. 属性装饰器：仅收集元数据（这里简单打印一下字段名）
function readonly(target: any, propertyKey: string) {
    console.log('[属性装饰器] 登记的字段 =', propertyKey);
    Object.defineProperty(target, propertyKey, {
        value: target[propertyKey],
        writable: false,
        enumerable: true,
        configurable: true,
    });
}

// 使用装饰器：注意 @seal 无参、@log 也无参
@seal
class Calculator {
    @readonly
    public author = 'cocos';

    @log
    public add(a: number, b: number): number {
        return a + b;
    }
}

// 实例化发生在"类定义 + 装饰器执行"之后
const calc = new Calculator();
console.log('--- 开始调用业务方法 ---');
calc.add(1, 2);

使用TS编译成对应的js后的代码：

// 一个简单的装饰器示例，演示 TypeScript 装饰器在编译后如何变成 __decorate 调用
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
// 1. 类装饰器：给类打上一个标记，并在控制台打印类被"定义"的时机
function seal(target) {
    console.log('[类装饰器] 类被定义时执行，target =', target.name);
    Object.seal(target);
    Object.seal(target.prototype);
}
// 2. 方法装饰器：在方法执行前后打印日志（AOP 思路）
function log(target, propertyKey, descriptor) {
    console.log('[方法装饰器] 处理的方法 =', propertyKey);
    var original = descriptor.value;
    descriptor.value = function () {
        var args = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            args[_i] = arguments[_i];
        }
        console.log('  方法调用前，参数 =', args);
        var result = original.apply(this, args);
        console.log('  方法调用后，返回值 =', result);
        return result;
    };
    return descriptor;
}
// 3. 属性装饰器：仅收集元数据（这里简单打印一下字段名）
function readonly(target, propertyKey) {
    console.log('[属性装饰器] 登记的字段 =', propertyKey);
    Object.defineProperty(target, propertyKey, {
        value: target[propertyKey],
        writable: false,
        enumerable: true,
        configurable: true,
    });
}
// 使用装饰器：注意 @seal 无参、@log 也无参
var Calculator = /** @class */ (function () {
    function Calculator() {
        this.author = 'cocos';
    }
    Calculator.prototype.add = function (a, b) {
        return a + b;
    };
    __decorate([
        readonly,
        __metadata("design:type", Object)
    ], Calculator.prototype, "author", void 0);
    __decorate([
        log,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Number, Number]),
        __metadata("design:returntype", Number)
    ], Calculator.prototype, "add", null);
    Calculator = __decorate([
        seal
    ], Calculator);
    return Calculator;
}());
// 实例化发生在"类定义 + 装饰器执行"之后
var calc = new Calculator();
console.log('--- 开始调用业务方法 ---');
calc.add(1, 2);

可以看到最终会生成对应的__decorate函数，以及根据对应的位置，调用这个函数。当加载这个文件并执行时，会在new 实例化之前就会调用对应的方法。

二、creator中的cccClass装饰器

ccclass的源码：

2.1属性相关：

因为属性登记到缓存中，因为属性装饰器比类型装饰器提前执行，这个时候类型装饰器还没运行，所以在属性的装饰器中会临时将属性存到缓存中，最后cccclass装饰器再从中获取到对应

2.2真正的类型装饰器执行：

注册类型名（cccclass里面我们填写的名字）；2.缓存是属性存放到__props__属性中，序列化属性；3.注册编辑器面板属性；
关键代码：注册类型定义
这个类型注册，在上一节的下载improt资源，并且反序列化对应的类型是有用的，比如Texture2D对象的构建时，会从对应的import文件中拿到这个类名，再通过上面的js全局中拿到对应的类型，这样建立资源-类型的映射关系