- 类的修饰
许多面向对象的语言都有修饰器(Decorator)函数,用来修改类的行为。
@testable
class MyTestableClass {
// ...
}
function testable(target) {
target.isTestable = true;
}
MyTestableClass.isTestable // true
上面代码中,@testable就是一个修饰器。它修改了MyTestableClass这个类的行为,为它加上了静态属性isTestable。testable函数的参数target是MyTestableClass类本身。
修饰器是一个对类进行处理的函数。修饰器函数的第一个参数,就是所要修饰的目标类。如果觉得一个参数不够用,可以在修饰器外面再封装一层函数。
//testable函数的参数target,就是会被修饰的类。
function testable(target) {
// ...
}
//多个参数
function testable(isTestable) {
return function(target) {
target.isTestable = isTestable;
}
}
@testable(true)
class MyTestableClass {}
MyTestableClass.isTestable // true
@testable(false)
class MyClass {}
MyClass.isTestable // false
修饰器testable可以接受参数,这就等于可以修改修饰器的行为。
注意,修饰器对类的行为的改变,是代码编译时发生的,而不是在运行时。这意味着,修饰器能在编译阶段运行代码。也就是说,修饰器本质就是编译时执行的函数。
可以通过目标类的prototype对象操作添加实例属性。(上面的例子是静态属性)
function testable(target) {
target.prototype.isTestable = true;
}
@testable
class MyTestableClass {}
let obj = new MyTestableClass();
obj.isTestable // true
上面代码中,修饰器函数testable是在目标类的prototype对象上添加属性,因此就可以在实例上调用。
React 与 Redux 库结合使用时,常常需要写成下面这样。
class MyReactComponent extends React.Component {}
export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);
有了装饰器,就可以改写上面的代码。
@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {}
- 方法的修饰
修饰器函数readonly一共可以接受三个参数。
第一个参数是类的原型对象,上例是Person.prototype,修饰器的本意是要“修饰”类的实例,但是这个时候实例还没生成,所以只能去修饰原型(这不同于类的修饰,那种情况时target参数指的是类本身);
第二个参数是所要修饰的属性名;
第三个参数是该属性的描述对象。
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);
//修饰器(readonly)会修改属性的描述对象(descriptor),然后被修改的描述对象再用来定义属性。
@log修饰器,可以起到输出日志的作用
@log修饰器的作用就是在执行原始的操作之前,执行一次console.log,从而达到输出日志的目的。
修饰器有注释的作用。
如果同一个方法有多个修饰器,会像剥洋葱一样,先从外到内进入,然后由内向外执行。
修饰器还能用来类型检查。所以,对于类来说,这项功能相当有用。从长期来看,它将是 JavaScript 代码静态分析的重要工具。
- 修饰器不能用去函数
修饰器只能用于类和类的方法,不能用于函数,因为存在函数提升。由于存在函数提升,使得修饰器不能用于函数。类是不会提升的,所以就没有这方面的问题。
另一方面,如果一定要修饰函数,可以采用高阶函数的形式直接执行。
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;
}
}
const wrapped = loggingDecorator(doSomething);
- core-decorators.js
core-decorators.js是一个第三方模块,提供了几个常见的修饰器,通过它可以更好地理解修饰器。
(1)@autobind
autobind修饰器使得方法中的this对象,绑定原始对象。
(2)@readonly
readonly修饰器使得属性或方法不可写。
(3)@override
override修饰器检查子类的方法,是否正确覆盖了父类的同名方法,如果不正确会报错。
(4)@deprecate (别名@deprecated)
deprecate或deprecated修饰器在控制台显示一条警告,表示该方法将废除。
(5)@suppressWarnings
suppressWarnings修饰器抑制deprecated修饰器导致的console.warn()调用。但是,异步代码发出的调用除外。
- 修饰器实现自动发布事件
我们可以使用修饰器,使得对象的方法被调用时,自动发出一个事件。
只要调用someMethod或者anotherMethod,就会自动发出一个事件。
// index.js
import publish from './publish';
class FooComponent {
@publish('foo.some.message', 'component')
someMethod() {
return { my: 'data' };
}
@publish('foo.some.other')
anotherMethod() {
// ...
}
}
let foo = new FooComponent();
foo.someMethod();
foo.anotherMethod();
以后,只要调用someMethod或者anotherMethod,就会自动发出一个事件。
$ bash-node index.js
频道: component
事件: foo.some.message
数据: { my: 'data' }
频道: /
事件: foo.some.other
数据: undefined
- Mixin
在修饰器的基础上,可以实现Mixin模式。所谓Mixin模式,就是对象继承的一种替代方案,中文译为“混入”(mix in),意为在一个对象之中混入另外一个对象的方法。
如果需要“混入”多个方法,就生成多个混入类。
class MyClass extends Mixin1(Mixin2(MyBaseClass)) {
/* ... */
}
这种写法的一个好处,是可以调用super,因此可以避免在“混入”过程中覆盖父类的同名方法。
- Trait
Trait 也是一种修饰器,效果与 Mixin 类似,但是提供更多功能,比如防止同名方法的冲突、排除混入某些方法、为混入的方法起别名等等。
Trait 不允许“混入”同名方法。
alias和excludes方法,可以结合起来使用。
@traits(TExample::excludes('foo','bar')::alias({baz:'exampleBaz'}))
class MyClass {}
上面代码排除了TExample的foo方法和bar方法,为baz方法起了别名exampleBaz。
as方法则为上面的代码提供了另一种写法。
@traits(TExample::as({excludes:['foo', 'bar'], alias: {baz: 'exampleBaz'}}))
class MyClass {}
- Babel转码器的支持
Babel 转码器已经支持 Decorator。
首先,安装babel-core和babel-plugin-transform-decorators。由于后者包括在babel-preset-stage-0之中,所以改为安装babel-preset-stage-0亦可。
然后,设置配置文件.babelrc。
//首先,安装babel-core和babel-plugin-transform-decorators
$ npm install babel-core babel-plugin-transform-decorators
//然后,设置配置文件.babelrc
{
"plugins": ["transform-decorators"]
}
//这时,Babel 就可以对 Decorator 转码了。
//脚本中打开的命令如下。
babel.transform("code", {plugins: ["transform-decorators"]})