修饰器的使用

发表于 | 更新于 | 阅读次数：

由于使用了decorator, node不用正常识别，需要使用babel转换

1
$ babel-node test.js

1. 类修饰器（只有一个参数）

target: 指向类，如果是类型是function，则指向MyFunction.prototype

1
2
3
4
5
6
function testable(target) {
  target.isTestable = false;
}

@testabel
class MyTestableClass {}

以上代码，@testable就是一个装饰器，它为MyTestableClass这个类添加了一个静态属性isTestable

1
2
3
4
5
6
7
8
9
function testable(isTestable) {
  return function(target) {
    target.isTestable = isTestable;
    target.prototype.name = 'achen';
  }
}

@testabel(false)
class MyTestabelClass {}

以上代码，告诉我们@testable何如传递参数，并且如何为类添加原型属性或者方法。

2. 方法修饰器（有三个参数）

target: 方法所在的类
name: 方法名称
descriptor: 描述对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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} with`, arguments);

    return oldValue.apply(this, arguments);
  }

  return descriptor;
}

const math = new Math();

math.add(2, 4);

为什么修饰器不能用于函数？

修饰器只能用于类和类的方法，不能用于函数，因为存在函数提升

1
2
3
4
5
6
7
8
9
var conuter = 0;

var add = function() {
  counter++;
};

@add
function foo() {
}