修饰器

153 阅读1分钟

es6的新增概念,其实就是一个@符号,符号后面跟一个函数名,相当于把修饰器下面的类通过一个函数修饰了一下,从而使得这个类拥有新的属性和方法。

类的修饰

1. 在类的原型上添加属性

function addSum(hasNum) {    return function(target) {        if (hasNum) {            A.prototype.sum = '原型上有sum'        }    }   }// @addSum(false)// @addSum(true)class A {}var a = new A();console.log('a.sum', a.sum)

2. 为类添加方法

function addSum(...list) {    return function(target) {        Object.assign(target, ...list)    }}const foo = {    eat() {        console.log('eat')    }}@addSum(foo)class A {}console.log('a.eat', A.eat)

类的方法的修饰

function readonly(target, name, descriptor) {    descriptor.writable =  false;    return descriptor;}class Person {    @readonly    name() {        return 'zz';    }}readonly(Person.prototype, 'name', descriptor)new Person().name = '修改了name' // 报错

为什么修饰器不能修饰函数

var count = 0;function addCount() {    count++}@addCountfunction () {  console.log(count)}
报错

因为会存在函数提升,实际的过程

var count;var addCount;@addCountcount = 0 ;addCount = function(){   count++;}