随着ES2015 +的推出，并且随着翻译的普及，您中的许多人都将在实际代码或教程中遇到新的语言功能。 JavaScript装饰器是人们初次见识时经常会挠头的这些功能之一。

装饰器由于在Angular 2+中的使用而变得流行。 在Angular中，得益于TypeScript，可以使用装饰器，但是在JavaScript中，装饰器目前是第2阶段的提议 ，这意味着它们应该成为该语言未来更新的一部分。 让我们看看什么是装饰器，以及如何使用它们来使您的代码更整洁，更容易理解。

什么是装饰器？

装饰器以其最简单的形式只是将一段代码与另一段代码包装在一起的一种方式-实际上就是“修饰”它。 您可能以前已经听说过这个概念，即功能组合或高阶功能 。

在标准JavaScript中，对于许多用例，这已经可以实现，只需调用一个函数来包装另一个函数即可：

function doSomething(name) {console.log('Hello, ' + name);
}function loggingDecorator(wrapped) {return function() {console.log('Starting');const result = wrapped.apply(this, arguments);console.log('Finished');return result;}
}const wrapped = loggingDecorator(doSomething);

此示例在wrapped的变量中生成了一个新函数，该函数可以与doSomething函数完全相同的方式调用，并且将执行完全相同的操作。 不同之处在于，它将在调用包装函数之前和之后进行一些日志记录：

doSomething('Graham');
// Hello, Grahamwrapped('Graham');
// Starting
// Hello, Graham
// Finished

如何使用JavaScript装饰器

装饰器在JavaScript中使用一种特殊的语法，即以@符号作为前缀，并放置在装饰代码之前。

注意：在撰写本文时，装饰员目前处于“ Stage 2 Draft ”形式，这意味着它们大部分已经完成，但仍可能会发生变化。

可以根据需要在同一代码上使用多个装饰器，它们将按照声明它们的顺序应用。

例如：

