首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JavaScript装饰者HOWTO?

在JavaScript中,装饰者模式是一种行为型设计模式,它提供了一种可替代继承的方法来扩展对象的功能。通过使用装饰者模式,可以在运行时动态地给一个对象添加一些额外的功能,而不需要修改该对象的源代码。

在JavaScript中实现装饰者模式需要使用一个装饰器函数,该函数接收一个函数作为参数,并返回一个新的函数。这个新的函数可以调用原始函数,并在调用前后添加一些额外的功能。

以下是一个简单的装饰者模式的示例代码:

代码语言:javascript
复制
function logger(fn) {
  return function() {
    console.log(fn.apply(this, arguments));
  };
}

const log = logger(console.log);

log('Hello, world!');

在这个示例中,logger 函数接收一个函数 fn 作为参数,并返回一个新的函数。这个新的函数可以调用原始函数 fn,并在调用前后添加一些额外的功能。在这个例子中,logger 函数使用了 console.log 方法作为原始函数,并返回了一个新的函数,该函数在调用 console.log 方法前后添加了一些额外的功能。

在装饰者模式中,可以通过使用不同的装饰器函数来扩展同一个类或对象的不同功能。例如,可以创建一个 timer 装饰器函数,该函数可以添加计时功能,并返回一个新的函数,该函数在调用原始函数前后添加一些计时功能。

以下是一个使用 timer 装饰器函数的示例代码:

代码语言:javascript
复制
function timer(fn) {
  return function() {
    const startTime = performance.now();
    const result = fn.apply(this, arguments);
    const endTime = performance.now();
    console.log(`Call ${fn.name} took ${endTime - startTime} ms`);
    return result;
  };
}

const slowAdd = timer(function() {
  return 1 + 1;
});

const fastAdd = timer(function() {
  return 1 + 1;
});

const startTime = performance.now();
const result1 = slowAdd();
const result2 = fastAdd();
const endTime = performance.now();
console.log(`Slow add took ${endTime - startTime} ms, result: ${result1}`);
console.log(`Fast add took ${endTime - startTime} ms, result: ${result2}`);

在这个示例中,timer 函数接收一个函数 fn 作为参数,并返回一个新的函数。这个新的函数可以调用原始函数 fn,并在调用前后添加一些计时功能。在这个例子中,timer 函数使用了 performance.now() 方法来获取当前时间,并使用 console.log 方法来输出调用时间和结果。

装饰者模式可以用于扩展任何对象的功能,而不需要修改该对象的源代码。例如,可以创建一个 cache 装饰器函数,该函数可以缓存任何函数的结果,并返回一个新的函数,该函数在调用原始函数前后添加一些缓存功能。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

设计模式 - 装饰模式 - JavaScript

装饰模式:在不改变对象自身的基础上,动态地添加功能代码。 专注前端与算法的系列干货分享,转载请声明出处:原文链接: xxoo521.com 什么是“装饰模式”?...装饰模式:在不改变对象自身的基础上,动态地添加功能代码。 根据描述,装饰显然比继承等方式更灵活,而且不污染原来的代码,代码逻辑松耦合。...应用场景 装饰模式由于松耦合,多用于一开始不确定对象的功能、或者对象功能经常变动的时候。 尤其是在参数检查、参数拦截等场景。...代码实现 ES6 实现 ES6 的装饰器语法规范只是在“提案阶段”,而且不能装饰普通函数或者箭头函数。 下面的代码,addDecorator可以为指定函数增加装饰器。...参考 JavaScript Decorators: What They Are and When to Use Them 《阮一峰 ES6-Decorator》 《廖雪峰 python-Decorator

