javascript设计模式 --- 装饰者模式

javascript设计模式 --- 装饰者模式

何为装饰者，意思就是，在不影响对象主功能的情况下，再添加一些额外的功能，使对象具备更多的功能。与继承相比，装饰者是一种更灵活轻便的做法。下面我们看看javascript里装饰者模式

1.模拟传统面向对象语言的装饰者模式

装饰者模式将一个对象嵌入到另一个对象之中，实际上相当于这个对象被另一个对像包装起来，形成一条包装链。请求随着这条包装链依次传递到所有的对象，每个对象都有处理这条请求的机会。

var Plan1 = {
    fire: function () {
      console.log('发射普通的子弹')
    }
  }
  var missileDecorator = function () {
    console.log('发射导弹!');
  }
  var fire = Plan1.fire
  Plan1.fire = function () {
    fire()
    missileDecorator()
  };
  Plan1.fire()

装饰函数， 很多时候我们在修改别人的代码时，会改动window.onload里的东西，但是直接修改别人的代码太多，容易出错，所以我们可以用下面这个方式来修改

    // 别人的代码
    window.onload = function () {
        console.log('别人的代码')
    }
 var _onload = window.onload || function() {}
    window.onload = function(){
        _onload()
        console.log('自己的代码')
    }

通过以上方式，我们可以很轻松的在onload的函数里插入自己的方法，而不会影响别人的方法

面向切面的AOP编程，因为函数在js里是一等对象，所以，我们可以给函数原型添加我们需要执行的方法

Function.prototype.before = function (fn) {
        var self = this // 原函数
        return function () {  // 返回一个新函数，该函数先执行fn函数，再执行原函数
            fn.apply(this, arguments)  // fn函数
            return self.apply(this, arguments)  // 原函数
        }
    }
    var f1 = function () {
        console.log(2)
    }
    var f1 = f1.before(function () {
        console.log(1)
    })
    f1()  // 1   2

仔细观察上面的方法，我们可以看到，fn函数和原函数使用的都是一个arguments，所以，我们可以在fn函数里修改arguments，使原函数直接使用修改过的arguments，例如

    var obj = {
        a: 'a'
    }

    var f1 = function (params) {
        console.log(params)
    }
    var f1 = f1.before(function (params) {
        params.b = 'b'  // 给obj添加b属性
    })
    f1(obj)  // {a: "a", b: "b"}

我们添加了一个obj，可以看到，before里，给obj添加了一个b属性，因为before里的fn和f1用的是同一个参数

总结

装饰者模式的作用就是为了在不影响原对象功能的情况下，动态的加入某些行为，从而使对象方法更灵活多变，易于维护