javascript-装饰器
装饰器
装饰者模式：能够在不改变对象自身基础上，在程序运行期间给对象添加职责
装饰器只能针对类和类的属性，不能直接作用于函数（由于存在函数提升）
本质上是语法糖，借助 Object.defineProperty(target,name,descriptor) 添加和修改对象的属性
属性描述符
- 数据描述符
- 存取描述符
使用场景
- log
- time 统计方法执行的时间
- readonly/…
- debounce 对执行的方法执行防抖处理
- mobx 实践
类装饰器
log
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
属性装饰器
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;}@logsayHello(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
参考
- https://zhuanlan.zhihu.com/p/189960001
- https://juejin.cn/post/7153833151217795080
- https://jelly.jd.com/article/6030875363dc65014d6fb76f
- 如何看待 ECMAScript 装饰器（Decorators）提案进入 stage 3？