讲师中心 微信公众号
AI工具推荐 视频效率加速

js装饰者模式是什么

秋静大大_8121

秋静大大_8121

发布时间:2025-11-01 17:56:02

|

529人浏览过

|

来源于php中文网

原创

装饰者模式通过包装对象动态扩展功能而不修改原对象。如用addRecorder增强phone的call方法,添加录音功能;或用cacheDecorator为fibonacci函数增加缓存,实现性能优化,符合开放封闭原则。

js装饰者模式是什么

装饰者模式(Decorator Pattern)是一种结构型设计模式,它的核心作用是在不修改原有对象的基础上,动态地给对象添加新的功能或行为。这种模式在 JavaScript 中非常实用,因为它符合开放封闭原则——对扩展开放,对修改封闭。

装饰者模式的基本思想

你可以把一个基础对象想象成一个普通的咖啡,然后通过“装饰”来不断添加牛奶、糖、巧克力等配料。每一步都不会改变原始的咖啡对象,而是生成一个新的、功能更丰富的对象。

在 JavaScript 中,装饰者模式通常通过包装原对象或函数,扩展其方法或属性,而不影响原始实现。

JavaScript 中的实现方式

下面是一个简单的例子,展示如何用装饰者模式增强一个对象的方法:

// 原始对象
const phone = {
  call: function() {
    console.log("打电话");
  }
};
<p>// 装饰者:给手机增加录音功能
function addRecorder(obj) {
const originCall = obj.call; // 保存原方法
obj.call = function() {
console.log("开始录音...");
originCall.apply(this, arguments); // 调用原方法
console.log("结束录音");
};
return obj;
}</p><p>// 使用装饰者
const decoratedPhone = addRecorder(phone);
decoratedPhone.call();
// 输出:
// 开始录音...
// 打电话
// 结束录音</p>

在这个例子中,addRecorder 就是一个装饰者函数,它没有修改 phone 的原始代码,而是增强了它的 call 方法。

Browser Js
Browser Js

轻量级CDP浏览器控制,适用于AI代理。相较于内置浏览器工具,token消耗降低3‑10倍,仅在浏览时使用。

下载

实际应用场景

  • 日志记录:在不修改原函数的情况下,记录函数调用信息。
  • 权限控制:在执行某个操作前检查用户权限。
  • 缓存增强:为耗时计算函数添加缓存机制。
  • 兼容性处理:为老接口添加新特性支持。

比如,为一个计算函数添加缓存装饰:

function cacheDecorator(fn) {
  const cache = new Map();
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      console.log("命中缓存");
      return cache.get(key);
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}
<p>function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}</p><p>const cachedFibonacci = cacheDecorator(fibonacci);</p>

这样,cachedFibonacci 在保留原逻辑的同时,拥有了缓存能力。

基本上就这些。装饰者模式让你可以像搭积木一样灵活扩展功能,特别适合需要组合多种行为的场景。

热门AI工具

更多
UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

3108

2023.10.19

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程,阅读专题下面的文章了解更多详细内容。

4669

2025.10.17

php8.4实现接口限流的教程
php8.4实现接口限流的教程

PHP8.4本身不内置限流功能,需借助Redis(令牌桶)或Swoole(漏桶)实现;文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

3729

2025.12.29

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

426

2026.01.19

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

4136

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1295

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1678

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

9683

2023.08.17

PixTV官网入口地址合集
PixTV官网入口地址合集

本专题汇总了 PixTV AI 一站式视频创作平台的官方入口与使用教程。无需下载软件,浏览器直接访问即可使用。平台将剧本、图像、视频、声音与剪辑整合在“无限画布”中,接入 GPT Image 2.5、Seedance 2.5 等头部模型。本专题整理了从新建画布、角色锚定、分镜拆分到视频生成与导出的完整操作指南,助你快速上手 AI 短剧与漫剧创作。

20

2026.10.10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn