TS的类及继承背后

TypeScript代码

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代码

var __extends = (this && this.__extends) || // 已经继承过了就不能在继承了，单继承
(function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf || // 是否支持 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) : // 继承自null对象
                  (__.prototype = b.prototype, new __()); // 继承自非null对象
    };
}) ();
  
var Shape = /** @class */ (function () { // 3.1 声明一个类型，就是创建一个匿名函数
    function Shape(a) {
        this.Area = a; // 3.4 属性声明/定义
    }
    return Shape; // 3.3. 返回一个函数对象，即构造函数
}()); // 3.2. 执行后

var Circle = /** @class */ (function (_super) { // 2. 类型Circle是一个函数对象执行的结果，这个函数有一个参数
    __extends(Circle, _super); // 5.Circle这个函数对象，是扩展至_super 函数对象的，即处理继承关系
    function Circle() {
        return _super !== null && _super.apply(this, arguments) || // 4.1 如果有父类型，执行父类构造函数
            this; // 4.2 没有父类型
    }
    Circle.prototype.disp = function () {  // 6. Circle这个函数对象，声明/定义成员函数
        console.log("圆的面积:  " + this.Area);
    };
    return Circle;  // 4. 返回结果是一个函数对象: function Circle()，即构造函数。
}(Shape)); // 3. 实参是父类型Shape，一个函数对象。

var obj = new Circle(223); // 1. 根据类型Circle，创建实例对象，有一个构造参数
obj.disp();

说明都在注释中了，序号引导理解思路。

知识点参考：

https://www.ruanyifeng.com/blog/2018/06/javascript-this.html 从JS内存机制角度解释如何理解this

https://www.cnblogs.com/alichengyin/p/4852616.html 理解下javascript的原型链实现

https://www.cnblogs.com/fozero/p/10997520.html javascript常用Objec方法