@log()
@immutable()
class Example {@time('demo')doSomething() {//}
}

这定义了一个类，并应用了三个装饰器-两个装饰器本身，一个装饰器属性：

• @log可以记录对类的所有访问
• @immutable可以使类不可变-也许它在新实例上调用Object.freeze
• @time将记录方法执行所需的时间，并使用唯一标记将其注销。

当前，使用装饰器需要编译器支持，因为当前的浏览器或Node版本尚不支持它们。 如果您使用的是Babel，只需使用transform-decorators-legacy plugin即可启用此功能。

注意：此插件中使用“旧版”一词是因为它支持Babel 5处理装饰器的方式，这可能与标准化的最终形式不同。

为什么要使用装饰器？

尽管在JavaScript中已经可以进行功能组合，但是将相同的技术应用于其他代码段（例如，类和类属性）要困难得多，甚至不可能。

装饰器提案增加了对可用于解决这些问题的类和属性装饰器的支持，将来的JavaScript版本可能会为其他麻烦的代码区域添加装饰器支持。

装饰器还允许使用更简洁的语法，以便在代码周围应用这些包装，从而减少对您编写内容的实际意图的影响。

不同类型的装饰器

当前，仅支持类和类成员的装饰器类型。 这包括属性，方法，getter和setter。

实际上，装饰器不过是返回另一个函数的函数，并使用要装饰的项目的适当细节进行调用。 程序首次运行时，将对这些装饰器函数进行一次评估，并将装饰后的代码替换为返回值。

班级成员装饰

属性装饰器将应用于类中的单个成员-无论它们是属性，方法，获取器还是设置器。 使用三个参数调用此装饰器函数：

• target ：成员所在的类。
• name ：类中成员的名称。
• descriptor ：成员描述符。 从本质上讲 ，这是应该传递给Object.defineProperty的对象。

这里使用的经典示例是@readonly 。 可以简单地实现为：

function readonly(target, name, descriptor) {descriptor.writable = false;return descriptor;
}

从字面上更新属性描述符以将“可写”标志设置为false。

然后将其用于类属性，如下所示：

class Example {a() {}@readonlyb() {}
}const e = new Example();
e.a = 1;
e.b = 2;
// TypeError: Cannot assign to read only property 'b' of object '#<Example>'

但是我们可以做得更好。 我们实际上可以用不同的行为替换修饰的函数。 例如，让我们记录所有输入和输出：

function log(target, name, descriptor) {const original = descriptor.value;if (typeof original === 'function') {descriptor.value = function(...args) {console.log(`Arguments: ${args}`);try {const result = original.apply(this, args);console.log(`Result: ${result}`);return result;} catch (e) {console.log(`Error: ${e}`);throw e;}}}return descriptor;
}

这将整个方法替换为一个新方法，该方法记录参数，调用原始方法，然后记录输出。

请注意，我们在这里使用了散布运算符从提供的所有参数中自动构建一个数组，这是旧arguments值的更现代的替代选择。

我们可以看到它的用法如下：

class Example {@logsum(a, b) {return a + b;}
}const e = new Example();
e.sum(1, 2);
// Arguments: 1,2
// Result: 3

您会注意到，我们必须使用稍微有趣的语法来执行修饰的方法。 这可能会涵盖整个文章，但总而言之， apply函数允许您调用此函数，并指定this值和用于调用它的参数。

提升一个档次，我们可以安排我们的装饰器接受一些争论。 例如，让我们重新编写log装饰器，如下所示：

function log(name) {return function decorator(t, n, descriptor) {const original = descriptor.value;if (typeof original === 'function') {descriptor.value = function(...args) {console.log(`Arguments for ${name}: ${args}`);try {const result = original.apply(this, args);console.log(`Result from ${name}: ${result}`);return result;} catch (e) {console.log(`Error from ${name}: ${e}`);throw e;}}}return descriptor;};
}

现在，这变得越来越复杂，但是当我们将其分解时，我们会得到：

• 函数log具有一个参数： name 。
• 然后，此函数返回一个本身就是装饰器的函数。

这与早期的log装饰器相同，只是它使用了外部函数中的name参数。

然后按如下方式使用：

class Example {@log('some tag')sum(a, b) {return a + b;}
}const e = new Example();
e.sum(1, 2);
// Arguments for some tag: 1,2
// Result from some tag: 3

马上我们可以看到，这使我们能够使用自己提供的标签来区分不同的日志行。

之所以可行，是因为JavaScript运行时会立即评估log('some tag')函数调用，然后将来自该响应的响应用作sum方法的装饰器。

类装饰器

将类修饰符一次性应用于整个类定义。 装饰器函数使用单个参数调用，该参数是要装饰的构造函数。

请注意，这适用于构造函数，而不适用于所创建类的每个实例。 这意味着，如果您要操作实例，则需要自己返回构造器的包装版本来自己操作。

通常，这些方法没有类成员修饰器有用，因为您在这里所做的所有事情都可以通过完全相同的方式通过简单的函数调用来完成。 对这些所做的任何事情最终都需要返回一个新的构造函数来替换类构造函数。

回到我们的日志记录示例，让我们编写一个记录构造函数参数的示例：

function log(Class) {return (...args) => {console.log(args);return new Class(...args);};
}

在这里，我们接受一个类作为参数，并返回一个将用作构造函数的新函数。 这仅记录参数，并返回使用这些参数构造的类的新实例。

例如：

@log
class Example {constructor(name, age) {}
}const e = new Example('Graham', 34);
// [ 'Graham', 34 ]
console.log(e);
// Example {}

我们可以看到，构造Example类将注销提供的参数，并且构造的值确实是Example 。 正是我们想要的。

将参数传递给类装饰器的工作原理与类成员完全相同：

function log(name) {return function decorator(Class) {return (...args) => {console.log(`Arguments for ${name}: args`);return new Class(...args);};}
}@log('Demo')
class Example {constructor(name, age) {}
}const e = new Example('Graham', 34);
// Arguments for Demo: args
console.log(e);
// Example {}

现实世界的例子

核心装饰

有一个很棒的库，称为Core Decorators ，它提供了一些非常有用的常用装饰器，它们现在就可以使用。 这些通常允许使用非常有用的通用功能（例如，方法调用的时间，弃用警告，确保值是只读的），但要使用更加简洁的装饰器语法。

反应

React库很好地利用了高阶组件的概念。 这些只是作为函数编写的React组件，它们包裹了另一个组件。

---

购买我们的高级课程： 反应ES6方式

---

这些是用作装饰器的理想选择，因为您几乎不需要进行任何更改。 例如， react-redux库具有函数connect ，该函数用于将React组件连接到Redux存储。

通常，将使用以下方法：

class MyReactComponent extends React.Component {}
export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);

但是，由于装饰器语法的工作方式，可以用以下代码替换它，以实现完全相同的功能：

@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {}

手机

MobX库大量使用装饰器，使您可以轻松地将字段标记为“可观察”或“计算”，并将类标记为“观察器”。

摘要

类成员修饰器提供了一种很好的方式将代码包装在类中，类似于为独立功能已经可以执行的方式。 这提供了一种编写一些简单的帮助程序代码的好方法，该代码可以以非常干净和易于理解的方式应用于很多地方。

使用这种功能的唯一限制是您的想象力！

From: https://www.sitepoint.com/javascript-decorators-what-they-are/