当前位置:首页 > JavaScript

js实现decorator

2026-04-05 19:37:58JavaScript

装饰器(Decorator)在 JavaScript 中的实现

装饰器是一种设计模式,用于在不修改原始函数或类的情况下扩展其功能。在 JavaScript 中,装饰器可以通过高阶函数或 ES7 的装饰器语法实现。

使用高阶函数实现装饰器

高阶函数可以接收一个函数作为参数,并返回一个新的函数,从而实现对原函数的装饰。

function logDecorator(func) {
  return function(...args) {
    console.log(`Calling function ${func.name} with arguments:`, args);
    const result = func.apply(this, args);
    console.log(`Function ${func.name} returned:`, result);
    return result;
  };
}

function add(a, b) {
  return a + b;
}

const decoratedAdd = logDecorator(add);
decoratedAdd(2, 3); // 输出日志并返回 5

使用 ES7 装饰器语法

ES7 引入了装饰器语法,可以直接通过 @ 符号对类或类成员进行装饰。需要在支持装饰器的环境(如 Babel 或 TypeScript)中运行。

js实现decorator

类装饰器

function logClass(target) {
  console.log(`Class ${target.name} is decorated.`);
  return target;
}

@logClass
class MyClass {
  // 类定义
}

方法装饰器

function logMethod(target, name, descriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function(...args) {
    console.log(`Calling method ${name} with arguments:`, args);
    const result = originalMethod.apply(this, args);
    console.log(`Method ${name} returned:`, result);
    return result;
  };
  return descriptor;
}

class Calculator {
  @logMethod
  add(a, b) {
    return a + b;
  }
}

const calc = new Calculator();
calc.add(2, 3); // 输出日志并返回 5

属性装饰器

function readonly(target, name, descriptor) {
  descriptor.writable = false;
  return descriptor;
}

class Person {
  @readonly
  name = 'John';
}

const person = new Person();
person.name = 'Jane'; // 报错:Cannot assign to read only property

装饰器的应用场景

  • 日志记录:记录函数调用和返回值。
  • 性能监控:测量函数执行时间。
  • 权限控制:检查用户权限后再执行函数。
  • 数据验证:验证函数参数是否符合要求。

注意事项

  • 装饰器目前是 ECMAScript 的提案,尚未正式纳入标准。
  • 需要配合 Babel 或 TypeScript 使用,配置相应的插件(如 @babel/plugin-proposal-decorators)。
  • 装饰器不能用于函数(非类方法),除非使用高阶函数的方式。

标签: jsdecorator
分享给朋友:

相关文章

js 实现vue

js 实现vue

实现 Vue 的核心功能 在 JavaScript 中实现 Vue 的核心功能需要模拟数据绑定、虚拟 DOM 和响应式系统。以下是一个简化版的实现思路: 响应式系统 通过 Object.define…

js实现

js实现

JavaScript 实现方法 JavaScript 是一种广泛使用的编程语言,适用于网页开发、服务器端编程以及移动应用开发。以下是几种常见的 JavaScript 实现方法: 网页交互功能 使用…

js实现分页

js实现分页

分页的基本实现思路 在JavaScript中实现分页功能通常需要结合前端和后端逻辑。前端负责渲染分页控件和处理用户交互,后端负责提供分页数据。 前端分页实现 纯前端分页适用于数据量较小的情况,可以直…

js 进度条的实现

js 进度条的实现

使用 HTML 和 CSS 创建基础进度条 HTML 结构可以简单使用一个 div 元素作为容器,内部嵌套另一个 div 表示进度: <div class="progress-containe…

原生js实现轮播图

原生js实现轮播图

基本结构搭建 HTML部分需要包含轮播图容器、图片列表及导航按钮。结构示例如下: <div class="slider-container"> <div class="slid…

js实现图

js实现图

JavaScript 实现图的常用方法 在 JavaScript 中,图(Graph)可以通过多种方式实现,常见的包括邻接表(Adjacency List)和邻接矩阵(Adjacency Matrix…