Decorators，按字面理解就是装饰器的意思。装饰的意思，我想大家都明白，就是对一个物件进行美化，让它变得更漂亮。现实的例子就是房屋装修。你买了一套房子，但是毛坯房，你肯定不想住，那就对它装饰一下，床，桌子，电视，冰箱等一通买，房子变漂亮了，住的也舒心了，同时功能也强大了，因为我们可以看电视了，上网了。
Js中，Decorators的作用也是如此，对一个类或者其属性方法进行装饰，让它功能更加强大。语法非常简单，就是在一个类或者其属性方法前面加上@decorator，decorator 指的是装饰器的名称。装饰器本身是一个函数，因为在函数内部，我们可以进行任意的操作从而对其进行增强。
稍微有点遗憾，现在的浏览器还没有支持它，不过我们有强大的babel, 可以利用babel进行转化， 就是配置有点麻烦，在学习之前，我们先用webpack配置一个简单的学习环境。
装饰器的转化依赖一个核心插件 babel-plugin-transform-decorators-legacy。 新建一个decorator 文件夹，npm init -y 初始化项目，安装各种依赖 npm install webpack webpack-dev-server babel-core babel-loader babel-plugin-transform-decorators-legacy --save-dev, 然后新建index.js 作为入口文件，index.html用于展示，webpack.config.js 配置文件 ,
webpack.config.js 配置文件， 在babel-loader 的options中配置了transform-decorators-legacy 插件
const path = require(‘path‘); module.exports = { entry: path.join(__dirname, ‘index.js‘), output: { path: path.join(__dirname), filename: ‘bundle.js‘ }, module: { rules: [ { test: /\.js$/, loader: ‘babel-loader‘, exclude: path.join(__dirname, ‘node_modules‘), options: { plugins: [‘transform-decorators-legacy‘] } } ] } }
因为webpack 打包后文件是bundle.js , 所以要在index.html 中引入 bundle.js , index.html 如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="bundle.js"></script> </body> </html>
在index.js 中先随便写点东西，验证一个配置是否正确
document.body.innerHTML = ‘blue‘;
在package.json文件中， scripts 字段中写入 "dev": "webpack-dev-server"
在decorator文件夹中启动命令窗口，输入npm run dev, 可以看到项目启动成功，在浏览器中输入locolhost:8080 ，可以看到blue 表示配置成功
环境搭建好了，我们现在可以学习decorator 及其使用了。首先 decorator是作用在class上面的，所以声明一个class，比如Car ,
class Car {
}
其次，decorators 是一个函数，那么我们就写一个函数，直接命名为decorators 好了， 这个函数必须有一个参数，来指定它要装饰的对象，参数名一般为target
function decorators(target) { target.color = ‘black‘; }
我们给target 定义了一个属性color, 由此我们可以推断出，要装饰的类有了一个color 属性。 修饰一个类，我们就在类的上面写上装饰器 @decorators, 我们可以打印一下， 我们的猜测是不是正确的， 整个index.js 文件如下：
// 装饰器函数 function decorators(target) { target.color = ‘black‘; } // 用@装饰器 装饰一个类 @decorators class Car { } console.log(Car.color); // 输入black
