1.安装编译Decorator所需要的依赖项
2.npx babel 当前需要编译文件 -o 编译后的文件
浏览器无法识别es7的语言,需要通过babel工具辅助编译,业务需求使用编译后的文件
3.Decorator代码实例演示如下代码
class Decoration {
constructor() {
this.keyValue = "";
}
@statement //装饰器命名
url = "aaa"; //被装饰的属性
agent() {
console.log(this.url + "----------" + this.keyValue);
}
}
function statement(proto, key, descriptor) {
console.log(proto, key, descriptor);
descriptor.writable = false; //被装饰属性不可写
}
var os = new Decoration();
- 私有属性 console.log(proto,key,descriptor) 结果如下所示
![](https://i-blog.csdnimg.cn/blog_migrate/223450570a99090f233801a2412e70ae.png)
4.装饰私有 属性修改值
function statement(proto, key, descriptor) {
descriptor.writable = false
console.log( descriptor.initializer() ) //被装饰的属性值;装饰私有属性特有的一个属性
descriptor.initializer = function() {
return 'url的值被修改了'
}
}
5.装饰原型属性
class Decoration {
constructor() {
this.keyValue = "";
}
@pro //装饰原型属性
agent() {
console.log(this.url + "----------" + this.keyValue);
}
}
function pro(proto, key, descriptor){
console.log(proto, key, descriptor)//打印结果如下图;
let oldValue = descriptor.value //被装饰的函数
descriptor.value = function(){
console.log('被装饰的函数重写')
}
}
var os = new Decoration();
os.agent()
- 原型属性 console.log(proto, key, descriptor) 打印结果如下图
![](https://i-blog.csdnimg.cn/blog_migrate/deccb8591be8e5b0c518dbcfb526a45b.png)
- 装饰原型属性 descriptor 对象上多了value属性,没有initializer属性
- 个人理解是区别装饰私有属性和原型属性的区别特性之一
- 装饰箭头函数时,会被认为是在装饰私有属性,这点要多加留意,稍不慎就掉坑
6.装饰器代理思想模拟
class Decoration {
constructor() {
this.keyValue = "";
}
@pro //装饰原型属性
agent() {
console.log(this.url + "----------" + this.keyValue);
return '返回值+520'
}
}
function pro(proto, key, descriptor){
console.log(proto, key, descriptor)
let oldValue = descriptor.value //被装饰的函数
descriptor.value = function(){
var urlB = 'bbb'
console.log(urlB + '---------' + this.keyValue)
return oldValue.apply(this,arguments) // 不要忘记return;不然返回值是undefind
}
}
var os = new Decoration();
var result = os.agent()
console.lo(result)//打印结果是 '返回值+520'
7.类函数装饰器
@skin
class Decoration {
constructor() {
this.keyValue = "";
}
}
function skin(traget){
traget.age = '18' //添加一个属性age并赋值18
}
8.装饰器最后总结
在原有的基础函数上,不扰乱原先的代码,拓展一些额外的功能函数,从而达到装饰的作用!!!