上一篇文章中,我们议论了TypeScript源码中关于要领装潢器的完成,搞邃晓了以下几个问题:
- 装潢器函数是怎样被挪用的?
- 装潢器函数参数是怎样传入的?
-
__decorate
函数干了些什么事情?
接下来我们继承属性装潢器的视察。
属性装潢器
属性装潢器的声明标识以下:
declare type PropertyDecorator = (target: Object, propertyKey: string | symbol) => void;
以下我们为一个类的属性增加了一个名为@logProperty
的装潢器
class Person {
@logProperty
public name: string;
public surname: string;
constructor(name : string, surname : string) {
this.name = name;
this.surname = surname;
}
}
上一篇诠释过,当这段代码末了被编译成JavaScript执行时,要领__decorate
会被挪用,但此处会少末了一个参数(经由历程Object. getOwnPropertyDescriptor
属性描述符)
var Person = (function () {
function Person(name, surname) {
this.name = name;
this.surname = surname;
}
__decorate(
[logProperty],
Person.prototype,
"name"
);
return Person;
})();
须要注重的是,此次TypeScript编译器并没像要领装潢器那样,运用__decorate
返回的效果掩盖原始属性。缘由是属性装潢器并不须要返回什么。
Object.defineProperty(C.prototype, "foo",
__decorate(
[log],
C.prototype,
"foo",
Object.getOwnPropertyDescriptor(C.prototype, "foo")
)
);
那末,接下来详细完成这个@logProperty
装潢器
function logProperty(target: any, key: string) {
// 属性值
var _val = this[key];
// getter
var getter = function () {
console.log(`Get: ${key} => ${_val}`);
return _val;
};
// setter
var setter = function (newVal) {
console.log(`Set: ${key} => ${newVal}`);
_val = newVal;
};
// 删除属性
if (delete this[key]) {
// 建立新的属性
Object.defineProperty(target, key, {
get: getter,
set: setter,
enumerable: true,
configurable: true
});
}
}
完成历程起首声清楚明了一个变量_val
,并用所装潢的属性值给它赋值(此处的this
指向类的原型,key
为属性的名字)。
接着声清楚明了两个要领getter
和setter
,因为函数是闭包建立的,所以在个中能够接见变量_val
,在个中能够增加分外的自定义行动,这里增加了将属性值打印在控制台的操纵。
然后运用delete
操纵符将原属性从类的原型中删除,不过须要注重的是:假如属性存在不可设置的属性时,这里if(delete this[key])
会返回false。而当属性被胜利删除,要领Object.defineProperty()
将建立一个和原属性同名的属性,差别的是新的属性getter
和setter
要领,运用上面新建立的。
至此,属性装潢器的完成就完成了,运转效果以下:
var me = new Person("Remo", "Jansen");
// Set: name => Remo
me.name = "Remo H.";
// Set: name => Remo H.
name;
// Get: name Remo H.
类装潢器
类装潢器的声明标识以下:
declare type ClassDecorator = <TFunction extends Function>(target: TFunction) => TFunction | void;
能够像以下体式格局运用类装潢器:
@logClass
class Person {
public name: string;
public surname: string;
constructor(name : string, surname : string) {
this.name = name;
this.surname = surname;
}
}
和之前差别的是,经由TypeScript编译器编译为JavaScript后,挪用__decorate
函数时,与要领装潢器比拟少了后两个参数。仅传递了Person
而非Person.prototype
。
var Person = (function () {
function Person(name, surname) {
this.name = name;
this.surname = surname;
}
Person = __decorate(
[logClass],
Person
);
return Person;
})();
值得注重的是,__decorate
的返回值复写了原始的组织函数,缘由是类装潢器必需返回一个组织器函数。接下来我们就来完成上面用到的类装潢器@logClass
:
function logClass(target: any) {
// 保留对原始组织函数的援用
var original = target;
// 用来天生类实例的要领
function construct(constructor, args) {
var c : any = function () {
return constructor.apply(this, args);
}
c.prototype = constructor.prototype;
return new c();
}
// 新的组织函数
var f : any = function (...args) {
console.log("New: " + original.name);
return construct(original, args);
}
// 复制原型以便`intanceof`操纵符能够运用
f.prototype = original.prototype;
// 返回新的组织函数(会掩盖原有组织函数)
return f;
}
这里完成的组织器中,声清楚明了一个名为original
的变量,并将所装潢类的组织函数赋值给它。接着声明一个东西函数construct
,用来建立类的实例。然后定义新的组织函数f
,在个中挪用本来的组织函数并将初始化的类名打印在控制台,固然我们也能够增加一些其他自定义的行动。
原始组织函数的原型被复制给f
的原型,以确保在建立一个Person
的新实例时,instanceof
操纵符如愿以偿,详细缘由可参考鄙人另一篇文章原型与对象。
至此类装潢器的完成就完成了,能够考证下:
var me = new Person("Remo", "Jansen");
// New: Person
me instanceof Person;
// true