各位观众，晚上好！我是你们的老朋友，今天咱们来聊聊 JavaScript Decorators，也就是装饰器，不过是 Stage 3 版本的，保证新鲜热乎。
开场白：Decorator 是什么鬼？
想象一下，你想给你的咖啡加点糖，或者加点奶，或者再来点焦糖。咖啡本身没变，但你通过添加额外的“装饰”让它更美味了。在编程世界里，Decorator 也是类似的概念。它允许你在不修改原有代码的基础上，给类、方法、属性等等添加额外的功能。 这就像给你的代码穿上一件“马甲”，这件马甲可以改变代码的行为，而不用直接修改代码本身。
为什么要用 Decorator？
因为它可以让我们更优雅地进行元编程。元编程就是编写能够操作代码的代码。Decorator 是元编程的一种形式，它提供了一种声明式的方式来修改和扩展类的行为。它的主要优势包括：
- 代码复用： 相同的装饰逻辑可以应用到多个类或方法上，避免代码重复。
- 可读性： 装饰器可以使代码更易于理解和维护，因为它们将横切关注点（cross-cutting concerns）与核心业务逻辑分离。
- 解耦： 装饰器可以将附加功能与原始代码解耦，降低了代码之间的依赖性。
Stage 3 Decorator：新时代的曙光
过去的 JavaScript 装饰器提案经历过多次修改，而 Stage 3 提案则相对稳定，得到了更广泛的认可。它主要定义了三种类型的装饰器：
- Class Decorator (类装饰器): 作用于整个类。
- Method Decorator (方法装饰器): 作用于类的方法。
- Field Decorator (字段装饰器): 作用于类的属性。
接下来，我们逐一深入了解这三种装饰器的具体工作原理。
1. Class Decorator：给类穿上“金钟罩”
Class Decorator 顾名思义，就是用来装饰类的。它接收一个参数，即被装饰的类本身，然后可以返回一个新的类，或者直接修改原来的类。
语法:
@decorator
class MyClass {
// ...
}这里的 @decorator 就是一个 Class Decorator。
工作原理:
Class Decorator 的本质是一个函数，它接收构造函数作为参数，并返回一个新的构造函数（或者修改原来的构造函数）。这个新的构造函数将被用来创建类的实例。
应用场景:
- 注册类： 可以用 Class Decorator 将类注册到某个系统中，比如依赖注入容器。
- 修改类行为： 可以用 Class Decorator 添加静态属性、方法，或者修改类的原型。
- AOP (面向切面编程): 可以用 Class Decorator 实现 AOP，例如，在类创建时记录日志。
举例说明:
function singleton(constructor) {
let instance;
return class extends constructor {
constructor(...args) {
if (!instance) {
instance = super(...args);
}
return instance;
}
};
}
@singleton
class DatabaseConnection {
constructor(url) {
this.url = url;
console.log(`Connecting to ${url}`);
}
query(sql) {
console.log(`Executing SQL: ${sql}`);
}
}
const db1 = new DatabaseConnection('localhost:5432'); // Connecting to localhost:5432
const db2 = new DatabaseConnection('localhost:5432'); // 不会再次连接
console.log(db1 === db2); // true在这个例子中，@singleton 装饰器确保了 DatabaseConnection 类只有一个实例。每次创建 DatabaseConnection 的实例时，都会检查是否已经存在实例。如果存在，就返回已有的实例，否则就创建一个新的实例。
更深入的例子:
function addLogging(constructor) {
return class extends constructor {
constructor(...args) {
super(...args);
console.log(`Creating instance of ${constructor.name}`);
}
static logClassName() {
console.log(`Class name is ${constructor.name}`);
}
};
}
@addLogging
class MyComponent {
constructor(name) {
this.name = name;
}
}
MyComponent.logClassName(); // Class name is MyComponent
const component = new MyComponent('Button'); // Creating instance of MyComponent这个例子中，addLogging 装饰器给类添加了日志功能，在创建类实例时会输出日志信息。同时，装饰器也添加了一个静态方法用来打印类名。
2. Method Decorator：给方法加点“魔法”
Method Decorator 用于装饰类的方法。它可以修改方法的行为，比如在方法执行前后添加额外的逻辑，或者完全替换掉原来的方法。
语法:
class MyClass {
@decorator
myMethod() {
// ...
}
}这里的 @decorator 就是一个 Method Decorator。
工作原理:
Method Decorator 接收三个参数：
target: 对于静态成员来说是类的构造函数，对于实例成员来说是类的原型对象。context: 一个对象，包含有关被装饰的方法的信息，例如方法名 (name)、是否是静态方法 (static)、以及访问和修改方法的接口。descriptor: 一个属性描述符对象，类似于Object.getOwnPropertyDescriptor()的返回值。它包含了方法的配置信息，比如value（方法本身）、writable、enumerable、configurable。
Method Decorator 可以返回一个新的属性描述符对象，用来替换原来的描述符。
应用场景:
- AOP (面向切面编程): 可以在方法执行前后添加日志、性能监控等功能。
- 权限验证： 可以验证用户是否有权限执行某个方法。
- 缓存： 可以缓存方法的执行结果，避免重复计算。
- 重试机制： 如果方法执行失败，可以自动重试。
- 绑定this: 某些情况下可以用来自动绑定 this。
举例说明:
function logMethod(target, context, descriptor) {
const originalMethod = descriptor.value;
descriptor.value = function (...args) {
console.log(`Calling method: ${context.name} with arguments: ${args}`);
const result = originalMethod.apply(this, args);
console.log(`Method ${context.name} returned: ${result}`);
return result;
};
}
class Calculator {
@logMethod
add(a, b) {
return a + b;
}
}
const calculator = new Calculator();
calculator.add(2, 3); // Calling method: add with arguments: 2,3
// Method add returned: 5在这个例子中，@logMethod 装饰器给 add 方法添加了日志功能，在方法执行前后会输出日志信息。
更高级的例子（使用 context）：
function readOnly(target, context, descriptor) {
descriptor.writable = false; // 使方法只读
console.log(`Making ${context.name} read-only`);
}
class Person {
constructor(name) {
this.name = name;
}
@readOnly
getName() {
return this.name;
}
}
const person = new Person('Alice');
console.log(person.getName()); // Alice
// 尝试修改 getName 方法 (会报错，严格模式下)
// person.getName = function() { return "Bob"; };在这个例子中，@readOnly 装饰器使用了 context.name 来获取方法名，并将 writable 设置为 false，从而使 getName 方法变为只读。
3. Field Decorator：给属性也穿上“防护服”
Field Decorator 用于装饰类的属性。它可以修改属性的初始化行为，或者添加 getter 和 setter 方法来实现更复杂的属性访问控制。
语法:
class MyClass {
@decorator
myProperty = 'defaultValue';
}这里的 @decorator 就是一个 Field Decorator。
工作原理:
Field Decorator 接收两个参数：
target: 对于静态成员来说是类的构造函数，对于实例成员来说是类的原型对象。context: 一个对象，包含有关被装饰的属性的信息，例如属性名 (name)、是否是静态属性 (static)、以及访问和修改属性的接口（private属性会有所不同）。
Field Decorator 可以返回一个 initializer 函数，该函数在类的构造函数执行时被调用，用于初始化属性的值。 或者返回一个 replacement 对象，用来完全替换属性的定义。
应用场景:
- 数据验证： 可以验证属性的值是否符合要求。
- 延迟加载： 可以实现属性的延迟加载，只有在第一次访问时才进行初始化。
- 数据转换： 可以对属性的值进行转换，例如，将字符串转换为数字。
- 监听属性变化： 可以监听属性的变化，并在变化时执行某些操作。
- 创建私有属性： 结合
context.private可以创建真正的私有属性。
举例说明:
function nonNegative(target, context) {
return function (initialValue) {
if (initialValue < 0) {
return 0;
}
return initialValue;
};
}
class Counter {
@nonNegative
count = 0;
increment() {
this.count++;
}
}
const counter = new Counter();
console.log(counter.count); // 0
counter.count = -5; // 仍然有效，因为直接访问属性绕过了装饰器
console.log(counter.count); // -5
counter.increment();
console.log(counter.count); // -4在这个例子中，@nonNegative 装饰器确保 count 属性的值始终为非负数。如果初始值为负数，则将其设置为 0。 注意，这里只是对初始化有效，直接赋值给属性是绕过装饰器的。
更高级的例子（使用 getter 和 setter）：
function validate(target, context) {
let value;
return {
get() {
return value;
},
set(newValue) {
if (typeof newValue !== 'string') {
throw new TypeError('Name must be a string!');
}
value = newValue;
},
init(initialValue) { // 属性的初始值
if(typeof initialValue !== 'string') {
throw new TypeError('Initial value of name must be a string!');
}
value = initialValue;
return value; // 必须返回初始值
}
};
}
class User {
@validate
name = "Initial Name";
}
const user = new User();
console.log(user.name); // Initial Name
user.name = "New Name";
console.log(user.name); // New Name
try {
user.name = 123; // 抛出 TypeError: Name must be a string!
} catch (e) {
console.error(e);
}在这个例子中，@validate 装饰器创建了 getter 和 setter 方法，用于验证 name 属性的值是否为字符串。如果尝试将非字符串值赋给 name 属性，则会抛出 TypeError。 同时，init 方法定义了属性的初始值，并且也进行了类型检查。
更高级的例子（创建私有属性）：
注意：这是一个比较复杂的使用方式，而且在实际应用中可能会有一些限制，需要仔细考虑。
const hidden = new WeakMap();
function privateField(target, context) {
if (context.private) {
return function (initialValue) {
hidden.set(this, initialValue);
return; // 返回 undefined，阻止默认的属性初始化
};
}
}
class MyClass {
@privateField
#privateValue = 'secret';
getPrivateValue() {
return hidden.get(this);
}
}
const instance = new MyClass();
console.log(instance.getPrivateValue()); // secret
// console.log(instance.#privateValue); // 报错：私有属性无法在类外部访问在这个例子中，@privateField 装饰器与私有字段 #privateValue 结合使用，创建了一个真正的私有属性。装饰器使用 WeakMap 来存储私有属性的值，只有通过 getPrivateValue 方法才能访问。 这样可以防止在类外部直接访问私有属性，实现了更强的封装性。
总结：Decorator 的强大之处
通过上面的例子，我们可以看到 Decorator 的强大之处。它们提供了一种简洁、优雅的方式来修改和扩展类的行为，而无需修改原始代码。
各种 Decorator 的参数对比:
| Decorator Type | target |
context |
descriptor (仅 Method) |
返回值 |
|---|---|---|---|---|
| Class | 类的构造函数 (constructor) |
一个对象，包含 kind: "class"、name (类名)、addInitializer (一个函数，允许在类初始化时运行代码)、metadata 等信息。 |
N/A | 一个新的构造函数，或者修改原来的构造函数。 |
| Method | 类的原型对象 (实例方法) 或 类的构造函数 (静态方法) | 一个对象，包含 kind: "method"、name (方法名)、static (是否为静态方法)、private (是否为私有方法，如果是，则 name 为 undefined)、addInitializer、access (包含访问和修改方法的接口，例如 get, set, has)、metadata 等信息。 |
属性描述符对象 | 一个新的属性描述符对象，用来替换原来的描述符。 |
| Field | 类的原型对象 (实例属性) 或 类的构造函数 (静态属性) | 一个对象，包含 kind: "field"、name (属性名)、static (是否为静态属性)、private (是否为私有属性，如果是，则 name 为 undefined)、addInitializer、access (包含访问和修改属性的接口，例如 get, set, has)、metadata 等信息。 |
N/A | 一个initializer 函数 (用于初始化属性值) 或者一个replacement对象 (用于完全替换属性的定义), 如果是私有属性，initializer 函数必须返回 undefined。 |
Decorator 在框架扩展中的应用
Decorator 在各种 JavaScript 框架中都有广泛的应用，尤其是在框架扩展方面。例如：
- Angular： Angular 使用 Decorator 来定义组件、指令、服务等。
- NestJS： NestJS 是一个 Node.js 框架，它大量使用了 Decorator 来定义控制器、路由、中间件等。
- MobX： MobX 是一个状态管理库，它使用 Decorator 来定义 observable 和 computed 属性。
这些框架利用 Decorator 简化了配置和开发流程，提高了代码的可读性和可维护性。
总结
JavaScript Decorator 是一种强大的元编程工具，它可以让我们更优雅地修改和扩展类的行为。通过 Class Decorator、Method Decorator 和 Field Decorator，我们可以实现各种各样的功能，例如，AOP、数据验证、权限验证、缓存等等。在框架扩展方面，Decorator 更是发挥着重要的作用，简化了配置和开发流程，提高了代码的可读性和可维护性。
希望今天的讲座能帮助大家更好地理解 JavaScript Decorator。 谢谢大家！