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();

總結：理解起來還是挺費勁的，或者說到現在都沒完全理解，面向對象、原型鏈這一塊容易忘記，當然，還是理解的不夠深刻，不然很難忘掉的。