ES6基本的语法(九) @decortor 装饰器

@decortor 装饰器

装饰器的本质还是一种函数

修饰私有属性

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 修饰器里面的方法都可以执行

console.log(fun.myName) // 输出 "xxx"

修饰原型上的属性

class Fun {
    constructor(){
        this.keyValue = ''
    }
    @myCount
    getCount(){
        console.log('发送请求')
    }

    @myBox
    box=()=>{
        console.log('发送请求')
    }
}

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 (){
    // 箭头函数的时候 
    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" // 可以这样子直接加属性
}