javascript 装饰者模式

JavaScript装饰者模式是一种功能强大的设计模式，它通过将对象包装在其他对象中来增强其功能。该模式允许您通过动态地添加代码来修改对象的行为，从而避免了对原始对象进行修改。

一种常见的应用是用装饰者模式实现缓存。

function cacheDecorator(fn) {const cache = {};return function(...args) {const argStr = JSON.stringify(args);if (cache[argStr]) {console.log('从缓存中获取...');return cache[argStr];}const result = fn.apply(null, args);cache[argStr] = result;console.log('计算结果并缓存...');return result;}}function add(a, b) {console.log('开始计算...');return a + b;}const cachedAdd = cacheDecorator(add);cachedAdd(1, 2);cachedAdd(1, 2);

该代码段定义了一个cacheDecorator函数，它返回一个新的函数。新函数首先检查缓存中是否有与当前参数匹配的值。如果找到一个匹配项，则返回缓存的结果，否则执行原始函数并缓存结果。

另一种常见的应用是用装饰者模式实现日志记录。

function logDecorator(fn) {return function(...args) {console.log([${new Date().toISOString()}] 执行函数 ${fn.name}(${args.join(', ')}));const result = fn.apply(null, args);console.log([${new Date().toISOString()}] 函数 ${fn.name}(${args.join(', ')}) 返回 ${result});return result;}}function add(a, b) {return a + b;}const loggedAdd = logDecorator(add);loggedAdd(1, 2);

该代码段定义了一个logDecorator函数，它返回一个新的函数。新函数在执行原始函数前打印函数名和参数，然后在函数执行后打印函数名、参数和返回值。

装饰者模式还可以用于动态修改对象，例如增加新的属性或方法。

const car = {startEngine() {console.log('引擎已启动');},stopEngine() {console.log('引擎已关闭');}};function turbochargeDecorator(car) {return {...car,boost() {console.log('涡轮增压已开启');}}}const turbochargedCar = turbochargeDecorator(car);turbochargedCar.startEngine();turbochargedCar.boost();

该代码段定义了一个turbochargeDecorator函数，它返回一个新对象，该对象包含原始对象的所有属性和一个名为“boost”的新方法。在这个例子中，装饰器没有修改原始对象，而是创建了一个新对象。

在JavaScript中，装饰者模式可以使用类、函数和对象来实现。从ES6开始，我们可以通过类和类继承来实现装饰者模式。

class Car {startEngine() {console.log('引擎已启动');}stopEngine() {console.log('引擎已关闭');}}class TurbochargedCar extends Car {boost() {console.log('涡轮增压已开启');}}const car = new Car();car.startEngine();const turbochargedCar = new TurbochargedCar();turbochargedCar.startEngine();turbochargedCar.boost();

该代码段使用ES6语法定义Car和TurbochargedCar类，增加了一个名为“boost”的新方法。TurbochargedCar继承自Car，并扩展了它的功能。在这种情况下，使用类来实现装饰者模式提供了更好的可读性和类型安全性。

在本文中，我们介绍了JavaScript的装饰者模式，并且提供了多个实例说明。这种模式能够动态地改变对象的行为，从而避免直接修改原始对象。装饰者模式适用于许多场景，包括实现缓存、日志记录和增加新的属性或方法。

上一篇：javascript 表格预览

下一篇：css怎么让文字浮动