Javascript装饰者模式的特点和用法实例详解

装饰者模式（Decorator Pattern）：在不改变原类和继承的情况下动态扩展对象功能，通过包装一个对象来实现一个新的具有原对象相同接口的新的对象。

装饰者模式的特点：

1. 在不改变原对象的原本结构的情况下进行功能添加。

2. 装饰对象和原对象具有相同的接口，可以使客户以与原对象相同的方式使用装饰对象。

3. 装饰对象中包含原对象的引用，即装饰对象是真正的原对象经过包装后的对象。

Javascript装饰者模式详解：

装饰者模式中，可以在运行时动态添加附加功能到对象中。当处理静态类时，这可能是一个挑战。在Javascript中，由于对象是可变的，因此，添加功能到对象中的过程本身并不是问题。

装饰者模式的一个比较方便的特征在于其预期行为的可定制和可配置特性。可以从仅具有一些基本功能的普通对象开始，然后从可用装饰资源池中选择需要用于增强普通对象的哪些功能，并且按照顺序进行装饰，尤其是当装饰顺序很重要的时候。

实现装饰者模式的其中一个方法是使得每个装饰者成为一个对象，并且该对象包含了应该被重载的方法。每个装饰者实际上继承了目前已经被前一个装饰者进行增强后的对象。每个装饰方法在“继承的对象”上调用了同样的方法并获取其值，此外它还继续执行了一些操作。

先上实例1：

我们简单的分析下上面的代码，上面的代码中，一共定义了四个函数（其中一个需要修饰的函数，三个用于修饰的函数）。

然后，声明一个变量myMacbook指向new出来的Insurance对象，Insurance对象的形参指向new出来的Freight对象，Freight对象的形参指向new出来的PackagingFee对象，PackagingFee对象的形参指向new出来的Macbook对象。

接下来，调用myMacbook的cost方法。从上面的分析，我们可以得出 myMacbook.cost()的值等于（Freight对象的cost方法+250），Freight对象的cost方法等于（PackagingFee对象的cost方法+300），PackagingFee对象的cost方法等于（Macbook对象的cost方法+75）。

所以最终的结果是：myMacbook.cost()的值 = 250 + (300 + (75 + 1000)) = 1625。

再看看实例2：

实例2实际上和实例1是非常类似的，我们来简单分析下吧。首先，实例2中定义了三个函数，然后声明了两个变量concrete和decorator1，最后调用了decorator1的performTask方法。

粗看一眼，ConcreteDecoratorClass里面好像并没有performTask方法。我们先来分析下面的两行代码：

然后，我们再来逐行分析下ConcreteDecoratorClass函数里面的代码：

说到这里，好像还是没有分析出ConcreteDecoratorClass函数里面有performTask方法，重点是看 "this"！

ConcreteDecoratorClass函数中的this指向new出来的ConcreteDecoratorClass对象（也就是和decorator1指向同一个对象）；

AbstractDecorator函数里面的this关键是看哪个对象来调用这个函数，this就指向哪个对象（从代码 “this.base = AbstractDecorator; this.base(decorated);” 中我们可以看出是new出来的ConcreteDecoratorClass对象在调用AbstractDecorator函数），所以AbstractDecorator函数里面的this指向new出来的ConcreteDecoratorClass对象（也和decorator1指向同一个对象）。

总结下来，我们会发现，在上面的代码中，不管是ConcreteDecoratorClass函数里面的this，还是AbstractDecorator函数里面的this，都指向new出来的ConcreteDecoratorClass对象。

所以，当我们执行decorator1.performTask()时，它会继续执行匿名函数中的代码（decorated.performTask();），匿名函数中的decorated形参指向new出来的ConcreteClass对象，并执行该对象的performTask方法。

最后看看实例3：

输出 red // 将这2步作为RedApples的decorate方法 } }; tree.BlueApples = function () { this.decorate = function () { this.BlueApples.prototype.decorate(); // 第1步：先执行原型的decorate方法，也就是tree.decorate() console.log('Put on some blue apples'); // 第2步 再输出blue // 将这2步作为BlueApples的decorate方法 } }; tree.Angel = function () { this.decorate = function () { this.Angel.prototype.decorate(); // 第4步：先执行原型（这时候是BlueApples了）的decorate方法 console.log('An angel on the top'); // 第5步 再输出angel // 将这2步作为Angel的decorate方法 } }; tree = tree.getDecorator('BlueApples'); // 第3步：将BlueApples对象赋给tree，这时候父原型里的getDecorator依然可用 tree = tree.getDecorator('Angel'); // 第6步：将Angel对象赋给tree，这时候父原型的父原型里的getDecorator依然可用 tree = tree.getDecorator('RedApples'); // 第9步：将RedApples对象赋给tree tree.decorate(); // 第10步：执行RedApples对象的decorate方法 //Make sure the tree won't fall //Add blue apples //An angel on the top //Put on some red apples

实例3看起来很复杂，实际上分析逻辑还是和前面两个实例一样，我们可以看出实例3中一共声明了5个函数表达式。我们重点分析下下面的代码：

分析到这里，就不难知道最后的输出结果了。

以上就是Javascript装饰者模式的特点和用法实例详解的详细内容，更多请关注Gxl网其它相关文章！