Commit f401796e authored by 梁柱's avatar 梁柱

装饰器使用

parent ef863b46
......@@ -18,3 +18,4 @@
/src/.umi-production
/src/.umi-test
/.env.local
.idea
// 1. 类装饰器 装饰器应用于类的构造函数,可用于观察、修改或替换类定义。
interface Person {
name: string;
age: string;
}
function enhancer(target: any): void {
target.name = 'persion';
target.prototype.name = 'lison';
target.prototype.age = 18;
}
// 1.1 普通装饰器
@enhancer
class Person {
constructor() {}
}
const p: Person = new Person();
// console.log(p.name);
// console.log(p.age);
// 1.2 装饰器工厂
function enhancer2(name: string, age: number) {
return function (target: any): void {
target.prototype.name = name;
target.prototype.age = age;
};
}
@enhancer2('lison', 18)
class Person2 {
constructor() {}
}
const p2: Person = new Person();
// console.log(p2.name);
// console.log(p2.age);
// 2. 属性装饰器
// 属性装饰器用来装饰属性
// 属性装饰器表达式会在运行时当做函数被调用,传入下列两个参数
// 第一个参数: 对于静态成员来说是类的构造函数,对于实例成员是类的原型对象
// 第二个参数: 是属性的名称
// 属性装饰器在属性声明之前声明,返回值会被忽略。
const LowerDecorator: PropertyDecorator = (
target: Object,
propertyKey: string | symbol,
): void => {
let value: string;
console.log(target, propertyKey);
Object.defineProperty(target, propertyKey, {
get: () => {
console.log(value);
return value?.toLowerCase();
},
set: (v) => {
value = v;
},
});
};
class Hd {
@LowerDecorator
title: string | undefined;
constructor() {
this.title = 'BBa';
}
}
const obj = new Hd();
// console.log(obj.title) // bleak
// Object.defineProperty(obj, 'title', {
// get: () => {
// console.log(value)
// return value?.toLowerCase()
// },
// set: v => {
// value = v
// }
// });
// obj.title = 'Bleak'
console.log(obj.title); // bleak);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment