js --装饰者模式
定义
装饰者模式能够在补改变对象自身的基础上,在程序运行期间给对象动态的添加职责。
当看到装饰者模式的定义的时候,我们想到的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', 18) 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(); }
总结
装饰者模式是为以有功能动态的添加更多功能的一种方式,把每个要装饰的功能放在单独的函数里,然后用该函数包装所有装饰的已有函数对象,因此,当需要执行特殊行为的时候,调用代码就可以根据需要有选择的,按顺序的使用装饰功能来包装对象。优点事把类(函数)的核心职责和装饰功能区分开了