在 ES7 中，引入了一种新的语法特性——Decorator（装饰器），它可以让我们在类和类的属性上添加元数据，从而实现更加灵活和可扩展的编程方式。
Decorator 是什么？
Decorator 是一个函数，它可以接收一个或多个参数，并返回一个新的函数。在 ES7 中，我们可以使用 @ 符号来应用 Decorator，例如：
@decorator
class MyClass {}这里，@decorator 就是一个 Decorator，它会被应用到 MyClass 这个类上。
如何定义一个 Decorator？
可以通过下面的方式来定义一个 Decorator：
function decorator(target, name, descriptor) {
// do something
return descriptor;
}Decorator 接收三个参数：
- target：被装饰的目标对象，可以是一个类或者类的属性。
- name：被装饰的属性的名称，如果是装饰类，则为 undefined。
- descriptor：被装饰的属性的描述符，包含了属性的值、getter、setter 等信息。
在 Decorator 函数内部，我们可以对目标对象进行一些逻辑处理，例如添加属性、修改属性值等。最后，需要返回一个新的 descriptor 对象，用于替换原来的 descriptor。
Decorator 的应用场景
1. 类的装饰
通过 Decorator，我们可以在类定义时添加一些元数据，例如：
// javascriptcn.com 代码示例
function log(target) {
target.prototype.log = function(msg) {
console.log(msg);
};
}
@log
class MyClass {}
const myClass = new MyClass();
myClass.log('hello'); // 输出 hello这里，@log 就是一个 Decorator，它会在 MyClass 类上添加一个 log 方法。通过这种方式，我们可以在不修改原有类定义的情况下，扩展类的功能。
2. 属性的装饰
除了类的装饰，我们还可以通过 Decorator 对类的属性进行装饰。例如：
// javascriptcn.com 代码示例
function readonly(target, name, descriptor) {
descriptor.writable = false;
return descriptor;
}
class MyClass {
@readonly
prop = 123;
}
const myClass = new MyClass();
myClass.prop = 456; // 报错：Cannot assign to read only property 'prop' of object '#<MyClass>'这里，@readonly 就是一个 Decorator，它会在 MyClass 类的 prop 属性上添加一个只读属性。通过这种方式，我们可以对类的属性进行限制，防止被修改。
3. 方法的装饰
除了属性的装饰，我们还可以通过 Decorator 对类的方法进行装饰。例如：
// javascriptcn.com 代码示例
function log(target, name, descriptor) {
const original = descriptor.value;
descriptor.value = function(...args) {
console.log(`[${name}] Enter`);
const result = original.apply(this, args);
console.log(`[${name}] Exit`);
return result;
};
return descriptor;
}
class MyClass {
@log
sayHello() {
console.log('Hello');
}
}
const myClass = new MyClass();
myClass.sayHello(); // 输出 [sayHello] Enter，Hello，[sayHello] Exit这里，@log 就是一个 Decorator，它会在 MyClass 类的 sayHello 方法上添加一个日志功能。通过这种方式，我们可以在不修改原有方法的情况下，对方法进行扩展。
总结
通过 Decorator，我们可以在不修改原有类定义的情况下，扩展类的功能，对类的属性和方法进行装饰和限制。Decorator 是一种非常灵活和可扩展的编程方式，可以让我们更加方便地实现复杂的业务逻辑。
以上就是 ES7 的 Decorator 用法的详细介绍，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65756148d2f5e1655de90626