在 ECMAScript 2019 中，装饰器是一种新的语言特性，它可以帮助我们更方便地扩展和修改代码。本文将介绍装饰器的基本概念、使用方法和示例代码，希望能够帮助读者理解和运用装饰器。
什么是装饰器
装饰器是一种语言特性，它可以在不改变原有代码的情况下，对其进行扩展和修改。装饰器可以理解为一种修饰代码的方式，通过在代码上添加装饰器，可以为代码添加新的功能特性。
装饰器在 JavaScript 中的实现方式是通过函数来实现的。装饰器函数可以接受一个参数，这个参数就是要修饰的代码。通过在装饰器函数内部对这个参数进行处理，就可以实现对代码的扩展和修改。
如何在 JavaScript 中使用装饰器
在 JavaScript 中使用装饰器需要借助于第三方库，目前比较流行的装饰器库有 core-decorators 和 babel-plugin-transform-decorators-legacy。这里以 core-decorators 为例介绍如何在 JavaScript 中使用装饰器。
安装 core-decorators
首先需要安装 core-decorators：
npm install core-decorators --save
使用装饰器
使用装饰器需要在代码中引入 core-decorators 库，并使用 @ 符号来标记要修饰的代码。下面是一个简单的示例：
// javascriptcn.com 代码示例
import { readonly } from 'core-decorators';
class Person {
@readonly
name = 'Tom';
}
const person = new Person();
person.name = 'Jerry'; // Error: Cannot assign to read only property 'name' of object '#<Person>'在这个示例中，使用 @readonly 装饰器修饰了 name 属性，这个属性被设置为只读。在修改 name 属性时会抛出错误。
自定义装饰器
除了使用现成的装饰器，我们还可以自定义装饰器。自定义装饰器需要创建一个装饰器函数，并在装饰器函数内部对要修饰的代码进行处理。下面是一个示例：
// javascriptcn.com 代码示例
function log(target, name, descriptor) {
const original = descriptor.value;
descriptor.value = function(...args) {
console.log(`Calling ${name} with`, args);
const result = original.apply(this, args);
console.log(`Return value is`, result);
return result;
};
return descriptor;
}
class Calculator {
@log
add(a, b) {
return a + b;
}
}
const calculator = new Calculator();
calculator.add(1, 2); // Calling add with [1, 2] Return value is 3在这个示例中，定义了一个 log 装饰器函数，它会在调用 add 方法时输出调用参数和返回值。通过 @log 装饰器修饰了 add 方法，使其具有了日志输出的功能。
总结
装饰器是 ECMAScript 2019 中的一种新的语言特性，它可以帮助我们更方便地扩展和修改代码。本文介绍了装饰器的基本概念、使用方法和示例代码，希望能够帮助读者理解和运用装饰器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650c18aa95b1f8cacd62e053