ES6之decorator

ES6的decorator相信大家都听说过，但是用的可能会比较少，今天就一起来看一下这个decorator是干嘛的

装饰器(decorator)是一种与类相关的语法，用来注释或修改类和类的方法

装饰器是一种函数，使用@+函数名的写法，它可以放在类和类方法的定义前面

1 类的装饰器

装饰器可以用来修饰整个类

@testable
class MyTestableClass {
  // ...
}

function testable(target) {
  target.isTestable = true;
}

MyTestableClass.isTestable // true

上面的代码中，@testable是一个装饰器，修饰了MyTestableClass这个类，testable是一个函数，具体实现是如何修饰这个类的，修饰的内容是给类增加了isTestable这个**静态属性**

装饰器的行为如下：

@decorator
class A {}

A = decorator(A) || A

也就是说，装饰器是一个对类进行处理的函数，这个函数可以传参，也可以被多层封装，外层的参数为传递的参数，最内层的参数为修饰的类对象

function testable(isTestable) {
	return function(target) {
		target.isTestable = isTestable
	}
}
@testable(true)
class MyTestClass {
}

MyTestClass.isTestable // true

装饰器是在编译阶段就会执行的
上面代码是为类添加静态属性，下面的代码则是为一个类添加实例属性

function testable(target) {
	target.prototype.isTestable = true
}
@testable
class MyTestClass {
}

let mt = new MyTestable
mt.isTestable //true

现在有一个场景，需要将一个对象的方法添加到一个类里，传统的方法，使用Object.assign

const Foo = {
	foo() {
		console.log('foo')
	}
}

class MyClass {}

Object.assign(MyClass.prototype, Foo)

现在有了装饰器，我们也可以这么写

function testable(obj) {
	return function (target) {
		Object.assign(target.prototype, obj)
	}
}

@testable(Foo)
MyClass{}

let obj = new MyClass
obj.foo() // 'foo'

2 方法的装饰

修饰一个方法例子：

class Person {
  @nonconfig
  kidCount() { return 12 }
}

function nonconfig(target, name, descriptor) {
  descriptor.configurable = false;
  return descriptor;
}

console.log(Object.getOwnPropertyDescriptor(Person.prototype, 'kidCount'))

再看下面一个例子，可以打印日志

class Math {
  @log
  add(a, b) {
    return a + b
  }
}

function log (target, name, descirptor) {
  var oldValue = descirptor.value
  descirptor.value = function() {
    console.log(`Calling ${name} with ` , arguments)
    return oldValue.apply(this, arguments)
  }
  return descirptor
}
const math = new Math
math.add(1, 2) // Calling add with  Arguments(2)

待续、、

标签：function,ES6,return,target,isTestable,testable,class,decorator
来源： https://blog.csdn.net/u013448372/article/details/113062174