裝飾器原理與繼承的區別

继承概念#

先舉例子說明繼承的概念：
假設張三想買車，他的父親有輛奔馳，那麼他爸把車送他，這叫繼承。

裝飾器的概念#

假設張三有奔馳了，但是想換個輪毂，想換個方向盤，通過他兄弟的補助，換了套新的套件。

小結#

因此繼承屬於父子集關係，父可限定私有屬性，以及 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)
}
}