Typescript-ts 装饰器源码分析——方法装饰器

Typescript-ts 装饰器源码分析——方法装饰器

方法装饰器声明在一个方法的声明之前（紧靠着方法声明）。 它会被应用到方法的 属性描述符上，可以用来监视，修改或者替换方法定义。 方法装饰器不能用在声明文件( .d.ts)，重载或者任何外部上下文（比如declare的类）中。

方法装饰器表达式会在运行时当作函数被调用，传入下列3个参数：

1. 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
2. 成员的名字。
3. 成员的属性描述符。

思考一个问题，装饰器是在什么时候被传递进参数的？
为了解决这个疑问，我分两个方面去看，第一个是单个方法装饰器的情况，第二个是多个方法装饰器的情况，其实在了解了单个装饰器的情况之后，多个装饰器的情况就迎刃而解了

在开始之前，我们需要了解ts是如何定义类的，也就是它的面具之下的js是怎么样的

Ts的类

为了方便解释，先写一个简单的类，就叫它Person吧

"use strict";
var Person = /** @class */ (function () {
   
    function Person() {
   
    }
    Person.prototype.sayHello = function () {
   
        console.log("hello");
    };
    return Person;
}());

经过ts编译后的代码:

"use strict";
var Person = /** @class */ (function () {
   
    function Person() {
   
    }
    Person.prototype.sayHello = function () {
   
        console.log("hello");
    };
    return Person;
}());

很明了了吧，其实ts类的本质就是一个立即执行函数，然后在内部声明了一个Person函数，给原型添加方法，最后把它导出来

废话不多说了，来看一下装饰器吧！

单个装饰器

装饰器的作用有很多，比如可以应用到方法的 属性描述符上，可以用来监视，修改或者替换方法定义，下面写一个简单的例子，改变方法的定义

function methodDeractor(msg:string):Function{
   
    return function(target:any, name:string, descriptor:PropertyDescriptor){
   
        descriptor.value = () => console.log(msg)
    }
}

class Person{
   
    @methodDeractor("hello world")
    sayHello(){
        console.log("hello")
    }
}

let a = new Person();
a.sayHello(); //hello world

上面的例子是通过属性描述符来修改方法的定义的
methodDeractor内部return的函数才是ts所关心的装饰器，这个装饰器接收三个参数

• target 目标方法所属类（函数）的原型
• name 目标方法的名字
• descriptor 目标方法的属性描述符

这样又回到了开始的问题，那么这些参数是在什么时候被传递的呢？我们来看一下编译过后的js代码：

"use strict";
var __decorate = (this && this.__decorate) ||