Typescript 學習筆記四：回憶ES5 中的類

中文網：https://www.tslang.cn/

官網：http://www.typescriptlang.org/

目錄：

• Typescript 學習筆記一：介紹、安裝、編譯
• Typescript 學習筆記二：數據類型
• Typescript 學習筆記三：函數
• Typescript 學習筆記四：回憶Es5 中的類
• Typescript 學習筆記五：類
• Typescript 學習筆記六：接口
• Typescript 學習筆記七：泛型

最簡單的類

function Person (name, age) { // 構造函數
  this.name = name; // 屬性
  this.age = age;
}
var p = new Person('張三', 25); // 實例化對象，p 爲 Person 的一個實例
console.log(p.name);

函數名首字母大寫，函數內用 this 處理的函數稱爲構造函數。

用 new 關鍵字實例化構造函數的變量是該構造函數的實例。

類定義屬性和方法

能夠在構造函數和原型鏈上定義屬性和方法。

function Person (name, age) {
  // 構造函數內定義屬性和方法
  this.name = name; // 實例屬性
  this.age = age;

  this.run = function () { // 實例方法
    console.log(this.name + '在運動');
  }
}
// 原型鏈上定義屬性和方法
Person.prototype.sex = '男';
Person.prototype.work = function () {
  console.log(this.name + '在工做');
}

var p = new Person('張三', 25);
p.run(); // 調用實例方法
p.work();

原型鏈上面的屬性會被多個實例共享，構造函數裏的屬性不會

類的靜態屬性和方法

直接給構造函數設置屬性和方法，不須要實例化便可得到的。

構造函數內的屬性和方法，原型鏈上的屬性和方法都須要實例化以後纔可得到。

function Person (name, age) {
  // 構造函數內定義屬性和方法
  this.name = name; // 屬性
  this.age = age;

  this.run = function () { // 方法
    console.log(this.name + '在運動');
  }
}

// 靜態屬性、方法
Person.address = 'xxx';
Person.getInfo = function () {
  console.log('靜態方法');
}
// 調用
console.log(Person.address);
Person.getInfo();
Person.run(); // 錯誤，只有實例對象纔可調用

var p = new Person();
p.run();

繼承：對象冒充實現

對象冒充能夠繼承構造函數裏面的屬性和方法，可是無法繼承原型鏈上面的屬性和方法

// 父類
function Person (name, age) {
  this.name = name;
  this.age = age;

  this.run = function () {
    console.log(this.name + '在運動');
  }
}
Person.prototype.sex = '男';
Person.prototype.work = function () {
  console.log(this.name + '在工做');
}

// 子類繼承父類
function Child () {
  Person.call(this); // 對象冒充實現繼承
}


var c = new Child('張三', 25);
c.run();
c.work(); // 錯誤，沒有 work 方法

繼承：原型鏈實現

原型鏈繼承：能夠繼承構造函數裏面的屬性和方法，也能夠繼承原型鏈上面的屬性和方法。可是實例化子類的時候無法給父類傳參。

// 父類
function Person (name, age) {
  this.name = name;
  this.age = age;

  this.run = function () {
    console.log(this.name + '在運動');
  }
}
Person.prototype.sex = '男';
Person.prototype.work = function () {
  console.log(this.name + '在工做');
}

// 子類繼承父類
function Child (name, age) {

}
Child.prototype = new Person(); // 原型鏈實現繼承

var c = new Child('張三', 25);
c.run(); // undefined 在運動
c.work(); // undefined 在工做

繼承：原型鏈+對象冒充的組合繼承模式

原型鏈繼承：能夠繼承構造函數裏面的屬性和方法，也能夠繼承原型鏈上面的屬性和方法。可是實例化子類的時候無法給父類傳參。

// 父類
function Person (name, age) {
  this.name = name;
  this.age = age;

  this.run = function () {
    console.log(this.name + '在運動');
  }
}
Person.prototype.sex = '男';
Person.prototype.work = function () {
  console.log(this.name + '在工做');
}

// 子類繼承父類
function Child (name, age) {
  Person.call(this, name, age); // 對象冒充繼承，實例化子類能夠給父類傳參
}
Child.prototype = new Person(); // 原型鏈實現繼承，繼承原型鏈上的屬性和方法
// 或者
// Child.prototype = Person.prototype; // 原型鏈實現繼承，繼承原型鏈上的屬性和方法

var c = new Child('張三', 25);
c.run(); // 張三在運動
c.work(); // 張三在工做