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用的是同一个参数

总结

装潢者形式的作用就是为了在不影响原对象功用的情况下，动态的到场某些行动，从而使对象要领更天真多变，易于保护