javascript-装饰器

装饰器

装饰者模式:能够在不改变对象自身基础上,在程序运行期间给对象添加职责

装饰器只能针对类和类的属性,不能直接作用于函数(由于存在函数提升)

本质上是语法糖,借助 Object.defineProperty(target,name,descriptor) 添加和修改对象的属性

属性描述符

  • 数据描述符
  • 存取描述符

使用场景

  • log
  • time 统计方法执行的时间
  • readonly/...
  • debounce 对执行的方法执行防抖处理
  • mobx 实践

类装饰器

log

js 复制代码
function log(Class) {
  return (...args) => {
    console.log(args);
    return new Class(...args);
  };
}

@log
class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const cat = new Animal("Hello kitty", 2);
//  ["Hello kitty", 2]
console.log(cat.name);
// Hello kitty

属性装饰器

js 复制代码
function log(target, name, descriptor) {
  const original = descriptor.value;
  if (typeof original === "function") {
    descriptor.value = function (...args) {
      console.log(`log for args: ${args}`);
      try {
        return original.apply(this, args);
      } catch (e) {
        console.log(`Error: ${e}`);
        throw e;
      }
    };
  }
  return descriptor;
}

class Animal {
  constructor(name) {
    this.name = name;
  }
  @log
  sayHello(name) {
    console.log(`Hello ${name}, I'm ${this.name}`);
  }
}

const cat = new Animal("Hello kitty");
cat.sayHello("Jack");
// log for args: Jack
// Hello Jack, I'm Hello kitty

参考

相关推荐
The Future is mine27 分钟前
Python计算经纬度两点之间距离
开发语言·python
Enti7c28 分钟前
HTML5和CSS3的一些特性
开发语言·css3
爱吃巧克力的程序媛35 分钟前
在 Qt 创建项目时,Qt Quick Application (Compat) 和 Qt Quick Application
开发语言·qt
猿榜1 小时前
js逆向-喜某拉雅Xm-Sign参数解密
javascript
转转技术团队1 小时前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Mintopia1 小时前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
Mintopia1 小时前
Three.js深度解析:InstancedBufferGeometry实现动态星空特效 ——高效渲染十万粒子的底层奥秘
前端·javascript·three.js
随笔记1 小时前
Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)
javascript·css·vue.js
独好紫罗兰1 小时前
洛谷题单3-P5719 【深基4.例3】分类平均-python-流程图重构
开发语言·python·算法
前端Hardy1 小时前
HTML&CSS:超丝滑的动态导航菜单
javascript·css·html