ES7 装饰者模式Decorator

什么是decorator

在程序开发过程中,我们可能希望某个类或者方法,并不是天生就具有很庞大,但是又不是很常用的功能。装饰者模式可以动态的给某个对象添加一些额外的职责,但是却不会影响其它的从这个类中派生出的其它对象。
装饰者模式能够能够在不改变自身对象的基础上,在程序运行期间给对象动态的添加功能。这其实就像我们在游戏中要给游戏角色买装备一样,同一个角色本身的各种属性都是一样的,但是当我们给它穿上不同的装备后,角色的各种属性就会出现差异。

应用实例

首先创建一个类

function gengerateHP(target) {
    target.hp = 1000
}
@generateHP
class Role {    
}
const role = new Role()
console.log(role.hp)    //undefined
console.log(Role.hp)   //1000

其实在这里就产生了疑问,为什么这个hp属性是加在了Role这个类上,而类的实例却没有这个属性,我们知道类本身指向的是构造函数,它的方法都被定义在prototype属性上。那么为什么类有hp属性,而它的实例却没有hp这个属性呢,这说明hp属性并没有被定义在prototype属性上,属于类却不属于某个实例。

decorator的原理

decorator的实现原理是以来ES5的Object.defineProperty方法的而Object.defineProperty()方法所做的就是为一个对象添加新的属性,或者更改对象的某个已经存在的属性。
它的调用方式是

Object.defineProperty(target, prop, descriptor) {
}

其中第一个参数是代表目标对象,prop代表对象的属性名,descriptor是对属性的描述,其字段决定了prop属性的一些特性,比如writable属性就决定了目标对象的属性是否可以更改。

function noWrite(target, prop, desc) {
    desc.writable = false
    return desc
}
class Man {
    @noWrite
    name() {
        return '小明'
    }
}
const xiaoming = new Man()
xiaoming.name = 'xiaoming'

这里就会报错: TypeError: Cannot assign to read only property ‘name’
总结起来说,decorate装饰器模式其实就是在我们需要某个临时的属性或方法时,给目标对象加上这个属性或者方法。装饰者是一种’即用即付’的方式,与继承相比更是一种灵活轻便的做法。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值