typeScript类继承编译成javaScript后的代码分析

typeScript编译成javaScript代码分析

转化前的ts代码

class Shape { 
   Area:number 
   
   constructor(a:number) { 
      this.Area = a 
   } 
} 
 
class Circle extends Shape { 
   disp():void { 
      console.log("圆的面积:  "+this.Area) 
   } 
}
  
var obj = new Circle(223); 
obj.disp()

转化后的javaScript代码分析

整体流程

1. 先生成__extends方法，用于原型继承
2. 将Shape作为参数（即父类），生成Circle方法，在Circle中，先继承原型，然后生成同名构造方法
3. 在Circle的原型链上添加静态方法
4. var obj = new Circle(223);
5. 在构造方法中调用父类的同名构造方法并将this指向为子类，然后返回Circle的this

// 如果是第一次调用，this.__extends是undefined，就会执行后面的自执行函数进行赋值
var __extends = (this && this.__extends) || (function() {
    var extendStatics = function(d, b) {
        // d, b 分别对应子类和父类
        // 如果支持 Object.setPrototypeOf 就用改方法，否则用遍历父类的属性，然后进行赋值给子类
        extendStatics = Object.setPrototypeOf ||
            ({
                    __proto__: []
                }
                instanceof Array && function(d, b) {
                    d.__proto__ = b;
                }) ||
            function(d, b) {
                for (var p in b)
                    if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
            };
        // 原型链继承
        return extendStatics(d, b);
    };
    // __extends最终被赋予的值
    // d表示Circle（子类），b表示_super（父类）
    // 在new的时候调用
    return function(d, b) {
        if (typeof b !== "function" && b !== null)
            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
        // 将子类和父类进一步传递到extendStatics
        // 原型链继承
        extendStatics(d, b);

        function __() {
            // 将子类的constructor属性赋值为类本身的调用
            this.constructor = d;
        }
        // 如果父类b是null，则创建一个新的对象，参数为null，否则，执行括号内容
        // __.prototype 给子类构造函数原型赋值为父类b的原型，然后调用子类构造函数
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var Shape = /** @class */ (function() {
    function Shape(a) {
        console.log('diaoyong了父类', a)
        this.Area = a;
    }
    Shape .prototype.doPrint = function () {
        console.log("父类的 doPrint() 方法。");
    };
    return Shape;
}());
// _super 赋值 Shape
var Circle = /** @class */ (function(_super) {
    // 先集成父类原型
    __extends(Circle, _super);
    // 创建构造函数
    function Circle() {
        // 调用__super构造方法，将this指向为Circle的this
        return _super !== null && _super.apply(this, arguments) || this;
    }
    // 重写方法
    StringPrinter.prototype.doPrint = function () {
        // 调用父类
        _super.prototype.doPrint.call(this); // 调用父类的函数
        console.log("子类的 doPrint()方法。");
    };
    Circle.prototype.disp = function() {
        console.log("圆的面积:  " + this.Area);
    };
    return Circle;
}(Shape));

var obj = new Circle(223);
obj.disp();

总结

编译后的js代码利用了es5的类继承原理实现（继承原型链和构造函数）