前端装饰器ES decorator，从原理到入门

装饰器

添加静态属性(修饰类本身)

function testDecorator(desc) {
    return function (target) {
        target.addParam = desc
    }
}
// 调用 testDecorator 函数之后，其又返回一个作用于描述符的匿名函数，利用闭包的特性使用了 decs 变量
@testDecorator("operate  one")
class ClassA {}
console.log(ClassA) // class ClassA {}
console.log(ClassA.addParam) // operate  one

@testDecorator("operate  two")
class ClassB {}
console.log(ClassB.addParam) // operate  two

添加实例属性(通过 prototype 对象操作)

function testable(target) {
    target.prototype.isTestable = true;
}

@testable
class MyTestableClass {}

let obj = new MyTestableClass();

console.log(obj.isTestable) // true

通过 mixins 装饰器给类添加上新属性

function mixins(...mixin) {
    return function (target) {
        Object.assign(target.prototype, ...mixin)
    }
}

let Foo = {
    foo: () => {
        console.log('foo')
    }
}

Foo.foo()

@mixins(Foo)

let C = new ClassC()
C.foo()
// ClassC {}  ClassC 本身是没有 foo 属性的，因为添加的是实例属性
console.log(C)

实际的 React 项目开发中，常常需要写成下面这样

class MyReactComponent extends React.Component {}
export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent)

使用装饰器后，可以简化代码

@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component

修饰类的属性/方法

接收三个参数，类的原型对象 要修饰的属性名 属性的描述对象

function readonly(target, name, descriptor) {
    console.log('name', name)
    descriptor.writable = false
    return descriptor
}
class Person {
    @readonly
    username() {
        console.log('is readonly')
    }
}
let person = new Person()
console.log(person)
person.username() // name /n is readonly

另外一个例子

class Math {
    @log
    add(a, b) {
        return a + b
    }
}

function log(target, name, descriptor) {
    var oldValue = descriptor.value
    console.log(oldValue)
    console.log(name, descriptor)
    descriptor.value = function() {
        console.log(name)
        console.log(`Calling ${name} with`, arguments)
        return oldValue.apply(this, arguments)
    }
    return descriptor
}

const math = new Math()
math.add(2, 4)

// 原本是
function add(a, b) {
    return a + b
}

// 变成
function anonymousFunction() {
    console.log(`Calling with`, arguments)
    return add.apply(this, arguments)
}

使用 Decorator 写法的 react 组件

@Component({
    tag: 'my-component',
    styleUrl: 'my-component.scss'
})

export class MyComponent {
    @Prop() first: String
    @Prop() last: String
    @State() isVisible: Boolean = true
    render() {
        return {
            
Hello, my name is {this.first} {this.last}
        }
    }
}

注释功能

function dec(id) {
    console.log('evaluated', id)
    return (target, property, descriptor) => console.log('executed', id)
}

class Example {
    @dec(1)
    @dec(2)
    method() {
        console.log('method')
    }
}

let example = new Example()
example.method()

类型检查

不能将装饰器用于函数，装饰器只能用于类和类方法，不能用于函数，因为存在函数提升，编译时会报错

var counter = 0
var add = function() {
    counter++
}

@add
function foo() {
    console.log('xxxx')
}

foo()

如果一定要修饰函数,可以采用高阶函数的形式直接执行

function doSomething(name) {
    console.log('hello', name)
}

function loggingDecorator(wrapped) {
    return function() {
        console.log('Starting')
        const result = wrapped.apply(this, arguments)
        console.log('Finished')
        return result
    }
}

loggingDecorator(doSomething)('hawtim') // Starting \n hello hawtim \n Finished