其他分享
首页 > 其他分享> > 从TS编译看原型链继承

从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函数中主要做了两件事:

针对第二点,简化代码如下

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