一、介绍

  • 为对象添加新的功能
  • 不改变其原有的结构和功能

    二、事例

    给手机加一个保护壳，保护手机，但是手机原有的功能不能覆盖，要都可以使用

    三、UML类图

    image.png

    四、代码演示

    ```javascript class Circle { draw () {
    1.   console.log('画一个圆')
    } } class Decorator { constructor(circle) {
    1.   this.circle = circle
    } draw () {
    1.   this.circle.draw() // 调用原有的方法
    2.   this.setRedBorder(circle)
    } setRedBorder(circle) {
    1.   console.log(`设置红色边框`)
    } } // 测试代码 let circle = new Circle() circle.draw()

let dec = new Decorator(circle) dec.draw()

  1. <a name="XTxpv"></a>
  2. # 五、使用场景
  3. <a name="buj8l"></a>
  4. ## 1、es7的装饰器
  5. ```javascript
  6. // @testDemo就是通过testDemo方法对Demo这个类进行装饰
  7. // 这样调用Demo的时候，装饰器中的方法也能使用，而且不会污染Demo类
  8. @testDemo
  9. class Demo {
  10.     // 
  11. }
  12. function testDemo (target) {
  13.     target.isShow = true
  14. }
  15. console.log(Demo.isShow)
  17. // 传参的装饰器
  18. function testDec(isDec) {
  19.     return function (target) {
  20.         target.isDec = isDec
  21.     }
  22. }
  23. @testDec(false)
  24. class Demo () {
  26. }
  27. console.log(Demo.isDec)

2、core-decorators

3、装饰类-mixin

4、装饰方法

六、总结