TypeScript装饰器实现原理-爱代码爱编程
TypeScript注解风格的装饰器
@decorate
装饰器函数的作用是在调用eat方法
之前执行执行自定义的功能
function decorate(target, property, descriptor) {
var oldValue = descriptor.value
descriptor.value = msg => {
console.log('先洗手')
msg = `后 ${msg}`
return oldValue.apply(null, [msg])
}
return descriptor
}
class Log {
@decorate
eat(msg) {
console.log(msg)
}
}
const log = new Log()
log.eat('吃饭')
运行结果如下:
用js实现以上@decorate
装饰器
class Log {
eat(msg) {
console.log(msg)
}
}
const decorate = (target, property) => {
var old = target.prototype.eat
target.prototype[property] = msg => {
console.log('先洗手 2')
msg = `后 ${msg} 2`
old(msg)
}
}
decorate(Log, 'eat') //相当于 eat 上面的 @decorate
const log = new Log()
log.eat('吃饭')
运行结果如下:
TypeScript装饰器的底层实现原理如下
class Log {
eat(msg) {
console.log(msg)
}
}
function decorate(target, property, descriptor) {
var oldValue = descriptor.value
descriptor.value = msg => {
console.log('先洗手 3')
msg = `后 ${msg} 3`
return oldValue.apply(null, [msg])
}
return descriptor
}
const anotation = (target, proterty, decorate) => {
const descriptor = decorate(
Log.prototype,
proterty,
Object.getOwnPropertyDescriptor(Log.prototype, proterty)
)
Object.defineProperty(Log.prototype, proterty, descriptor)
}
anotation(Log, 'eat', decorate) //相当于 eat 上面的 @decorate
const log = new Log()
log.eat('吃饭')
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接: https://blog.csdn.net/qq_41614928/article/details/111085571