一、环境配置
许多面向对象的语言都有修饰器(Decorator)函数,目前在 JavaScript 中已经有关于 decorator 的提案,但是还没有浏览器可以兼容这一语法。我们可以使用代码转换工具 babel 将我们的代码转换成ES5风格的代码。
首先我们需要安装 babel 命令行工具 babel-cli(全局安装,或者局部安装并运行npx) 以及 babel 插件 transform-decorators-legacy
npm install babel-cli -g
npm install babel-plugin-transform-decorators-legacy -D
然后通过以下命令将我们的代码转换并输出到 test.js 这个文件,这样我们就可以直接运行转换后的代码
babel --plugins transform-decorators-legacy decorator.js --out-file test.js
node test.js
如果你需要通过编程的形式使用 babel,或者是在 webpack 等自动化工具中使用 babel,则需要安装 babel-core,
并在 .babelrc 文件中进行配置。关于 babel 的配置,详见官方文档说明:babel官方文档
二、类的修饰
通过以下代码,我们简单的实现了一个添加/修改类的属性的修饰器
function changeMood(target) {
target.isHappy = true
}
@changeMood
class Person {}
console.log(Person.isHappy) // true
原本的类 Person 上面没有静态属性,通过函数 changeMood 的修饰之后,为 Person 添加了静态属性 isHappy。函数 changeMood 的第一个参数 target 就是所修饰的目标类。
如果你需要动态的去为一个类添加静态属性,我们可以采用高阶函数的形式,在外层再封装一个函数,用以接收动态传入的参数。
function changeMood(isHappy) {
return function(target) {
target.isHappy = isHappy
}
}
@changeMood(true)
class Boy {}
console.log(Boy.isHappy) // true
@changeMood(false)
class Girl {}
console.log(Girl.isHappy) // false
上述代码再原来的函数 changeMood 外面再封装了一层函数,就可以接收参数作为我们要给类的静态属性所赋的值。
以上,我们都是在为类添加或修改静态属性,如果我们我们要为类的实例添加属性呢,可以通过目标类的 prototype 对象操作。
function addAge(age) {
return function(target) {
target.prototype.age = age
}
}
@addAge(20)
class Girl {}
let Lucy = new Girl()
console.log(Lucy.age) // 20
可以看到,我们通过修饰器函数为目标类 Girl 的 prototype 添加了 age 属性。之后我们创建了一个 Girl 的实例 Lucy,则实例上面已经拥有了 age 属性。
三、 类的方法修饰
修饰器不仅可以修饰一个类,还可以修饰类里面的属性和方法。
function readonly(target, name, descriptor){
descriptor.writable = false
}
class Person {
@readonly
skills() {console.log('I can play tennis.')}
}
let John = new Person()
John.skills = function() {console.log('Skills will be changed.')}
// TypeError: Cannot assign to read only property 'skills' of object '#<Person>'
在上面的代码中,我们定义了一个 readonly 修饰器,目的是使类的一个属性变成不可修改的。
修饰器函数 readonly 一共可以接受三个参数。
修饰器的第一个参数是类的原型(尽管我们的本意是修饰类的实例,但是此时类的实例还没有生成,所以我们只能去修饰类的原型,此后实例生成,会从它的类的原型上继承属性)。
第二个参数是所要修饰的属性名,第三个参数是该属性的描述对象。
我们可以发现,修饰器的三个参数和 Object.defineProperty 的三个参数非常相似。更多关于第三个参数 descriptor 的信息,请查阅 MDN 上关于 Object.defineProperty 的说明。
通过以上代码,我们将 Person 的实例方法 skills 设置成了不可修改,所以我们之后在尝试给实例 John 的 skills 方法重新赋值时出现报错。
四、应用
在我们开发 React 项目的过程中,常常需要进行一些组件之间的通信,这时我们可能会使用 redux 状态管理器。
通常情况下,我们需要通过 redux 的 connect 方法将 state 和 action 与视图组件进行关联,那么我们一般会这么写:
class oneComponent extends react.Component {}
export defalut connect(mapStateToProps, mapDispatchToProps)(oneComponent)
在使用了修饰器函数之后,我们可以这样写
@connect(mapStateToProps, mapDispatchToProps)
class oneComponent extends react.Component {}
这样的写法,显然更加的简洁明了,让人一眼就看明白了,我们将 redux 与视图组件进行了关联。
除此之外,我们还可以通过修饰器,进行一个日志打印的应用。
在展示这个应用之前,我们先来了解一下,为什么要使用修饰器来完成日志打印这样一个功能。
首先我们了解一个概念:面向切面编程(AOP),引用百度百科的上说明:
AOP主要实现的目的是针对业务处理过程中的切面进行提取,它所面对的是处理过程中的某个步骤或阶段,以获得逻辑过程中各部分之间低耦合性的隔离效果。
举一个简单的例子:对于一个信用卡应用程序来说,存款、取款、帐单管理是它的主关注点,日志和持久化将成为横切整个对象结构的横切关注点。如果我们按照传统方式去实现日志功能,则需要在类的每一个业务逻辑的实现中添加日志记录的实现,这就使得我们的业务逻辑与日志记录实现了紧耦合。为了将业务逻辑与非业务逻辑的部分分离开来,可以使用修饰器来实现。
function log(target, name, descriptor) {
let method = descriptor.value;
descriptor.value = function (...args){
console.log(`"${name}" has been invoked with "${args}"`)
return method(...args)
}
}
class Calculator {
@log
power(base, exponent) {
return base ** exponent
}
}
let cal = new Calculator()
cal.power(3,4) // "power" has been invoked with "3,4"
通过修饰器函数 log,我们在 power 方法中添加了打印日志的功能,我们通过给 descriptor 的 value 属性添加了一句console.log,然后将原来的方法执行结果返回出来,实现了原方法得以执行,并打印出了执行的日志。当我们需要给其他方法添加打印日志功能时,也同样可以使用该修饰器来实现。
关于修饰器的内容,还有很多很多,比如一些第三方的修饰器库,如 core-decorators.js,都是别人已经封装好的修饰器,我们可以安装引入,然后直接进行使用。
更多关于JavaScript decorator 的内容,可以查阅 阮一峰的ES6入门 。