5-8 TS 继承底层源码解析作业

来源:5-8 复杂+有深度的作业——TS 继承底层源码解析【根据自身需求选做】

终有一死

2023-04-08

"use strict";
// 先判断当前上下文是否存在__extends 方法,如果有就不需要重复定义,如果没有就定义一个立即执行函数
var __extends = (this && this.__extends) || (function () {
    // 对静态属性的继承进行处理
    var extendStatics = function (d, b) {
        // d 是子类 b 是父类

        // Object.setPrototypeOf 方法设置一个指定的对象的原型到另一个对象或 null。
        // 这里的我认为是 先判断当前环境是否可以使用 Object.setPrototypeOf 这个方法
        extendStatics = Object.setPrototypeOf ||
            // 给一个新对象设置__proto__属性为数组,再使用 instanceof 判断该对象的对象是否是数组
            // {}.__proto__ = Array.prototype 如果这个表达式成立,那么当前环境可以使用__proto__
            // 那么就可以使用 __proto__进行继承
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            // 如果以上两种在当前环境都不支持,就使用循环遍历的方式
            // 使用for..in 循环遍历父类(b)上的每一个属性(p) 
            // 先是判断 父类(b)上 是否自己有 p 这个属性,不可以是自己原型上的属性
            // 如果有 p 这个属性,就把 p 这个属性 复制 到 子类(d) 上
            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    // 返回一个函数
    return function (d, b) {
        // 判断 父类(b) 如果不是一个函数 也不是 null ,就抛出类型错误
        if (typeof b !== "function" && b !== null)
            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
        // 执行 extendStatics函数
        extendStatics(d, b);
        // 临时的一个构造函数,中间人
        function __() { this.constructor = d; }
        // 这里可以理解为 d.prototype = (b === null ? ····)
        // 如果父类(b) 为null, 则创建一个新对象,将这个对象原型指向null 也就是 这个对象没有原型, 比较罕见 object.prototype.__proto__ 为 null
        // 如果父类(b) 不为null,用的是寄生组合式继承
        // 我的理解是 先将临时的一个构造函数“__”的原型 指向 父类(b)的原型
        // 在 new __() 中,第一是创建了一个空对象,第二是给予这空对象一个__proto__属性,并指向父类(b)的prototype 
        //  第三执行`__`构造函数,将子类(d) 赋值给了新对象的构造函数
        //  第四 将新创建的对象作为 this 上下文,最后返回这个this
        // 然后将 这个原型指向父类原型的新创建的对象 赋值给 子类的原型
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var Pay = /** @class */ (function () {
    function Pay(bank_card_no, balance, cost, tokenid) {
        this.bank_card_no = bank_card_no;
        this.balance = balance;
        this.cost = cost;
        this.tokenid = tokenid;
    }
    Pay.prototype.pay = function () {
        console.log("支付银行卡卡号:", this.bank_card_no);
    };
    return Pay;
}());
// 
var PayType;
(function (PayType) {
    PayType[PayType["WebChat"] = 1] = "WebChat";
    PayType[PayType["AliPay"] = 2] = "AliPay";
    PayType[PayType["CloudFlashPayment"] = 3] = "CloudFlashPayment";
})(PayType || (PayType = {}));
// 银行卡支付
var BankPay = /** @class */ (function (_super) {
    // 先是继承,_super 是父类
    __extends(BankPay, _super);
    // BankPay()是 子类BankPay 的构造函数
    // 判断 父类的构造函数是否存在,若存在则调用父类的构造函数
    // 如果不存在,就直接返回 子类实例本身
    function BankPay() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    // 返回 子类 BankPay的构造函数,用于创建子类实例
    return BankPay;
}(Pay));
// 选做题
var MobilePay = /** @class */ (function (_super) {
    __extends(MobilePay, _super);
    function MobilePay(bank_card_no, balance, cost, tokenid, type, change, openid, appid) {
        var _this = _super.call(this, bank_card_no, balance, cost, tokenid) || this;
        _this.type = type;
        _this.change = change;
        _this.opendid = openid;
        _this.appid = appid;
        return _this;
    }
    //....
    MobilePay.prototype.pay = function () {
        _super.prototype.pay.call(this);
        //....完成支付过程
        console.log("完成支付");
    };
    return MobilePay;
}(Pay));
var webChatPay = new MobilePay("1111", 300, 100, "1asf3q", PayType.WebChat, 10, "111asdf", "asdfsdf11");
console.log(webChatPay);
webChatPay.pay();

写回答

1回答

keviny79

2023-06-26

这是一个超纲的选做作业,同学解释的不错。

0
0

TypeScript 从入门到深度掌握,晋级TS高手

200+技术点,22 场景应用,Vue3 源码 TS 用法剖析

430 学习 · 53 问题

查看课程