js --装饰者模式

2024-02-28 13:51:40

定义

装饰者模式能够在补改变对象自身的基础上，在程序运行期间给对象动态的添加职责。

当看到装饰者模式的定义的时候，我们想到的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();
}

总结

装饰者模式是为以有功能动态的添加更多功能的一种方式，把每个要装饰的功能放在单独的函数里，然后用该函数包装所有装饰的已有函数对象，因此，当需要执行特殊行为的时候，调用代码就可以根据需要有选择的，按顺序的使用装饰功能来包装对象。优点事把类（函数）的核心职责和装饰功能区分开了

码农公寓

相关文章