装饰器 decorator

decorator让你的页面更加华丽

decorator是什么

是es7的一个新语法，使用它之前需要使用 babel 模块 transform-decorators-legacy 编译成 ES5 或 ES6。
专业的讲，是一个表达式，用于修改类的行为；通俗的讲，好比你的手机，给他添加了一个外壳，但并不影响他通话和充电的功能，却能使他更加华丽；这就是装饰器。
简单的来说，S 的装饰器可以用来“装饰”三种类型的对象：类的属性/方法、访问器、类本身（访问器？？？）

作用于类的装饰

@logClass('CouponAgre执行')
class CouponAgre extends Component{
}
function logClass(log) {
    return function (target) {
    	console.log(log)
        return target
    }
}

作用于类方法的装饰器

class CouponBtn extends Component{
 	@logErr
    componentDidMount() {
    }
    //@logErr
    render(){
	    return (
	    	<div>test</div>
	    )
    }
}
function logErr(log) {
    console.log(name.target);
    return function decorator(target, name, descriptor) {
        const original = descriptor.value;
        if (typeof original === 'function') {
            descriptor.value = function(...args) {
                try {
                    return original.apply(this, args);
                } catch (e) {
                    console.log(log.type,e);
                }
            }
        }
        return descriptor;
    };
}

稍稍高级点的写法

class CouponBtn extends Component{
 	@logErr
    componentDidMount() {
    }
    //@logErr
    render(){
	    return (
	    	<div>test</div>
	    )
    }
}
function logErr(log) {
    return function decorator(t, n, descriptor) {
        const original = descriptor.value;
        return {
         	//enumerable:false 
            ...descriptor,
            value(...args){
                        try {
                            return original.apply(this, args);
                        } catch (e) {
                            console.log(e);
                             //sendError({'l': '1', 'd': `用户接口异catch常跳错误页了`, 'f': 'action,getUserInfo','e':e});
                            sendError(json)
                        }
            }
        }

        return descriptor;
    };
}

相关知识：Object.defineProperty
一般通过为对象的属性赋值的情况下，对象的属性可以修改也可以删除，但是通过Object.defineProperty()定义属性，通过描述符的设置可以进行更精准的控制对象属性。

• 一般情况下定义对象的属性

let person = {}
person.name11='jack
console.log(person);

• 通过Object.defineProperty()定义对象属性

let person = {}
Object.defineProperty(person, 'name11', {
    value: 'jack',
    writable: true // 是否可以改变
})
console.log(person);

注意，如果描述符中的某些属性被省略，会使用以下默认规则：