从TS编译看原型链继承
作者:互联网
TS代码
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
。
通过第三行代码可以看出d.prototype = {__proto__: __.prototype }
结合第二行代码,可知d.prototype = {__proto__ : b.prototype}
因此可以获知最终结果d.prototype.__proto__ = b.prototype
。
第一行代码作用是需要保留原始d.prototype.constructor
。
终极结果就是d.prototype = {__proto__: b.prototype, constructor: d}
。
小结:使用结合继承的方式继承了普通属性,静态属性和函数。
标签:__,function,proto,TS,number,编译,原型,prototype,Point3D 来源: https://blog.csdn.net/Jason847/article/details/104864398