ES6代码
class Point {
x: number;
y: number;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
}
class Point3D extends Point {
z: number;
constructor(x:number, y:number, z: number) {
super(x,y)
this.z = z;
}
}
编译
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
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 extendStatics(d, b);
};
return function (d, b) {//参数d是derive（派生）的简写，参数b是base的简写
extendStatics(d, b);//继承静态成员
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var Point = /** @class */ (function () {
function Point(x, y) {
this.x = x;
this.y = y;
}
return Point;
}());
var Point3D = /** @class */ (function (_super) {
__extends(Point3D, _super);
function Point3D(x, y, z) {
// _super.call()用于继承基类的属性成员
var _this = _super.call(this, x, y) || this;
_this.z = z;
return _this;
}
return Point3D;
}(Point));
分析
结合《JavaScript高级程序设计》6.3节继承中所说，在子类构造函数的内部调用基类构造函数，即_super.call(this, x, y)。这样在创建子类Point3D实例的时候就会执行基类构造函数的代码，获取基类属性。
在__extends函数中主要做了两件事：
- 将基类的静态成员赋值到子类。即
extendStatics函数实现的功能。 - 设置子类函数的原型
针对第二点，简化代码如下
function __() { this.constructor = d; }
__.prototype = b.prototype
d.prototype = new __();
如上代码的最终目的就是d.prototype.__proto__ = b.prototype。
通过第3行代码可以看出d.prototype = {__proto__: __.prototype }
结合第2行代码，可知d.prototype = {__proto__ : b.prototype}
因此可以获知最终结果d.prototype.__proto__ = b.prototype。
第一行代码作用是需要保留原始d.prototype.constructor。
终极结果就是d.prototype = {__proto__: b.prototype, constructor: d}。
小结：这里的function __(){}作为中转函数，将原型链传递下去。使用结合继承的方式继承了普通属性，静态属性和函数。
