TypeScript：方法装饰器

在讲方法装饰器之前，我们先来回顾下面向对象，在类里边，有实例方法也有静态方法，那什么是实例方法，什么又是静态方法，所谓实例方法，就是说这个方法属于实例化后的对象，静态方法是属于类，它不会因为实例化而归属于某个对象：

class Car {
  static run() {
    console.log("static run");
  }
  run() {
    console.log("instantiation run");
  }
}
Car.run(); // 静态方法，打印出 static run
const c = new Car();
c.run(); // 实例方法，打印出 instantiation run

target 参数

我们知道 TypeScript 类的装饰器可以接收一个参数，该参数为构造函数，而方法的装饰器要接收三个参数：

// 方法装饰器
function addDecorator(
  target: any,
  key: string,
  descriptor: PropertyDescriptor
) {
  console.log(target);
}
class Car {
  @addDecorator
  run() {
    console.log("run");
  }
}

方法装饰器表达式会在运行时当作函数被调用，当前装饰器作用于实例方法，运行代码会打印出：

此时，我们发现打印target出来的是对应的是Car类的 prototype 原型对象，那我们把装饰器装饰的方法改为静态方法：

// 方法装饰器
function addDecorator(
  target: any,
  key: string,
  descriptor: PropertyDescriptor
) {
  console.log(target);
}
class Car {
  @addDecorator
  static run() {
    console.log("run");
  }
}

此时代码运行的结果为：

此时，我们发现打印 target 出来的是对应的是Car的构造函数，那么方法装饰器装饰在静态方法上，传入的target是类的构造函数，装饰在实例方法上，传入的target是类的原型对象

key 参数

再来看下第二个参数 key，我们把它打印出来看看它是什么：

// 方法装饰器
function addDecorator(
  target: any,
  key: string,
  descriptor: PropertyDescriptor
) {
  console.log(key);
}
class Car {
  @addDecorator
  run() {
    console.log("run");
  }
  @addDecorator
  go() {}
}

运行结果为：

那么，第二个参数key传进来的就是装饰的方法的名字

descriptor 参数

那 descriptor 是一个 PropertyDescriptor 的内置类型，那其实 PropertyDescriptor 对应着 JavaScript 的 Object.defineProperty() 的第三个参数 descrideptor，通过 IDE 的功能可以发现它有以下属性，完全对应上，descrideptor 就是控制函数的属性

既然 descrideptor 能够控制函数的属性，那么我们来尝试下修改下被装饰的函数的属性

// 方法装饰器
function addDecorator(
  target: any,
  key: string,
  descriptor: PropertyDescriptor
) {
  descriptor.value = () => {
    console.log("replace");
  };
}
class Car {
  @addDecorator
  run() {
    console.log("run");
  }
}
const c = new Car();
c.run();

value 是指被装饰的函数，这里我们重写被装饰的函数，程序运行的结果将会是我们重写后函数的值

除了在装饰器里边修改函数，我们也可以在函数外部修改函数，如：

// 方法装饰器
function addDecorator(
  target: any,
  key: string,
  descriptor: PropertyDescriptor
) {}
class Car {
  @addDecorator
  run() {
    console.log("run");
  }
}
const c = new Car();
c.run = () => {
  console.log("replace");
};
c.run();

对于在外部覆盖原有的函数，有时候我们不希望它发生，特别是在一些底层细节上，我们希望严格一些，外面用的人它不能随意修改内部的东西，那么我们可以使用 writable :

// 方法装饰器
function addDecorator(
  target: any,
  key: string,
  descriptor: PropertyDescriptor
) {
  descriptor.writable = false; // 设置禁止修改
}
class Car {
  @addDecorator
  run() {
    console.log("run");
  }
}
const c = new Car();
c.run = () => {
  console.log("replace");
};
c.run();

writable 就是设置函数的属性是否可写，这里我们设置为 false。 有了 descriptor.writable = false 这一行代码，我们就能有效的保护函数不被外部修改，当运行上面的代码后，会报错，并给我们明确的提示：