从编译后的js代码看typescript中的面向对象

众所周知，ts目前是不能直接编译成机器码运行的
须要转换成js代码后运行
因为js的动态特性，因此我也很好奇编译后的代码是怎么样的呢

废话很少说，直接切入正题
注：(ts版本为:3.1,编译的js版本为：ES5)

封装

public/private/protected

首先写一个基类

class Person {

    public name: string;
    private _age: number;
    protected sex: string;

    constructor(name: string, age: number, sex: string) {
        this.name = name;
        this.sex = sex;
        this._age = age;
    }

    public say():void {
        console.log(`my name is ${this.name}`)
    }
}

复制代码

编译后：

var Person = /** @class */ (function () {
    function Person(name, age, sex) {
        this.name = name;
        this.sex = sex;
        this._age = age;
    }
    Person.prototype.say = function () {
        console.log("my name is " + this.name);
    };
    return Person;
}());
复制代码

能够看到编译后的代码还少了不少
我本觉得编译后的代码应该更复杂些，
好比用闭包实现private等等
后来一想，真不必，ts是js的超集
只要保证在ts内，代码的安全性能获得保证就行
毕竟，咱们不会在编译后的js内再进行编码

let p: Person = new Person('小明', 20, '男');
// error:属性“_age”为私有属性，只能在类“Person”中访问。ts(2341)
p._age = 21;
复制代码

注意，构造函数也能够进行描述，private后将不能实例化对象，protected后只能由继承的类调用其构造函数

存取器与只读

咱们再来看看其余修饰器编译以后的代码

class Person {

    public readonly age: number;

    private _height: number;
    get height(): number {
        return this._height;
    }

    constructor( age: number, height: number) {
        this.age = age;
        this._height = height;
    }
}
复制代码

编译后：

var Person = /** @class */ (function () {
    function Person(age, height) {
        this.age = age;
        this._height = height;
    }
    Object.defineProperty(Person.prototype, "height", {
        get: function () {
            return this._height;
        },
        enumerable: true,
        configurable: true
    });
    return Person;
}());
复制代码

这里只有get ts能推断出属性是只读
咱们代码主动设置属性readonly也是只读
但要注意他们编译出来的代码不一样

let p: Person = new Person(20, 170);
// error:Cannot assign to 'age' because it is a read-only property.ts(2540)
p.age = 22;
// error:Cannot assign to 'height' because it is a read-only property.ts(2540)
p.height = 180;
复制代码

继承

下面咱们来写一个子类

class Person {

    public name: string;
    private _age: number;
    protected sex: string;

    constructor(name: string, age: number, sex: string) {
        this.name = name;
        this.sex = sex;
        this._age = age;
    }

    public say() {
        console.log(`my name is ${this.name}`)
    }
}


class Boy extends Person {

    constructor(name: string, age: number) {
        super(name, age, '男');
    }

    play() {

    }
}

复制代码

编译后:

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var Person = /** @class */ (function () {
    function Person(name, age, sex) {
        this.name = name;
        this.sex = sex;
        this._age = age;
    }
    Person.prototype.say = function () {
        console.log("my name is " + this.name);
    };
    return Person;
}());
var Boy = /** @class */ (function (_super) {
    __extends(Boy, _super);
    function Boy(name, age) {
        return _super.call(this, name, age, '男') || this;
    }
    Boy.prototype.play = function () {
    };
    return Boy;
}(Person));
复制代码

能够看到编译成ES5的js代码class的实现仍是特别规范的
使用的组合寄生继承方实现式，
没有变量提高，静态属性也继承了

extend与implements

要注意ts和别的强类型语言不一样点
类既能被继承，也能被当作接口去实现
而接口，只能去实现

如：

class Person {

    public name: string;

    constructor(name: string) {
        this.name = name;
    }

    public say() {
        console.log(`my name is ${this.name}`)
    }
}

interface IStudy {
    read(): void;
    write(): void;
}

class Boy extends Person implements IStudy {

    constructor(name: string) {
        super(name);
    }
    read(): void {
        console.log('boy read');
    }

    write(): void {
    }
}

class Girl implements Person, IStudy {
    public name: string;

    constructor(name: string) {
        this.name = name;
    }
    read(): void {
        console.log('girl read');
    }
    write(): void {

    }
    say(): void {
    }
}
复制代码

Boy是继承自Person
而Girl是实现了Person

编译代码为：

var Person = /** @class */ (function () {
    function Person(name) {
        this.name = name;
    }
    Person.prototype.say = function () {
        console.log("my name is " + this.name);
    };
    return Person;
}());
exports.Person = Person;
var Boy = /** @class */ (function (_super) {
    __extends(Boy, _super);
    function Boy(name) {
        return _super.call(this, name) || this;
    }
    Boy.prototype.read = function () {
        console.log('boy read');
    };
    Boy.prototype.write = function () {
    };
    return Boy;
}(Person));
var Girl = /** @class */ (function () {
    function Girl(name) {
        this.name = name;
    }
    Girl.prototype.read = function () {
        console.log('girl read');
    };
    Girl.prototype.write = function () {
    };
    Girl.prototype.say = function () {
    };
    return Girl;
}());
复制代码

这里编译后的js代码也直观的显示了继承和实现的区别
Boy继承自Person，因此原型链上能找到父类的方法属性
Girl实现了Person，因此只是自身拥有和Person同样结构的属性和方法

let s1: Boy = new Boy('小明');
let s2: Girl = new Girl('小红');

console.log(s1 instanceof Person); // true
console.log(s2 instanceof Person); // false

复制代码

类型兼容

相较其余强类型语言，更有意思的是
ts中的类型兼容，更像是填鸭大法
只要两个类型拥有相同的结构，就能够兼容
好比接着上面的代码：

let boy: Boy = new Boy('小明');
let girl: Girl = new Girl('小红');

boy = girl;// ok
let tmp: Girl = new Boy('小黑'); // ok

复制代码

联合类型

甚至还能够：

function factory(): IStudy & Person {
    // return new Boy('小绿'); // ok
    return new Girl('小紫'); // ok
}
复制代码

因为js中弱类型的特性，普遍的使用了匿名对象,动态属性等等
因此ts中对类型的兼容的断定都是基于"结构"，而不是它的名义类型

多态

多态是弱类型语言与生俱来的，或者说不该该有这个概念
而ts中也是与生俱来

let s1: IStudy = new Boy('小明');
let s2: IStudy = new Girl('小红');

s1.read();// boy read
s2.read();// girl read

复制代码

由于多态的定义原本就是：

同一操做做用于不一样的对象，能够有不一样的解释，产生不一样的执行结果。

因此重写，实现，或是重载都能表现

总结

js原本就有面向对象的实现，ts只是更好的表现出来 ts对类型的兼容是基于“结构”的兼容 因此ts中的"类"，既能被继承(extends)，也能被实现(implements) ts是js的超集，不少特征在编译后的js代码内并不能体现，可是能保证编译后js运行的安全性