@decortor 裝飾器
裝飾器的本質(zhì)還是一種函數(shù)
修飾私有屬性
class Fun {
constructor(){
this.keyValue = ''
}
@name
myName = 'ccc';
}
function name(proto, key, descriptor){
console.log(proto, key, descriptor)
// console.log(原型, 屬性, descriptor)
// descriptor 和之前說的 Object.defineproperty 一樣是描述符
// 四個屬性
configurable // 配置
enumerable // 枚舉
writable // 寫入
// 前面三個不做介紹
initializer // 屬性值
console.log(descriptor.initializer) // 輸出 "ccc"
// 修改 initializer
descriptor.initializer = function(){
return "xxx"
}
}
var fun = new Fun() // 不 new 修飾器里面的方法都可以執(zhí)行
console.log(fun.myName) // 輸出 "xxx"
修飾原型上的屬性
class Fun {
constructor(){
this.keyValue = ''
}
@myCount
getCount(){
console.log('發(fā)送請求')
}
@myBox
box=()=>{
console.log('發(fā)送請求')
}
}
function myCount(proto, key, descriptor) {
console.log(proto, key, descriptor)
// console.log(原型, 屬性, descriptor)
// descriptor 和之前說的 Object.defineproperty 一樣是描述符
// 四個屬性
configurable // 配置
enumerable // 枚舉
writable // 寫入
// 前面三個不做介紹
value // 方法體
console.log(descriptor.value) // 就是 getCount() 這個方法體
// 修改 value
descriptor.value = function(){
console.log("666");
console.log(this); // 輸出的是 fun
}
}
function box (){
// 箭頭函數(shù)的時候
console.log(proto, key, descriptor)
// console.log(原型, 屬性, descriptor)
// descriptor 和之前說的 Object.defineproperty 一樣是描述符
// 四個屬性
configurable // 配置
enumerable // 枚舉
writable // 寫入
// 前面三個不做介紹
// 還是 initializer
initializer // 屬性值
}
var fun = new Fun()
console.log(fun.getCount()) // 輸出 666
上面的代碼中在裝飾原型上面的方法的時候 initializer 會變成 value，會指向被裝飾的方法體班眯，可以通過去 descriptor.value=fun(){} 的方式去修改。
裝飾類
@boxs
class box {
constructor (){
console.log("我是constructor")
}
}
function boxs (target) {
target.name = "ccc" // 可以這樣子直接加屬性
}
