一、装饰器概念
在开发过程中,很多时候我们不想要类的功能一开始就很庞大,一次性包含很多职责(毕竟程序员一直恪守着封装抽象bababa等概念)。这个时候我们可以使用装饰器模式。动态的给某个对象添加一些职责,并且不会影响从这个类派生的其他对象。
在传统的面向对象开发中,给对象添加功能时,我们通常会采用继承的方式,继承的方式目的是为了复用,但是随之而来也带来一些问题:
(1)父类和子类存在强耦合的关系,当父类改变时,子类也需要改变;
(2)子类需要知道父类中的细节,至少需要知道接口名,从而进行复用或复写,这样其实破坏了封装性;
(3)继承的方式,可能会创建出大量子类。比如现在有BBA三种类型的汽车,构造了一个汽车基类,三个三种类型的汽车。现在需要给汽车装上雾灯、前大灯、导航仪、刮雨器,如果采用继承的方式,那么就要构建3*4个类。但是如果把雾灯、前大灯、导航仪、刮雨器动态地添加到汽车上,那么只需要增加4个类。这种采用动态添加职责的方式就是装饰器。
装饰器的目的就是在不改变原来类的基础上,为其在运行期间动态的添加职责。
二、修饰成员变量三个参数
target 对于静态成员来说是构造函数 对于实例成员来说是原型对象
name 被修饰成员的名字
descriptor 被修饰成员的属性描述符
具体代码如下
/*
* @Description: 装饰器
*/
function init(){
const res = await AxiosFun.post(`/dictionary`)
return res
}
export function Des(arr) {
return function (target, key,descriptor) {
const oldValue = descriptor.value
descriptor.value = function () {
//AxiosFun为网络请求执行一系列装饰的方法
init().then(() => {
// 执行原方法
oldValue.apply(this, this.arguments);
});
}
return descriptor
}
}
用法
@decorator
class A {}
// 等同于
class A {}
A = decorator(A) || A;
借助装饰器 我们就有能力改变类内部的方法和变量
注意:装饰器只能修饰类或者类上的方法,不能直接修饰函数,react函数组件是不适应的。