装饰器模式
装饰模式和适配器模式都是 包装模式 (Wrapper Pattern)，它们都是通过封装其他对象达到设计的目的的，但是它们的形态有很大区别。
适配器模式我们使用的场景比较多（继承方案），比如连接不同数据库的情况，你需要包装现有的模块接口，从而使之适配数据库 —— 好比你手机使用转接口来适配插座那样；
-
装饰模式不一样，仅仅包装现有的模块，使之 “更加华丽” ，并不会影响原有接口的功能 —— 好比你给手机添加一个外壳罢了，并不影响手机原有的通话、充电等功能；
更多区别参见：设计模式——装饰模式（Decorator）
装饰模式场景 —— 面向 AOP 编程
装饰模式经典的应用是 AOP 编程，比如“日志系统”，日志系统的作用是记录系统的行为操作，它在不影响原有系统的功能的基础上增加记录环节 —— 好比你佩戴了一个智能手环，并不影响你日常的作息起居，但你现在却有了自己每天的行为记录。
更加抽象的理解，可以理解为给数据流做一层filter，因此 AOP 的典型应用包括 安全检查、缓存、调试、持久化等等。可参考Spring aop 原理及各种应用场景 。
我们知道，面向对象的特点是继承、多态和封装。而封装就要求将功能分散到不同的对象中去，这在软件设计中往往称为职责分配。实际上也就是说，让不同的类设计不同的方法。这样代码就分散到一个个的类中去了。这样做的好处是降低了代码的复杂程度，使类可重用。
但是人们也发现，在分散代码的同时，也增加了代码的重复性。什么意思呢？比如说，我们在两个类中，可能都需要在每个方法中做日志。按面向对象的设计方法，我们就必须在两个类的方法中都加入日志的内容。也许他们是完全相同的，但就是因为面向对象的设计让类与类之间无法联系，而不能将这些重复的代码统一起来。
也许有人会说，那好办啊，我们可以将这段代码写在一个独立的类独立的方法里，然后再在这两个类中调用。但是，这样一来，这两个类跟我们上面提到的独立的类就有耦合了，它的改变会影响这两个类。那么，有没有什么办法，能让我们在需要的时候，随意地加入代码呢？这种在运行时，动态地将代码切入到类的指定方法、指定位置上的编程思想就是面向切面的编程。
什么是装（修）饰器
装饰器Decorator是在es2016(es7)中新加入的提案，前端中的装饰器的最早在Angular 2+中使用，当然，在当时Angular中，装饰器因TypeScript能使用。
简单来说，装饰器是用一个代码包装另一个代码的简单方式。装饰器是一个函数，主要来修改类的或者类的方法行为，只在类的范畴内有用
如何使用JavaScript装饰器
JavaScript中装饰器使用特殊的语法，使用@作为标识符，且放置在被装饰代码之前。
下面是一个简单的装饰器
function testable(target) {
target.UserName = 'linxiaodong';
}
@testable
class Test{
}
console.log(Test.UserName); //linxiaodong
给Test类天津爱了一个静态属性UserName.
装饰器的作用
装饰器的本质只是一种语法糖而已，编译时会把注解的代码翻译成我们熟悉的那种形式。
详解
作用在方法上的 decorator 接收的第一个参数（target ）是类的 prototype；如果把一个 decorator 作用到类上，则它的第一个参数 target 是 类本身。
对类的修饰
上面的就是一个对类的修饰，但是如果需要参数的话，我们可以在修饰器外面再封装一层函数。
function testableWrap(username){
return function testable(target) {
target.UserName = username;
}
}
@testableWrap('linxiaodong')
class Test{
}
console.log(Test.UserName); //linxiaodong
上面是对类添加静态方法，如果要给类的实例对象添加方法，可以通过prototype实现。
function mixins(...list) {
return function (target) {
Object.assign(target.prototype, ...list)
}
}
const Foo = {
foo() { console.log('foo') }
};
@mixins(Foo)
class MyClass {}
let obj = new MyClass();
obj.foo() // 'foo'
上面代码通过修饰器mixins，把Foo对象的方法添加到了MyClass的实例上面。可以用Object.assign()模拟这个功能。
对类中方法的修饰
class Person {
@readonly
testFn() { return `${this.first} ${this.last}` }
}
console.log('Person.prototype',Person.prototype);
function readonly(target, name, descriptor){
console.log('target',target);
console.log('name',name); // testFn
console.log('descriptor',descriptor);
descriptor.writable = false;
return descriptor;
}
修饰器第一个参数是类的原型对象，上例是Person.prototype，修饰器的本意是要“修饰”类的实例，但是这个时候实例还没生成，所以只能去修饰原型（这不同于类的修饰，那种情况时target参数指的是类本身）；第二个参数是所要修饰的属性名，第三个参数是该属性的描述对象。
修饰器不能用于函数
var counter = 0;
var add = function () {
counter++;
};
@add
function foo() {
}
//SyntaxError: Leading decorators must be attached to a class declaration
由于存在函数提升，使得修饰器不能用于函数。类是不会提升的，所以就没有这方面的问题。
另一方面，如果一定要修饰函数，可以采用高阶函数的形式直接执行。
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 myDecorator = loggingDecorator(doSomething);
class Test{
@myDecorator('linxiaodong')
speak(){
console.log('speakFn');
}
}
// Starging
// Hello,linxiaodong
// Finished
常用的装饰器
core-decorators.js是一个第三方模块，提供了几个常见的修饰器，通过它可以更好地理解修饰器。比如Angular2+中就内置了这些装饰器。
（1）@autobind
autobind修饰器使得方法中的this对象，绑定原始对象。
import { autobind } from 'core-decorators';
class Person {
@autobind
getPerson() {
return this;
}
}
let person = new Person();
let getPerson = person.getPerson;
getPerson() === person;
// true
使用原生 JS 实现装饰器模式
// 首先我们要创建一个基类
function Man(){
this.def = 2;
this.atk = 3;
this.hp = 3;
}
// 装饰者也需要实现这些方法，遵守 Man 的接口
Man.prototype={
toString:function(){
return `防御力:$,攻击力:$,血量:$`;
}
}
// 创建装饰器，接收 Man 对象作为参数。
var Decorator = function(man){
this.man = man;
}
// 装饰者要实现这些相同的方法
Decorator.prototype.toString = function(){
return this.man.toString();
}
// 继承自装饰器对象
// 创建具体的装饰器，也是接收 Man 作对参数
var DecorateArmour = function(man){
var moreDef = 100;
man.def += moreDef;
Decorator.call(this,man);
}
DecorateArmour.prototype = new Decorator();
// 接下来我们要为每一个功能创建一个装饰者对象，重写父级方法，添加我们想要的功能。
DecorateArmour.prototype.toString = function(){
return this.man.toString();
}
// 注意这里的调用方式
// 构造器相当于“过滤器”，面向切面的
var tony = new Man();
tony = new DecorateArmour(tony);
console.log(`当前状态 ===> $`);
// 输出：当前状态 ===> 防御力:102,攻击力:3,血量:3
下面是一个使用原生和使用装饰器的写法对比
// function decorateArmour(target, key, descriptor) {
// const method = descriptor.value;
// console.log(method);
// let moreDef = 100;
// let ret;
// descriptor.value = (...args)=>{
// args[0] += moreDef;
// ret = method.apply(target, args);
// return ret;
// }
// return descriptor;
// }
// class Man{
// constructor(def = 2,atk = 3,hp = 3){
// this.init(def,atk,hp);
// }
// @decorateArmour
// init(def,atk,hp){
// this.def = def; // 防御值
// this.atk = atk; // 攻击力
// this.hp = hp; // 血量
// }
// toString(){
// return `防御力:${this.def},攻击力:${this.atk},血量:${this.hp}`;
// }
// }
// var tony = new Man();
// console.log(`当前状态 ===> ${tony.toString()}`);
// 使用原生来写
// 首先我们要创建一个基类
function Man(){
this.def = 2;
this.atk = 3;
this.hp = 3;
}
// 装饰者也需要实现这些方法，遵守 Man 的接口
Man.prototype={
toString:function(){
return `防御力:${this.def},攻击力:${this.atk},血量:${this.hp}`;
}
}
// 创建装饰器，接收 Man 对象作为参数。
var Decorator = function(man){
this.man = man;
}
// 装饰者要实现这些相同的方法
Decorator.prototype.toString = function(){
return this.man.toString();
}
// 继承自装饰器对象
// 创建具体的装饰器，也是接收 Man 作对参数
var DecorateArmour = function(man){
var moreDef = 100;
man.def += moreDef;
Decorator.call(this,man);
}
DecorateArmour.prototype = new Decorator();
// 接下来我们要为每一个功能创建一个装饰者对象，重写父级方法，添加我们想要的功能。
DecorateArmour.prototype.toString = function(){
return this.man.toString();
}
// 注意这里的调用方式
// 构造器相当于“过滤器”，面向切面的
var tony = new Man();
tony = new DecorateArmour(tony);
console.log( `防御力:${tony.toString()}`);
// 输出：当前状态 ===> 防御力:102,攻击力:3,血量:3
参考文献
- Decorators in ES7：装饰者模式让你包装已有的方法，从而扩展已有函数。
- JavaScript设计模式：装饰者模式：严重推荐，这一系列让你比较透彻明白设计模式在 JS 中的应用。
- ES7 之 Decorators 实现 AOP 示例：如何实现一个简单的 AOP。
- 细说 ES7 JavaScript Decorators：讲解 ES7 Decorator的背后原理，就是使用了 Object.defineProperty 方法；
- How To Set Up the Babel Plugin in WebStorm：图文并茂，教你如何设置 babel.
- Rest 参数和参数默认值：ES6 为我们提供一种新的方式来创建可变参数的函数，Rest 参数和参数默认值
- Exploring ES2016 Decorators：很完整的一个教程，里面涉及比较全面。
-
Traits with ES7 Decorators：相当于是介绍
traits-decorator模块； - ES6阮一峰
- ES7 Decorator 装饰器 | 淘宝前端团队
