写在前面，因为function存在变量提升，所以修饰器是只能修饰类，而不能修饰函数
- 修饰器是一个函数,用来修改类的行为或属性
function testable(target) {
target.isTestable = true;
//也可以修改类的原型，
target.prototype.isTestable = true
}
@testable
class MyTestableClass {}
// 上面的这一句等同于 MyTestableClass = testable(MyTestableClass)
console.log(MyTestableClass.isTestable) // true
翻译过来，其实它是这样的
@decorator
class A {}
// 等同于
class A {}
A = decorator(A) || A;
所以可以看出修饰器其实就是一些函数，用来修改类的行为（原型，静态属性...都可以），只不过这些行为可能有公共性，所以就写一个方法去改变，然后取了一个装逼的名字叫修饰器
- 既然修饰器是一个函数，那么参数肯定少不了
function testable(isTestable) {
return function(target) {
target.isTestable = isTestable;
}
}
@testable(true)
class MyTestableClass {}
MyTestableClass.isTestable // true
@testable(false)
class MyClass {}
MyClass.isTestable // false
有点绕啊... 慢慢来
testable(true)
//相当于返回一个函数，我们用个变量接收一下
let resultFunc = testable(true)
//就相当于
let resultFunc = function(target){
target.isTestable = true
}
//现在继续修饰
@resultFunc
class MyTestableClass{}
//等同于原来的
@testable(true)
class MyTestableClass{}
// 是不是OK了，要是需要多个参数，那就再最外面的函数中多传就行
再来看一个列子，巩固一下
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() // 'foo'
- 修饰类的属性
class Person {
@readonly
name() { return `${this.first} ${this.last}` }
}
function readonly(target, name, descriptor){
// descriptor对象原来的值如下
// {
// value: specifiedFunction,
// enumerable: false,
// configurable: true,
// writable: true
// };
descriptor.writable = false;
return descriptor;
}
readonly(Person.prototype, 'name', descriptor);
// 类似于
Object.defineProperty(Person.prototype, 'name', descriptor);
很难理解是吗，通过控制台输出，我们发现target其实是当前类(因为现在是在类里面使用)的原型，name就是下面的属性名，descriptor就是这个属性的描述，修饰器修改的其实就是这个描述，不知道描述是什么..请自行查阅资料,再来看一个例子
class Math {
@log
add(a, b) {
return a + b;
}
}
function log(target, name, descriptor) {
var oldValue = descriptor.value;
// 打印出来发现，oldValue其实就是function add(){}
descriptor.value = function() {
console.log(`Calling "${name}" with`, arguments);
return oldValue.apply(null, arguments);
};
return descriptor;
}
const math = new Math();
// passed parameters should get logged now
math.add(2, 4);
- 若是同一个方法有多个修饰器，会从外向内进入，然后由内向外执行(简单理解就是把内部执行的结果当做参数传向外面的)
function dec(id){
console.log('evaluated', id);
return (target, property, descriptor) => console.log('executed', id);
}
class Example {
@dec(1)
@dec(2)
method(){}
}
// evaluated 1
// evaluated 2
// executed 2
// executed 1
- babel的支持性，需要安装babel-plugin-transform-decorators插件，然后配置.babelrc,
npm install babel-core babel-plugin-transform-decorators
// .babelrc
{
"plugins": ["transform-decorators"]
}
- 第三方模块core-decorators.js
参看自阮一峰ECMAScript 6 入门
