一文理解JavaScript装饰器模式

装饰器模式想必大家并不陌生：它允许向一个现有的对象添加新的功能，同时又不改变其结构，属于结构型模式，它是作为现有的类的一个包装。

这种模式创建了一个装饰类，用来包装原有的类，并在保持类方法签名完整性的前提下，提供了额外的功能。

在 JS 中，装饰器（Decorator）是ES7中的一个新语法，它可以对​​类、方法、属性​​进行​​修饰​​，从而进行一些相关功能定制。它的写法与Java的注解（Annotation）非常相似，但是功能还是有很大区别。

代码示例：

不使用装饰器：

const log = (srcFun) => {
if(typeof(srcFun) !== 'function') {
throw new Error(`the param must be a function`);
}
return (...arguments) => {
console.info(`${srcFun.name} invoke with ${arguments.join(',')}`);
srcFun(...arguments);
}
}
const plus = (a, b) => a + b;
const logPlus = log(plus);
logPlus(1,2);
// plus invoke with 1,2

使用装饰器：

const log = (target, name, descriptor) => {
var oldValue = descriptor.value;
descriptor.value = function() {
console.log(`Calling ${name} with`, arguments);
return oldValue.apply(this, arguments);
};
return descriptor;
}
class Math {
@log // Decorator
plus(a, b) {
return a + b;
}
}
const math = new Math();
math.plus(1, 2);
// Calling plus with 1,2

从上面的代码可以看出，如果有的时候我们并不需要关心函数的内部实现，仅仅是想调用它的话，装饰器能够带来比较好的可读性，使用起来也是非常的方便。

// readonly 装饰器
import { readonly } from 'core-decorators';
class Fudao {
@readonly
title = 'A';
}
var fudao = new Fudao();
fudao.title = 'B'; // This will log error & doesn't work

JS中的装饰器本质也是一个函数，利用的是JS中object的descriptor；

装饰类和被装饰类可以独立发展，不会相互耦合，装饰模式是继承的一个替代模式，装饰模式可以动态扩展一个实现类的功能。