32510
  • JavaScript设计模式--装饰模式

    那么我们就可以使用装饰着模式。 装饰着模式可以动态地给某个对象添加一些额外的职责,从而不影响这个类中派生的其他对象。...document.getElementById = before(document.getElementById, function(){ console.log(1); }); 四、示例–插件式的表单验证 结合《JavaScript...formSubmit(); 五、装饰模式和代理模式 相同点:这两种模式都描述了怎么为对象提供一定程度上的间接引用,它们的实现部分都保留了对另外一个对象的引用,并且向那个对象发送请求。...区别: (1)代理模式:当直接访问本地不方便或者不符合需求时,为这个本体提供一个替代。本地定义关键功能,而代理提供或拒绝对它的访问,或者在访问本体之前走一些额外的事情。...(其做的事情还是跟本体一样) (2)装饰模式:为对象动态加入行为。(一开始不能确定对象的全部功能,实实在在的为对象添加新的职责和行为)

    41341

    学习《JavaScript设计模式与开发实践》- 装饰模式

    装饰模式的作用 装饰(decorator)模式是一种可以给对象动态地增加职责的方式,式能够在不改变对象自身的基础上,在程序运行期间给对象动态地添加职责。 跟继承相比,装饰模式显得更加的轻量。...使用装饰模式实现自行车配置 首先我们实现自行车的类 function Bicycle() { //setting...... } Bicycle.prototype.func = function...这意味着,装饰器能在编译阶段运行代码。也就是说,装饰器本质就是编译时执行的函数。 方法装饰器 相关知识:Object.defineProperty 装饰器不仅可以装饰类,还可以装饰类的属性。...第一个参数是 类的原型对象,装饰器的本意是要“装饰”类的实例,但是这个时候实例还没生成,所以只能去装饰原型(这不同于类的装饰,那种情况时target参数指的是类本身); 第二个参数是 所要装饰的属性名...** 参考:https://segmentfault.com/a/1190000014495089 最后 装饰模式是为已有功能动态地添加更多功能的一种方式,把每个要装饰的功能放在单独的函数里,然后用该函数包装所要装饰的已有函数对象

    22910

    装饰模式

    在23种设计模式中,装饰模式在游戏开发的过程中,使用的很是频繁。因为这个设计模式,把所有的业务的逻辑封装的对应的实体类中,从而为主流程减负了。...首先看下一个应用场景 装饰模式的应用 我们都知道有一款经典游戏90坦克,这个游戏中,玩家坦克来操作坦克打击AI敌人,在没打死一个红色坦克就会掉下来一个装备,这个装备可以提升移动速度,增加攻击力。...装饰实现流程图 ? 装饰实现逻辑 经过上面的分析,我们可以使用代码来表示我们的设计。...在java 中,IO的实现逻辑就是装饰模式 ,首先看下IO的逻辑类图: ?...知道了装饰模式,我们就可以更好的使用IO的类。

    67940

    装饰模式

    装饰模式进阶 透明与半透明的装饰模式 透明的装饰模式:要求客户端完全针对抽象编程(依赖倒置原则),装饰模式的透明型要求客户端程序不应该声明具体构件类型和具体装饰类型,而应该全部声明为抽象构件类型...:允许用户在客户端声明具体装饰类型的对象,允许在具体装饰中新增方法且客户端可以调用这些新增的方法。...抽象装饰角色:FilterInputStream,实现了抽象构件角色,且成为具体装饰的父类。...这里的装饰模式大多都是半透明的,具体装饰提供了比抽象构件多的方法,客户端可以使用这些方法。...装饰模式的简化 装饰有3种简化模式: 第一种情况,只有一个具体装饰,这样就不需要抽象装饰,具体装饰直接继承抽象构件就可以了。

    26540

    装饰模式

    装饰器模式 动态地给一个对象添加一些额外的职责,装饰器模式就是基于对象组合的方式,可以很灵活的给对象添加所需要的功能。装饰器模式的本质就是动态组合。...装饰器模式意图和结构 装饰模式提供了一种给类增加功能的方法,它通过动态组合可以给原有的代码新增加新的代码,达到修改现有代码的目的,因此我们可以用在修复bug上。...装饰模式主要有Component、ConcreteComponent、Decorator和ConcreteDecorator组成。  ...具体组件角色(ConcreteComponent) :被装饰,定义一个将要被装饰增加功能的类。可以给这个类的对象添加一些职责。  ...ConcreteDecoratorA(c1); decoratorA.operation(); } } 总结 使用装饰模式应注意以下几点: 接口的一致性:装饰器对象的接口必须与它所装饰的Component

    49780

    装饰模式

    一句话总结 通过继承自同一父类,来实现给某一个类动态的添加新的职责,原理是每一个装饰持有被装饰的实例,并可以用自身替代他....首先,将咖啡,茶等饮料定义为被装饰,奶,糖,椰果,珍珠等定义为装饰,当用户下单时,用户购买了一个”被装饰”以及若干个“装饰”,我们只需要将奶,糖,椰果,珍珠等东西装饰在被用户购买的这个被装饰上即可...”类 其实在这里有一问题,装饰和被装饰同样继承自Component,为什么被装饰直接继承,而装饰却还需要再写一个子类呢?...而使用装饰模式,可以很轻松的处理各种附加要求. 特点 通过上面的例子,我们可以总结一下装饰模式的特点。 (1)装饰和被装饰有相同的接口(或有相同的父类)。...(2)装饰保存了一个被装饰的引用。 (3)装饰接受所有客户端的请求,并且这些请求最终都会返回给被装饰(参见韦恩图)。 (4)在运行时动态地为对象添加属性,不必改变对象的结构。

    38920

    装饰模式

    装饰模式(Decorator Pattern) 定义 在不改变原代码结构的情况下,动态地扩展一个对象的功能,相比继承有更灵活的实现方式。...见名知意,其就是在需要增强功能的对象上包装一层代码,达到增强功能的效果 作用 装饰模式在对象创建好之后才动态给对象增加功能,也可以选择不增加,自由灵活。...class MyDog implements Dog { public void eat() { System.out.println("狗吃肉"); } } 下面我们使用装饰模式给狗狗增加功能...WashHandDog(mydog); mydog = new BeatMonster(mydog); mydog.eat(); } 吃饭前洗手 狗吃肉 我的狗狗还能打怪兽 至此我们的装饰模式就搞定了...,是不是很简单,以后遇到增强功能的需求时可以想一想装饰模式

    39050

    装饰模式

    首先我们来分析下装饰模式中有哪些角色: 装饰器:用于扩展被装饰行为和特征 被装饰:设计主体,一切的行为包装都为了丰富被装饰的行为或是能力。 场景分析 朋友开了家畅饮吧,可以喝到不同种类的饮料。...所有的被装饰(饮料)都继承该对象。...装饰器根据传入的被装饰,充当中间代理,对外提供被装饰的信息。...每个被包裹的装饰器对象都继承自抽象定义的装饰器 BeverageDecorator。 装饰器修饰的是被装饰装饰后,本身主体还是被装饰,所以每个装饰器都会把被装饰传入。...装饰模式,动态地将责任附加到对象上,想要扩展功能,装饰提供有别于继承的另一种选择 这种循环嵌套包装类的方式也可以理解为委托的方式,通过组合和委托,可以在运行时动态的添加新的行为 装饰模式意味着有一群装饰

    28310

    装饰模式.

    装饰模式:动态地将责任附加到对象上,若要扩展功能,装饰提供了比继承更有弹性的替代方案。一言以蔽之 —— 动态扩展类的行为。...4、具体装饰(ConcreteDecorator):继承或实现抽象装饰,负责给组件对象"贴上"附加的责任。...Override public double cost() { return 0.89; } } 这是两个具体组件角色 —— 浓缩咖啡类和混合饮料类,用来接受附加责任,也就是装饰具体要装饰的类...特点:   1、装饰和被装饰对象有相同的超类型。   2、你可以用一个或多个装饰包装一个对象。   ...3、装饰可以在所委托的被装饰行为之前或之后,加上自己的行为,以达到特定的目的。   4、对象可以在任何时候被装饰,所以你可以在运行时动态地、不限量的用你喜欢的装饰装饰对象。

    39640

    装饰模式

    ---- 重点来了 装饰设计模式 装饰模式定义 装饰模式:动态的将新功能附加到对象上。...在对象功能扩展方面,它比继承更有弹性,装饰模式也体现了开闭原则(ocp) 原理图: 说明: 装饰模式原理 装饰模式就像是打包快递 主体 比如:衣服 、水果 属于被装饰 Component 包装...(是具体的主体,比如前面讲到的单品coffee) Decorator(装饰 比如 调料):这里面聚合和Component(它是一个父类,我们可以放一个具体的子类 装饰包含被装饰) 在如图的Component...(具体装饰) 而这个FilterInputStream(装饰)中有一个属性InputStream,(被装饰) 简单总结: InputStream 是抽象类, 类似我们前面讲的 Drink FileInputStream...in; 即含被装饰 分析得出在jdk 的io体系中,就是使用装饰模式 ---- okay 到这里关于装饰设计模式的应用案例以及源码分析讲到这里就已经结束了,不知看完这篇文章的你是否有所收获。

    13120

    装饰模式

    这种给对象动态地增加职责的方式称为装饰(decorator)模式。装饰模式能够在不改变对象自身的基础上,在程序运行期间给对象动态地添加职责。...跟继承相比,装饰是一种更轻便灵活的做法,这是一种“即用即付”的方式,比如天冷了就多穿一件外套,需要飞行时就在头上插一支竹蜻蜓。 面向对象的装饰 假如你现在现在在写一个打飞机游戏。...因为装饰对象和它所装饰的对象拥有一致的接口,所以它们对使用该对象的客户来说是透明的,被装饰的对象也并不需要了解它曾经被装饰过,这种透明性使得我们可以递归地嵌套任意多个装饰对象。...javascript装饰模式 高阶函数 在js中并不一定需要那些繁杂的类。上面的功能完全可以用高阶函数来实现。...代理模式通常只有一层代理本体的引用,而装饰模式经常会形成一条长长的装饰链。

    55010

    JavaScript 设计模式学习第十四篇-装饰模式

    装饰模式的原理 装饰模式的原理如下图: ? 可以从上图看出,在表现形式上,装饰模式和适配器模式比较类似,都属于包装模式。...-尤雨溪 2019.6.12 因此本文并没有对 JavaScript装饰器 Decorator 进行相关介绍。 4. 实战中的装饰模式 4.1....TypeScript 中的装饰器 现在的越来越多的前端项目或 Node 项目都在拥抱 JavaScript 的超集语言 TypeScript,如果你了解过 C# 中的特性 Attribute、Java...装饰模式的优缺点 装饰模式的优点: 1....装饰模式与适配器模式 装饰模式和适配器模式都是属于包装模式,然而他们的意图有些不一样: 1. 装饰模式: 扩展功能,原有功能还可以直接使用,一般可以给目标对象多次叠加使用多个装饰; 2.

    41920
    领券