在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
装饰器函数的示例代码:
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
装饰器函数,该函数可以缓存任何函数的结果,并返回一个新的函数,该函数在调用原始函数前后添加一些缓存功能。
领取专属 10元无门槛券
手把手带您无忧上云