定义
装饰者模式能够在补改变对象自身的基础上，在程序运行期间给对象动态的添加职责。
当看到装饰者模式的定义的时候，我们想到的js 的三大特性之一–继承，不也能够实现不改变对象自身的基础上，添加动态的职责，也是可以实现的。那为什么还需要装饰者模式呢？在解决这个问题之前，先讲一下继承的概念。
继承
继承可以解决代码复用的问题，让编程更靠近人类的思维。当多个类存在相同的属性（变量）和方法时，可以从这些类中抽象出父类，在父类中定义这些相同的属性和方法，所有的子类不需要重新定义这些属性和方法，只需要通过继承父类中的属性和方法。
js 实现继承的方式:下面介绍几种常见的继承方式
1.对象冒充 :对象冒充的意思就是获取那个类的所有成员,js调用哪个方法，就获取那个方法的所有。
// 对象冒充
function father(name, age) {
this.name = name
this.age = age
this.show= function() {
console.log('我叫' + this.name , '今年' + this.age)
}
}
function son(name, age) {
this.father = father
this.father(name, age)
this.showSon= function() {
console.log('自己')
}
}
let Son = new son('gmn', )
Son.show() //我叫gmn 今年18
2.原型链继承：将父类的实例作为子类的原型
// 原型链继承
function Father() {}
Father.prototype.name = function(name) {
this.name = name
console.log('name', name)
}
Father.prototype.age = function(age) {
this.age = age
}
function Son() {}
Son.prototype =new Father()
Son.prototype.name('gmn') // gmn
特点：
- 非常纯粹的继承关系，实例是子类的实例，也是父类的实例
- 父类新增原型方法/原型属性，子类都能访问到
- 简单，易于实现
缺点：
- 要想为子类新增属性和方法，必须要在
new Animal()这样的语句之后执行，不能放到构造器中 - 无法实现多继承
- 来自原型对象的所有属性被所有实例共享
- 创建子类实例时，无法向父类构造函数传参
在es6中也有extend 和class 来实现继承。其实，本质也是基于原型机制的。
其实，继承会存在一些缺点：
1.超类子类的强耦合，超类改变导致子类改变
2.超类内部细节对子类可见，破坏了封装性
3.完成功能复用的同时，可能会创造大量子类。
也正是因为继承的缺点，才有了装饰者模式。关于继承的概念就先暂时讲这么多把，言归正传，继续说装饰者模式。
例子：
1.传统面向对象语言的实现方式
// 原始类
var Original = function () {
};Original.prototype.fire = function () {
console.log('着火了');
};//装饰类
var MissileDecorator = function (plan) {
this.plan = plan;
}MissileDecorator.prototype.fire = function () {
this.plan.fire();
console.log('真的着火了');
};var plan = new Original();
plan = new MissileDecorator(plan);
plan.fire();
// 着火了
// 真的着火了
这种方式的实现，室装饰器类要维护目标对象的一个引用，同时还是新啊目标类的所有接口哦。调用方法时，先执行目标对象原有的方法，在执行自行添加的特性。
2.JS基于对象的实现方式
var Original = {
fire: function () {
console.log('着火了');
}
};var missileDecorator= function () {
console.log('真的着火了');
};var fire = Original.fire;Original.fire=function () {
fire();
missileDecorator();
};Original.fire();
//着火了
// 真的着火了
装饰者模式将一个对象嵌入到另一个对象之中，实际上相当于这个对象被另一个对像包装起来，形成一条包装链。请求随着这条包装链依次传递到所有的对象，每个对象都有处理这条请求的机会。
3，使用装饰者模式实现表单校验并提交：装饰着模式分离表单验证和提交的函数
Function.prototype.before=function (beforefn) {
var _this= this; //保存旧函数的引用
return function () { //返回包含旧函数和新函数的“代理”函数
beforefn.apply(this,arguments); //执行新函数,且保证this不被劫持,新函数接受的参数
// 也会被原封不动的传入旧函数,新函数在旧函数之前执行
return _this.apply(this,arguments);
};
};var validata=function () {
if(username.value===''){
alert('用户名不能为空!')
return false;
}
if(password.value===''){
alert('密码不能为空!')
return false;
}
}var formSubmit=function () {
var param={
username=username.value;
password=password.value;
} ajax('post','http://www.mn.com',param);
}formSubmit= formSubmit.before(validata);submitBtn.onclick=function () {
formSubmit();
}
总结
装饰者模式是为以有功能动态的添加更多功能的一种方式，把每个要装饰的功能放在单独的函数里，然后用该函数包装所有装饰的已有函数对象，因此，当需要执行特殊行为的时候，调用代码就可以根据需要有选择的，按顺序的使用装饰功能来包装对象。优点事把类（函数）的核心职责和装饰功能区分开了
