ES6_修饰器
2018-12-28 本文已影响19人
lmmy123
修饰器@
只能用于类 和 类的方法
类的修饰器
@testable
class MyTest {
}
// target 指向修饰的类
function testable(target) {
target.isTestable = true
}
MyTest.isTestable // true
@decorator
class A {}
//等同于
class A {}
A = decorator(A) || A
修饰器对类的行为的改变,是代码编译时发生的,而不是在运行时
// mixins.js 可以返回一个函数
export function mixins(...list) {
return function(target) {
Object.assign( target.prototype, ...list )
}
}
// main.js
import { mixins } from './mixins.js'
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}` }
}
readonly 修饰类的 name 方法
// 接收三个参数
// target 修饰的目标对象,即是类的实例
// name 修饰的属性名
// descriptor 该属性的描述对象
function readonly( target, name, descriptor ) {
// descriptor对象原来的值: {
// value: ...;enumerable: false,configurable: true, writable: true
//}
descriptor.writable = false
return descriptor
}
readonly( Person.prototype, 'name', descriptor )
//类似与
Object.defineProperty( Person.prototype, 'name', descriptor )
// log 打印日志
class Math {
@log
add(a,b) {
return a + b
}
}
function log( target, name, descriptor ) {
var oldValue = descriptor.value
descriptor.value = function () {
console.log(`calling "${name}" width`, arguments)
return oldValue.apply(null, arguments)
}
return descriptor
}
const math = new Math()
math.add( 2, 3 )
Mixin 混入
- Object.assgin()
export function mixins(...list) {
retrun function ( target ) {
Object.assign( target.prototype, ...list )
}
}
会改写 类的prototype 对象
- 类的继承 实现一个中间类
let Mixin = ( superClass ) => class extends superClass {
foo(){
...
}
}