在传统的 JavaScript 中，我们通常使用函数和对象来实现应用程序的逻辑。ES7 引入了一个新特性——"修饰器"，为我们提供了一种新的方式来操作类和对象。
修饰器是一个函数，用于修改类或类的成员。通过将修饰器应用于类或者方法上，我们可以轻松地修改它们的行为，例如修改函数的参数验证、缓存或日志记录等。
安装
要使用修饰器，您需要安装 Babel 和相关的插件。下面是安装所需的包：
npm install --save-dev babel-plugin-transform-decorators-legacy
同时，在 .babelrc 中配置：
{
"plugins": ["transform-decorators-legacy"]
}定义一个修饰器
首先，我们定义一个简单的修饰器。该修饰器会在一个函数被调用之前输出一条消息：
// javascriptcn.com 代码示例
function before(target, name, descriptor) {
const original = descriptor.value;
descriptor.value = function (...args) {
console.log(`Before ${name} called`);
return original.apply(this, args);
};
return descriptor;
}这个修饰器接收三个参数，分别是目标、名称和描述符。在这里，我们重写了描述符的值，并在函数调用之前添加了一条日志记录语句。
然后，我们可以将修饰器应用于一个函数：
// javascriptcn.com 代码示例
class Example {
@before
foo() {
console.log('foo called');
}
}
const example = new Example();
example.foo(); // Before foo called \n foo called在这里，我们定义了一个名为 Example 的类，并将修饰器 @before 应用于 foo 方法。当我们调用这个方法时，修饰器会输出一条日志记录语句。
创建强类型对象
接下来，我们将用修饰器创建一个简单的强类型对象。该对象包含两个属性 name 和 age，并提供了一个构造函数，可以验证传递给它的参数类型。
// javascriptcn.com 代码示例
function validate(types, values) {
for (let i = 0; i < types.length; i++) {
const type = typeof values[i];
if (type !== types[i])
throw new TypeError(`Invalid property value [${i}]. Expected ${types[i]}, but received ${type}`);
}
}
function Type(type, ...args) {
return function(target, name, descriptor) {
const { initializer } = descriptor;
delete descriptor.initializer;
let value = initializer.call(this);
Object.defineProperty(target, name, {
get() {
return value;
},
set(val) {
validate([type], [typeof val]);
value = val;
}
});
return {
...descriptor,
initializer() {
return value;
}
};
};
}
class Person {
@Type('string')
name = '';
@Type('number')
age = 0;
constructor(name, age) {
this.name = name;
this.age = age;
}
}
const person = new Person('John', 30);
console.log(JSON.stringify(person)); // {"name":"John","age":30}在这里，我们定义了一个名为 Type 的修饰器。该修饰器用于验证类属性的类型，并将其转换为强类型对象。
我们在类 Person 中应用了该修饰器，对 name 和 age 两个属性使用不同的类型进行验证。当我们创建一个新的 Person 实例时，构造函数会自动调用并验证传递给它的参数类型。
总结
修饰器可以让代码更加简洁和易读，并提供了一种新的方式来处理类和对象。通过使用 babel-plugin-transform-decorators-legacy 插件和相关配置来支持修饰器，在此基础上，您可以
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6529dbed7d4982a6ebc414af