typescript编译小研究

1.继承的实现方式

typescript代码:

class A{
    name: string;

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

    print(){
        console.log(this.name);
    }
}

class B extends A{
    old: number;

    constructor(name,old){
        super(name);
        this.old=old;
    }
    
    out(){
        console.log(this.name+this.old);
    }
}

let b=new B('jc',1);
b.out();

用tsc编译后的ES5代码:

var __extends = (this && this.__extends) || (function () {
    var 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 function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var A = (function () {
    function A(name) {
        this.name = name;
    }
    A.prototype.print = function () {
        console.log(this.name);
    };
    return A;
}());
var B = (function (_super) {
    __extends(B, _super);
    function B(name, old) {
        var _this = _super.call(this, name) || this;
        _this.old = old;
        return _this;
    }
    B.prototype.out = function () {
        console.log(this.name + this.old);
    };
    return B;
}(A));
var b = new B('jc', 1);
b.out();
  • 可以看出来typescript中类型之间的继承是通过寄生组合式继承来完成的,这里可以给出一个寄生组合式继承的简单例子:
function extend(B,A){
    var prototype=Object.create(A.prototype);
    prototype.construtor=B;
    B.prototype=prototype;
}

function A(name){
    this.name=name;
}

A.prototype.print=function(){
    console.log(this.name);
}

A.prototype.num=1;

function B(name,old){
    A.call(this,name);
    this.old=old;
}

extend(B,A);

B.prototype.ready=function(){
    console.log(this.name+this.old);
}

寄生组合式继承的基本思路是:不必为了制定子类型的原型来调用父类型的构造函数,只需要将父类型的原型对象的副本赋给子类型的原型对象,然后修正一下原型对象的构造函数指向。

2.私有变量的实现方式

typescript代码:

class A{
    private name: string;

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

    print(){
        this.console();
    }

    private console(){
        console.log(this.name);
    }
}

let a=new A('jc');
a.print();

tsc编译后的代码:

var A = (function () {
    function A(name) {
        this.name = name;
    }
    A.prototype.print = function () {
        this.console();
    };
    A.prototype.console = function () {
        console.log(this.name);
    };
    return A;
}());
var a = new A('jc');
a.print();

可以看到typescript并没有为私有属性和函数做任何处理,但是如果在外部访问了私有变量,在编译时会报错,可见typescript是在编译过程的底层实现了对私有变量的检查。

3.静态变量的实现方式

typescript代码:

class A{
    static num: number=1;
}

console.log(A.num);

tsc编译后的代码:

var A = (function () {
    function A() {
    }
    return A;
}());
A.num = 1;
console.log(A.num);

可见静态变量时与类有关的变量,所以可以直接将该属性赋给构造函数对象,让其成为构造函数的属性,在类的内部也要通过类名才能访问到静态变量。

  1. red
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 概述 TypeScript本质上是向JavaScript语言添加了可选的静态类型和基于类的面向对象编程,同时也支持...
    oWSQo阅读 8,555评论 1 45
  • 慕课网@JoJozhai 老师 TypeScript入门课程分享 TypeScript入门 ES5,ES6,JS,...
    shangpudxd阅读 10,473评论 0 22
  • { "Unterminated string literal.": "未终止的字符串文本。", "Identifi...
    一粒沙随风飘摇阅读 10,763评论 0 3
  • 写代码: 1,明确需求。我要做什么? 2,分析思路。我要怎么做?1,2,3。 3,确定步骤。每一个思路部分用到哪些...
    雨尘1阅读 299评论 0 1
  • 继承 一、混入式继承 二、原型继承 利用原型中的成员可以被和其相关的对象共享这一特性,可以实现继承,这种实现继承的...
    magic_pill阅读 1,080评论 0 3