首页
学习
活动
专区
工具
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 装饰器函数,该函数可以缓存任何函数的结果,并返回一个新的函数,该函数在调用原始函数前后添加一些缓存功能。

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

相关·内容

领券