已解决
JavaScript设计模式之装饰器模式
来自网友在路上 154854提问 提问时间：2023-11-03 12:53:10阅读次数： 54
最佳答案 问答题库548位专家为你答疑解惑
装饰器模式比继承更轻便，不改变原有对象的方法，在原有方法的前面或者后面添加一些点缀功能。
- ES6写法
- 装饰class
const logWrapper = targetClass => {const oldRender = targetClass.prototype.rendertargetClass.prototype.render = () => {console.log('before render')oldRender.apply(this)console.log('after render')}return targetClass
}
class App {constructor(title) {this.title = title}render() {console.log(`渲染页面${this.title}`)}
}
App = logWrapper(App)
new App().render()
- typescript写法
- 装饰class
const logWrapper = targetClass => {const oldRender = targetClass.prototype.rendertargetClass.prototype.render = () => {console.log('before render')oldRender.apply(this)console.log('after render')}return targetClass
}
@logWrapper
class App {constructor(title) {this.title = title}render() {console.log(`渲染页面${this.title}`)}
}
new App().render()
- 装饰class的属性
const logWrapper = (target, name, descriptor) => {console.log(arguments)let originRender = descriptor.valuedescriptor.value = function () {console.log('before render')originRender.bind(this)()console.log('after render')}console.log(target)
}class App {constructor() {this.title = '饥人谷首页'}@logWrapperrender() {console.log('渲染页面:' + this.title);}
}
new App().render()
查看全文
99%的人还看了
相似问题
猜你感兴趣
版权申明
本文"JavaScript设计模式之装饰器模式"：http://eshow365.cn/6-31083-0.html 内容来自互联网，请自行判断内容的正确性。如有侵权请联系我们，立即删除！