ES7 装饰者模式Decorator

aaron 发布于2019-08-20 10:41 / 2960人阅读

摘要：装饰者模式可以动态的给某个对象添加一些额外的职责，但是却不会影响其它的从这个类中派生出的其它对象。装饰者模式能够能够在不改变自身对象的基础上，在程序运行期间给对象动态的添加功能。装饰者是一种即用即付的方式，与继承相比更是一种灵活轻便的做法。

什么是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装饰器模式其实就是在我们需要某个临时的属性或方法时，给目标对象加上这个属性或者方法。装饰者是一种’即用即付’的方式，与继承相比更是一种灵活轻便的做法。

GPU服务器服务器托管装饰者模式 jsp 装饰者装饰模式策略者模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80267.html

ES7-Decorator-装饰者模式

摘要：装饰者要实现这些相同的方法继承自装饰器对象创建具体的装饰器，也是接收作对参数接下来我们要为每一个功能创建一个装饰者对象，重写父级方法，添加我们想要的功能。装饰模式仅仅包装现有的模块，使之更加华丽，并不会影响原有接口的功能 —— 好比你给手机添加一个外壳罢了，并不影响手机原有的通话、充电等功能；使用 ES7 的 decorator ES7 中增加了一个 decorator 属性...

zhangxiangliang 2019-08-26 13:54 评论0 收藏0
5 分钟即可掌握的 JavaScript 装饰者模式与 AOP

摘要：下装饰者的实现了解了装饰者模式和的概念之后，我们写一段能够兼容的代码来实现装饰者模式原函数拍照片定义函数装饰函数加滤镜用装饰函数装饰原函数这样我们就实现了抽离拍照与滤镜逻辑，如果以后需要自动上传功能，也可以通过函数来添加。 showImg(https://segmentfault.com/img/bVbueyz?w=852&h=356); 什么是装饰者模式当我们拍了一张照片准备发朋友...

chunquedong 2019-08-23 18:16 评论0 收藏0
JS设计模式--装饰者模式

摘要：当接口比较多，装饰器也比较多时，可以独立抽取一个装饰器父类，实现目标类的所有接口，再创建真正的装饰器来继承这个父类。四的实现方式提供了一种类似的注解的语法糖，来实现装饰者模式。欢迎关注我的公众号睿Talk，获取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言所谓装饰者模式，就是动态的给类或对象增加职责的设计模式。它...

wmui 2019-08-22 15:17 评论0 收藏0
Decorator:从原理到实践，我一点都不虚~

摘要：描述符必须是这两种形式之一不能同时是两者。可以是任何有效的值数值，对象，函数等。当且仅当该属性的为时，才能被赋值运算符改变。特点就是不影响之前对象的特性，而新增额外的职责功能。前言原文链接:[Nealyang/personalBlog]() showImg(https://segmentfault.com/img/remote/1460000018958861); ES6 已经不必...

XanaHopper 2019-08-23 17:05 评论0 收藏0