解构TypeScript中class

众所周知，TypeScript中的class是由原来的构造函数升级而来，那么，class中的成员又对应原来构造函数的哪些部分呢？今天就让我们来解构一下TypeScript中的class吧。

一、声明一个class

我们会使用typescript来声明一个class，这个class基本上包含了class所能有的静态成员、实例成员，并用typescript将class降级到es5，因为es5并没有class的存在，降级后class就是用原来的构造函数实现的，ts代码与js代码如下：

ts代码：

class MyClass {
    constructor(){this.abc = "abc"} //构造函数
    //声明的两个属性头
    static static_prop = "static_prop" //静态成员
           prop = "prop"               //实例成员
    //声明的两个属性尾

    //声明的两个方法头
    static static_method(){} //静态成员
           method(){}   //这里是实例成员吗？
    //声明的两个方法尾
}

由ts生成的js代码：

"use strict";
var MyClass = /** @class */ (function () {
    function MyClass() {
        this.prop = "prop"; //实例成员
        this.abc = "abc";
    } //构造函数
    //声明的两个属性尾
    //声明的两个方法头
    MyClass.static_method = function () { }; //静态成员
    MyClass.prototype.method = function () { }; //这里是实例成员吗？
    //声明的两个属性头
    MyClass.static_prop = "static_prop"; //静态成员
    return MyClass;
}());

由于ts代码生成js代码会打乱代码布局，还执行了一个并没有什么软用的立即执行函数，所以为了便于观看，我将会js代码里的注释删除并做一定修饰。

修饰后的js代码

"use strict";
 function MyClass() {
    this.prop = "prop";
    this.abc = "abc";
} 
 MyClass.static_method = function () { }; 
 MyClass.prototype.method = function () { };
 MyClass.static_prop = "static_prop"; 

二、解构constructor

可以看到ts里的constructor函数函数体里的语句到了构造函数函数体里。语句如下：

this.abc = "abc";

这就很明显了，class里的constructor函数与构造函数function MyClass()的作用是大致相同的。

三、解构class中的static_prop属性

该属性在ts代码中，是在class内部并且被一个关键字static所修饰，而在js代码却被移动到了class外并且static关键字被移除。两者的代码对比如下：

//ts代码
class MyClass {
    static static_prop = "static_prop" //在class内部，并且被static修饰
}


//js代码
 function MyClass() {} 
MyClass.static_prop = "static_prop"; //在class外部，并且static修饰被移除

观察js代码后发现被static修饰的static_prop属性是其实是被挂载到了构造函数MyClass上

关键字被移除原因是整个属性是在class的外部被声明实现的，自然不能用static关键字，而且es5还没有class这种东西。

所以我们可以总结出，被static关键字修饰的class成员，是被挂载到了class身上，其实也就是原来的构造函数身上，与实例对象、原型对象无关。所以无论实例化出多少个对象，它都是不变的，它是一种比较静态的属性，它可以被称为class的静态成员。

四、解构class中的prop属性

这个属性没有被任何的关键字修饰，ts与js代码对比如下：

//ts
class MyClass {
           prop = "prop"
}

//js
"use strict";
 function MyClass() {
    this.prop = "prop";
} 

通过观察js代码，我们可以看出，prop属性是一个实例中的属性。

所以我们可以认为没有static关键字修饰的class属性，是class的实例的一个属性，这种属性可以被称为class的实例成员。

五、解构class的static_method方法

该方法的ts和js代码如下：

//ts
class MyClass {
    static static_method(){} //静态成员
}

//js
function MyClass() {} 
MyClass.static_method = function () { }; 

可以看到被statci修饰的class方法static_method和被static修饰的class属性static_prop一样，在js中也是被挂载到了function MyClass（）这个构造函数上，是一个静态成员

六、解构class的method方法

该方法没有被任何关键字修饰，ts和js代码如下：

//ts
class MyClass {
     method(){} 
}

//js
function MyClass() {} 
 MyClass.prototype.method = function () { };

通过观察js代码，我们可以发现，method方法既不挂载在构造函数上，也不挂载在实例对象上，而是挂载在构造函数的原型对象上，因此我们很难将这个函数称为静态成员或者是实例成员。

七、总结

经过上述解构，我们不难发现，class上被static修饰属性或方法是挂载在class上也就是挂载在构造函数上的。没有被修饰的属性是挂载实例对象上。没有被修饰的方法是挂载在原型对象上的。constructor中的语句会被合并到构造函数函数体中。这就是class与构造函数的对应关系