JS-装饰器模式

蔚落 2023-06-05 05:52 14阅读 0赞

### 介绍 ###

在不改变类或对象自身的基础上，在程序的运行期间动态的添加职责。与继承相比，装饰者是一种更轻便灵活的做法。

这里不要和之前讲的代理模式搞混，代理模式主要是对直接访问本体不方便或者不符合需要的时候提供一个代替者；装饰者模式

主要是为对象动态添加一些行为

### 优点 ###

可以动态的给某个对象添加额外的职责，而不会影响从这个类中派生的其它对象。

### 实现 ###

老规矩举个栗子来解释一下：童年经典游戏魂斗罗，一出场默认的是普通子弹，后面根据吃的弹发射对应的子弹，比如散弹、激光弹等等，但是原有的普通子弹是一直有的

### ES7的decorator ###

在ES7中提供了一种类似于java注解的语法糖decorator来实现装饰器模式。decorator的实现依赖于ES5的Object.defineProperty方法来进行扩展和封装的。装饰器是一种函数，写法是 @+函数名

@testable
    class MyTestableClass {
      // ...
    }
    
    function testable(target) {
      target.isTestable = true;
    }
    
    MyTestableClass.isTestable // true
    
    
    @decorator
    class A {}
    
    // 等同于
    class A {}
    A = decorator(A) || A;

上面代码中，`@testable`就是一个装饰器。它修改了`MyTestableClass`这个类的行为，为它加上了静态属性`isTestable`。`testable`函数的参数`target`是`MyTestableClass`类本身。

上例中，Foo作为list的实参，MyClass作为 target的实参，最终实现将Foo的所有原型方法（foo）装饰到 MyClass类上，成为了MyClass的方法。最终代码的运行结果是执行foo()

除了可以装饰类，也可以装饰类的属性

在上栗中，由于decorator的实现依赖于Object.defineProperty，所以参数和用法也一致，接收三个参数`target`、`name`和`descriptor`