ES7 装饰器理解 (转载)
还有一篇:https://www.jianshu.com/p/2c2fb890f01c
decorator(装饰器)是ES7里面的一个语法糖,作用于类、类属性\方法,为它们提供一个实现与业务逻辑无关的功能的接口。
decorator为自定义函数
参数:target、key、description
返回值:newDescription/newTarget
修饰类
参数target为类够构造函数,参数key、description为undefined
若无返回值,则装饰后的类构造函数依旧为target
若返回一个类构造函数,则以此作为构造函数
若返回其他的值,则报错
const decorator = (target, key, description) => {
console.log(target, key, description);
}
@decorator
class MyClass {
_testNumber = 0;
};
const instance1 = new MyClass();
console.log(instance1 instanceof MyClass);
/* 输出结果
*
* ƒ MyClass() {
* _classCallCheck(this, MyClass);
*
* this._testNumber = 0;
* } undefined undefined
*
* true
*
*/
根据上面的例子可以看出,当装饰器作用于类的时候,参数key、description都是undefined;instance1是MyClass的实例。现在,让装饰器返回另外一个类看看结果如何:
class TestClass {
test = 666;
}
const decorator = (target, key, description) => {
return TestClass;
}
@decorator
class MyClass {
_testNumber = 0;
};
const instance1 = new MyClass();
console.log(instance1.test);
console.log(instance1._testNumber);
console.log(instance1 instanceof MyClass);
console.log(instance1 instanceof TestClass);
console.log(MyClass === TestClass);
/* 输出结果
*
* 666
* undefined
* true
* true
* true
*
*/
可以看出,装饰器返回一个新的类TestClass,并且创建的实例是TestClass的实例,而MyClass完全等于TestClass。
当然,我们可以在装饰器里面给target添加一些方法或者属性,返回target(或者不返回任何值),达到增强类构造函数的目的。
修饰类属性(或访问器)
参数target为类的原型对象
参数key为属性名
参数description为该属性的描述符
若无返回值,则该属性是构造函数实例的属性
若返回一个描述符对象newDescription,则该属性与为构造函数原型的属性,为所有实例共享,其描述符为newDescription ;若newDescription不是一个完整的描述符对象,则缺少的配置属性会设置为默认值,多余的属性会被忽略掉
若返回除对象外的其他值,报错
const decorator = (target, key, description) => {
console.log(target, key, description);
}
class MyClass {
@decorator
_testNumber = 0;
};
const instance1 = new MyClass();
console.log(instance1._testNumber);
console.log(Object.getOwnPropertyDescriptor(instance1, 'getTestNumber'));
/* 输出结果
*
* {constructor: ƒ}constructor: ƒ MyClass()__proto__: Object "_testNumber" {enumerable: true, initializer: ƒ, configurable: false, writable: true}
* 0
* {value: 0, writable: true, enumerable: true, configurable: false}
*
*/
当装饰器作用于类属性时,target是MyCLass的原型,参数key是属性名“_testNumber”,没有返回值时,_testNumber依旧是instance的属性,它的描述符也没有改变。下面看看返回描述符的情况:
const decorator = (target, key, description) => {
return {
value: 2,
writable: true,
configuable: true,
enumerable: true
};
}
class MyClass {
@decorator
_testNumber = 0;
};
const instance1 = new MyClass();
console.log(instance1._testNumber);
console.log(Object.getOwnPropertyDescriptor(instance1, '_testNumber'));
console.log(Object.getOwnPropertyDescriptor(instance1.__proto__, '_testNumber'));
/* 输出结果
*
* 2
* undefined
* {value: 2, writable: true, enumerable: true, configurable: false}
*
*/
当返回新的描述符时,_testNumber就不再是instance1的属性,而是MyClass原型的属性
修饰类方法
参数target为类的原型对象
参数key为属性名
参数description为该属性的配置属性
若无返回值,则该属性是构造函数原型的属性,为所有实例共享
若返回一个描述符对象newDescription,则该属性与为构造函数原型的属性,为所有实例共享,其描述符为newDescription
若返回除对象外的其他值,报错
修饰符修饰方法时与修饰属性差不多,这里将不再举例子
---------------------
作者:paper_crane
来源:CSDN
原文:https://blog.csdn.net/zhangwx6/article/details/82261038
版权声明:本文为博主原创文章,转载请附上博文链接!