装饰者模式

指在不改变现有对象结构的情况下，动态地给该对象增加一些职责（即增加其额外功能）的模式，它属于对象结构型模式。

装饰器模式的主要优点有：

• 装饰器是继承的有力补充，比继承灵活，在不改变原有对象的情况下，动态的给一个对象扩展功能，即插即用
• 通过使用不用装饰类及这些装饰类的排列组合，可以实现不同效果
• 装饰器模式完全遵守开闭原则

其主要缺点是：

• 装饰器模式会增加许多子类，过度使用会增加程序得复杂性。

示例一

我们新建一个自己的方法，在其内部调用b方法，并且再执行自己的方法。这样可以再不修改原对象的情况下，扩展行为

var a = {
    b: function (){}
}
function myb() {
    a.b();
    // 要扩展的自己的方法
}

示例二

现在项目改造，需要给input标签已经有的事件，增加一些操作

var decorator = function (dom, fn) {
    if (typeof dom.onclick = 'function') {
        var _old = dom.onclick;
        dom.onclick = function () {
            _old();
            fn();
        }
    }
}

示例三

vue中利用defineProperty可以监听对象，那么数组怎么办？

  var arrayProto = Array.prototype;
var arrayMethods = Object.create(arrayProto);

var methodsToPatch = [
    'push',
    'pop',
    'shift',
    'unshift',
    'splice',
    'sort',
    'reverse'
];

methodsToPatch.forEach(function (method) {
    // cache original method
    arrayMethods[method] = function () {
        var original = arrayProto[method];
        var result = original.apply(this, args);
        dep.notify();
        return result
    }
 
});