TS 深入TS继承

深入TS继承

ts类编译成ES5代码时，发现底层其实是构造函数

class Pay {
  constructor(bank_card_no: string, balance: number, cost: number, tokenid: string) {
    this.bank_card_no = bank_card_no;
    this.balance = balance;
    this.cost = cost;
    this.tokenid = tokenid;
  }
  bank_card_no: string
  balance: number
  cost: number
  tokenid: string
  pay() {
    console.log('支付银行卡卡号', this.bank_card_no);
  }
}

ts类编译成ES5代码后为

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

构造函数继承

子类通过借用父类构造函数继承父类属性

此时并未继承父类原型对象，无法调用父类方法

子类原型链继承父类实例对象空间后，才能使用父类方法

此时子类原型对象也包含了父类的属性。

function Vechile (brandNo, price) {
  console.log("this:", this);
  this.brandNo = brandNo;
  this.price = price;
}

Vechile.prototype.sale = function () {
  console.log(this + " 销售");
}

function Bus (brandNo, price, seatNo) {
  Vechile.apply(this, [brandNo, price]); // 借用构造函数继承
  this.seatNo = seatNo;
}

// 原型链继承
Bus.prototype = new Vechile;
Bus.prototype.constructor = Bus;

let bus = new Bus("大巴", 20, 64);
console.log(bus); // Bus {}
bus.sale();

构造函数继承底层逻辑

使用中间方法"protoExtendsWithMdl"继承父类原型对象后，子类原型指向中间件实例对象空间。

function Vechile (brandNo, price) {
  console.log("this:", this);
  this.brandNo = brandNo;
  this.price = price;
}

Vechile.prototype.sale = function () {
  console.log(this + " 销售");
}

function Bus (brandNo, price, seatNo) {
  Vechile.apply(this, [brandNo, price]); // 借用构造函数继承
  this.seatNo = seatNo;
}

// 寄生组合继承
function protoExtendsWithMdl (ParentClass, SonClass) {
  function Middle () {
    this.constructor = SonClass;
  }
  Middle.prototype = ParentClass.prototype;
  SonClass.prototype = new Middle();
}

protoExtendsWithMdl(Vechile, Bus)

let bus = new Bus("大巴", 20, 64);
console.log(bus);
bus.sale();


function Car (brandNo, price, type) {
  Vechile.apply(this, [brandNo, price]);
  this.seatNo = type;
}

TS类中super的两种定义

super只允许出现在子类当中，代表父类构造函数。

super在子类当中可以调用父类方法

class Pay {
  constructor(bank_card_no: string, balance: number, cost: number, tokenid: string) {
    this.bank_card_no = bank_card_no;
    this.balance = balance;
    this.cost = cost;
    this.tokenid = tokenid;
  }
  bank_card_no: string
  balance: number
  cost: number
  tokenid: string
  pay() {
    console.log('支付银行卡卡号', this.bank_card_no);
  }
}

enum PayType {
  WebChat = 1,
  Alipay,
  CloudFlashPayment,
}

class ATMPay extends Pay {
  bank_network: string
  bankno_type
  bank_card_psw
  custname
}

class MobilePay extends Pay {
  constructor(bank_card_no: string, balance: number, cost: number, tokenid: string, type: PayType, change: number, opendid: string, appid: string) {
    super(bank_card_no, balance, cost, tokenid)
    this.type = type;
    this.change = change;
    this.opendid = opendid;
    this.appid = appid;
  }
  type: PayType
  change: number
  opendid: string
  appid: string
  pay() {
    super.pay();
    console.log('完成支付。。。。');
  }
}

let webChatPay = new MobilePay('111', 300, 100, '1awdfas', PayType.WebChat, 10, '111asfg', 'asdfasdfda');
console.log(webChatPay);
webChatPay.pay();