ES5 实现 ES6 的 class以及extends

ts中是这样的

class Greeter { greeting:string; constructor(message:string){ this.greeting = message; } greet(){ console.log("Hello," + this.greeting) } } let greeter = new Greeter("world") class Dog extends Greeter{ bark() { console.log('Woof! Woof!'); } } let dog = new Dog('123') dog.bark() dog.greet()

通过tsc test.ts编译成ES5的源码以下，可在对应生成的test.js中查看

var __extends = (this && this.__extends) || (function () {//(this && this.__extends) 有this且已有该函数则不执行后面的函数
    var extendStatics = function (d, b) { // 从这个函数的名字就能够看到它是实现静态的属性的继承的
        // 静态属性就是直接绑定在构造函数这个函数对象上的属性
        // function (d, b) { d.__proto__ = b; } 将b对象设置为d对象的原型
        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); // {__proto__: []} instanceof Array用来判断浏览器是否支持__proto__属性
        // instanceof运算符用于测试构造函数的prototype属性是否出如今对象的原型链中的任何位置
        // b.prototype 是否存在于d的原型链上
        // {} 空的对象的__proto__属性设为空数组，Array 是[]的原型链上的，因此返回true
 }; return function (d, b) { extendStatics(d, b);//完成静态属性继承
        function __() { this.constructor = d; }//新构造函数，将constructor指向d
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); //若是b 是null 即空对象，则d的prototype 等于Object.create(b)，即初始化一个新对象
        //v8上直接{}建立对象比Object.create(null)快
        //不然，采用原型继承，__的prototype 等会 b 的
 }; })(); var Greeter = /** @class */ (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { console.log("Hello," + this.greeting); }; return Greeter; }()); var greeter = new Greeter("world"); var Dog = /** @class */ (function (_super) { __extends(Dog, _super); function Dog() { return _super !== null && _super.apply(this, arguments) || this; } Dog.prototype.bark = function () { console.log('Woof! Woof!'); }; return Dog; }(Greeter)); var dog = new Dog('123'); dog.bark(); dog.greet();

总结：理解起来仍是挺费劲的，或者说到如今都没彻底理解，面向对象、原型链这一块容易忘记，固然，仍是理解的不够深入，否则很难忘掉的。