js-装饰器模式装饰类mixins用法举例装饰方法eg1:eg2常用库备注core-decorators

class Circle{
    draw(){
        console.log('画一个圆形')
    }
}
class Decorator{
    constructor(circle){
        this.circle = circle
    }
    draw(){
        this.circle.draw()
        this.setRedBorder(circle)
    }
    setRedBorder(circle){
        console.log("设置红色边框")
    }
}

let circle = new Circle()
circle.draw()

let dec = new Decorator(circle)
dec.draw()

装饰类

mixins用法举例

function mixins(...list){
    return function (target){
        Object.assign(target.prototype,...list)
    }
}
const Foo = {
    foo(){
        console.Log("foo")
    }
}
@mixins(Foo)
class MyClass{
}
//用法
let obj = new MyClass()
obj.foo()

装饰方法

eg1:

function readonly(target,name,descriptor){
    
    descriptor.writable = false;
    return descriptor;
}

class Person{
    constructor(){
        this.first = 'A'
        this.last = 'B'
    }
    @readonly
    name(){ return `${this.first} ${this.last}`}
}
var p = new Person()
console.log(p.name())
//p.name = function(){}重新赋值会报错

eg2

function log(target,name,descriptior){
    var oldValue = descriptor.value; //实际就是函数
    descriptor.value = function(){   //函数重新赋值
        console.log(`Calling ${name} with`,arguments);
        return oldValue.apply(this,arguments);   //执行原有逻辑
    };
    return descriptor;
}

class Math{
    @log
    add(a,b){
        return a+b;
    }
}
const math = new Math();
const result = math.add(2,4);//执行会自动打印日志
console.log('result',result)

常用库备注

core-decorators