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++;}