美文网首页我爱编程
typescript编译小研究

typescript编译小研究

作者: 星月西 | 来源:发表于2017-05-07 15:29 被阅读480次

    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编译小研究

        本文链接:https://www.haomeiwen.com/subject/mriutxtx.html