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代码分析
整体流程
- 先生成__extends方法,用于原型继承
- 将Shape作为参数(即父类),生成Circle方法,在Circle中,先继承原型,然后生成同名构造方法
- 在Circle的原型链上添加静态方法
- var obj = new Circle(223);
- 在构造方法中调用父类的同名构造方法并将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的类继承原理实现(继承原型链和构造函数)