到此这篇关于一文理解JavaScript装饰器模式的文章就介绍到这了,更多相关JS装饰器模式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • PHP、Python和Javascript的装饰器模式对比

    PHP、Python和Javascript的装饰器模式对比

    修饰模式(Decorator Pattern),又叫装饰者模式,是面向对象编程领域中,一种动态地往一个类中添加新的行为的设计模式.就功能而言,修饰模式相比生成子类更为灵活,这样可以给某个对象而不是整个类添加一些功能.装饰模式非常适用于灵活扩展对象的功能,下面是装饰模式的UML图: 例如,有一个技术论坛,用户通过留言进行沟通,由于刚开始论坛里都是熟人,几乎都不需要对留言的内容作出审核,接收留言的页面可以是这样: class SaveMsg(){ private $msg; public funct

  • JS装饰者模式和TypeScript装饰器

    JS装饰者模式和TypeScript装饰器

    装饰者模式介绍 装饰者模式(Decorator Pattern)也称为装饰器模式,在不改变对象自身的基础上,动态增加额外的职责.属于结构型模式的一种. 使用装饰者模式的优点:把对象核心职责和要装饰的功能分开了.非侵入式的行为修改. 举个例子来说,原本长相一般的女孩,借助美颜功能,也能拍出逆天的颜值.只要善于运用辅助的装饰功能,开启瘦脸,增大眼睛,来点磨皮后,咔嚓一拍,惊艳无比. 经过这一系列叠加的装饰,你还是你,长相不增不减,却能在镜头前增加了多重美.如果你愿意,还可以尝试不同的装饰风格,只要装

  • 一文理解JavaScript装饰器模式

    装饰器模式想必大家并不陌生:它允许向一个现有的对象添加新的功能,同时又不改变其结构,属于结构型模式,它是作为现有的类的一个包装. 这种模式创建了一个装饰类,用来包装原有的类,并在保持类方法签名完整性的前提下,提供了额外的功能. 在 JS 中,装饰器(Decorator)是ES7中的一个新语法,它可以对​​类.方法.属性​​进行​​修饰​​,从而进行一些相关功能定制.它的写法与Java的注解(Annotation)非常相似,但是功能还是有很大区别. 代码示例: 不使用装饰器: const log

  • JavaScript装饰者模式原理与用法实例详解

    本文实例讲述了JavaScript装饰者模式原理与用法.分享给大家供大家参考,具体如下: 这里我们通过需求逐渐引出装饰者模式. 下面是一个关于几代汽车的不同逐渐体现装饰者模式的. 首先,我们先引入一个接口文件----目的为检验实现类是否完全实现接口中的方法,代码如下, //定义一个静态方法来实现接口与实现类的直接检验 //静态方法不要写出Interface.prototype ,因为这是写到接口的原型链上的 //我们要把静态的函数直接写到类层次上 //定义一个接口类 var Interface=

  • JavaScript装饰器的实现原理详解

    目录 装饰器的常见作用 装饰类的属性 装饰类 注意 实例应用 最近在使用TS+Vue的开发模式,发现项目中大量使用了装饰器,看得我手足无措,今天特意研究一下实现原理,方便自己理解这块知识点. 装饰器的常见作用 装饰一个类的属性 装饰一个类 装饰器只能针对类和类的属性,不能直接作用于函数,因为存在函数提升. 下面我们针对这两种情况进行举例阐述. 装饰类的属性 function readonly(target, name, descriptor) { discriptor.writable = fa

  • PHP设计模式之装饰器模式定义与用法详解

    本文实例讲述了PHP设计模式之装饰器模式定义与用法.分享给大家供大家参考,具体如下: 什么是装饰器模式 作为一种结构型模式, 装饰器(Decorator)模式就是对一个已有结构增加"装饰". 适配器模式, 是为现在有结构增加的是一个适配器类,.将一个类的接口,转换成客户期望的另外一个接口.适配器让原本接口不兼容的类可以很好的合作. 装饰器模式是将一个对象包装起来以增强新的行为和责任.装饰器也称为包装器(类似于适配器) 有些设计设计模式包含一个抽象类,而且该抽象类还继承了另一个抽象类,这

  • 详解KOA2如何手写中间件(装饰器模式)

    前言 Koa 2.x 版本是当下最流行的 NodeJS 框架, Koa 2.0 的源码特别精简,不像 Express 封装的功能那么多,所以大部分的功能都是由 Koa 开发团队(同 Express 是一家出品)和社区贡献者针对 Koa 对 NodeJS 的封装特性实现的中间件来提供的,用法非常简单,就是引入中间件,并调用 Koa 的 use 方法使用在对应的位置,这样就可以通过在内部操作 ctx 实现一些功能,我们接下来就讨论常用中间件的实现原理以及我们应该如何开发一个 Koa 中间件供自己和别

  • PHP设计模式（八）装饰器模式Decorator实例详解【结构型】

    本文实例讲述了PHP设计模式:装饰器模式Decorator.分享给大家供大家参考,具体如下: 1. 概述 若你从事过面向对象开发,实现给一个类或对象增加行为,使用继承机制,这是所有面向对象语言的一个基本特性.如果已经存在的一个类缺少某些方法,或者须要给方法添加更多的功能(魅力),你也许会仅仅继承这个类来产生一个新类-这建立在额外的代码上. 通过继承一个现有类可以使得子类在拥有自身方法的同时还拥有父类的方法.但是这种方法是静态的,用户不能控制增加行为的方式和时机.如果  你希望改变一个已经初始化的

  • 如何正确理解python装饰器

    一.闭包 要想了解装饰器,首先要了解一个概念,闭包.什么是闭包,一句话说就是,在函数中再嵌套一个函数,并且引用外部函数的变量,这就是一个闭包了.光说没有概念,直接上一个例子. def outer(x): def inner(y): return x + y return inner print(outer(6)(5)) ----------------------------- >>>11 如代码所示,在outer函数内,又定义了一个inner函数,并且inner函数又引用了外部函数ou

  • C#设计模式之适配器模式与装饰器模式的实现

    C#设计模式之适配器模式与装饰器模式的实现

    目录 结构型设计模式 适配器模式 实现代码 总结 装饰器模式 实现代码 结构型设计模式 创建型设计模式主要是为了解决创建对象的问题,而结构型设计模式则是为了解决已有对象的使用问题. 适配器模式 适配器模式比较好理解,因为在我们的日常生活中就很常见,如耳机转换线.充电器适配器.插座等,举个最常见的例子: 插座就是个适配器,将一个接口扩展为多个接口,将墙上的双孔接口转换为三孔接口.而这也就是适配器的作用:将一个接口转换为用户期望的另一个接口. 适配器的使用场景: 需要使用第三方SDK的核心功能,但其

  • python设计模式之装饰器模式

    python设计模式之装饰器模式

    目录 装饰器模式 python 装饰器语法糖 装饰器模式 装饰器模式解决什么问题? 增加新功能,且不改变原有功能和代码 选配,根据不同情况,动态调整功能 装饰器,顾名思义,就是用来装饰其他实物,增加被装饰物的功能而不改变被装饰物.这就像我们买车,同一款车型,有很多功能是选配的,但是车的核心功能不变.我们可以在购买时,根据需要选配不同的配置. 如何实现? 想象一下,你是一个装修工,如果要装饰一辆车,那么你首先需要有一辆车,而且在装饰过程中,你不能够改变车原有的功能(接口). 如类图所示: 核心功能

  • Java设计模式之装饰器模式

    本文由老王将建好的书房计划请小王来帮忙,小王却想谋权篡位,老王通过教育他引出装饰器设计模式,第二部分针对老王提出的建设性意见实现装饰器模式,第三部分针对装饰器模式在Jdk中的IO.Spring中的缓存管理器.Mybatis的运用来加强我们的理解,第四部分说明装饰器模式和代理模式的区别及他们各自的应用场景. 读者可以拉取完整代码到本地进行学习,实现代码均测试通过后上传到码云,本地源码下载. 一.引出问题 上篇文章(Java设计模式之组合模式)对老王的书架改造以后,老王是相当的满意,看小王能力突出,

随机推荐