装饰器原理与继承的区别

继承概念#

先举例子说明继承的概念：
假设张三想买车，他的父亲有辆奔驰，那么他爸把车送他，这叫继承。

装饰器的概念#

假设张三有奔驰了，但是想换个轮毂，想换个方向盘，通过他兄弟的贴补，换了套新的套件。

小结#

因此继承属于父子集关系，父可限定私有属性，以及 protected 保护禁止子类修改覆盖。而装饰器可以对子类进行装饰，装饰属性、方法、甚至整个类，就像个女孩子化妆一样。

装饰器原理#

装饰器属于一个实验性特性，本质就是 Function、class，
因此，各个项目想使用装饰器，必须在 ts.config 开启 experimental 选项。

function decartor(target:object){

}
@decartor
class ex{

}

类装饰器#

//点击classDecorator发现需要传递一个target
//这个tartget就是需要传递的构造函数exampe
const OperationDecorate:classDecorator=
(target:Function)=>{
 console.log(target)  //[Function:example]
target.prototype.addOne=function(){
  console.log("这是装饰器新增方法哦")
}
target.prototype.name="oru private"
}
@OperationDecorate
class example{
public addone(){

}
private name

}
const t1=new example()
console.log(t1.name)
t1.addone()

小结#

装饰器通过拿取类对构造函数，在原型链上添加各个属性、方法，实例化后通过原型链攀升即可拿到属性。

**！！** 装饰器只是一个语法糖用于作用实例化时的对象。

@Operation===Operation(example)

装饰器叠加#

const OperationDecorate:classDecorator=
(target:Function)=>{
 console.log(target)  //[Function:example]
target.prototype.addOne=function(){
  console.log("这是装饰器新增方法哦")
}
target.prototype.name="oru private"
}

const musicDecorator:classDecorator=
(target: Function):void=>{
   console.log("play music")
}
@musicDecorator
@OperationDecorate
class example{

}

现在假设有个场景，用户触发特定条件会广播消息，比如登陆成功提示成功消息，付款成功提示付款消息，实现如下：

const messageDecorator:classDecorator=
(target:Function)=>{
  target.prototype.message=  
  (content:string)=>{
       log(content+"成功")
}
}
@messageDecortor
class example{
 private message:void
 payLoad(){
 this.message("支付") //法一
 }

}
new example().message("支付") //法二

小结：#

由此可见，作用与实例化时调用原型方法也可以在各个方法中指向该原型方法🤓。

装饰器工厂#

即为装饰器的高阶函数

const messageDecorator:classDecorator=
(id)=>{
return (target:Function)=>{
  target.prototype.message="6"
  target.protptype.addone=()=>{
  fetch(`/some/${id}`).then(res=>log(res))
}
}
}

方法装饰器#

作用：装饰类中方法

const applyMethods:MethodDecorator=(...args:any[])
=>{
  console.log(args)
  //[{create:Function},
   'create',
   {value:Function() writeable:boolean,eumerabe:boolean
}]
 let method = args[2].value
 method=()=>{
  console.log(2)
}
 method()
}

class example{
@applyMethods()
public create(){
 console.log(1)
}
}