《前端之路》- TypeScript (四) class 中各類屬性、方法，抽象類、多態
- 2020 年 3 月 27 日
- 筆記
目錄
在這一章中介紹的 class 類，希望同學們可以在上一章節中 複習下構造函數、原型、原型鏈等基礎知識
一、TypeScript 中的類
1、先來舉個例子：
class Persons { name: any; age: number | undefined; constructor(name: string, age: number) { this.name = name; this.age = age; } getName(): void { console.log(`${this.name}今年已經${this.age}歲了`); } } let p11 = new Persons("za", 123); console.log(p11.getName()); // za今年已經123歲了 - 轉換成 ES5 的程式碼後：
var Persons = /** @class */ (function() { function Persons(name, age) { this.name = name; this.age = age; } Persons.prototype.getName = function() { console.log( this.name + "u4ECAu5E74u5DF2u7ECF" + this.age + "u5C81u4E86" ); }; return Persons; })(); var p11 = new Persons("za", 123); console.log(p11.getName()); // za今年已經123歲了 2、這裡和我們使用 Es6 中的 class 有一些差別
// javascript 中 class 的定義 class An { constructor(name) { this.name = name; } getName() { console.log(this.name); } } var a = new An("zz"); a.getName(); // zz 3、差異在於，我們需要去定義 constructor 構造函數中傳入的數據參數的類型
二、TypeScript 中類的繼承
class Animal { name: string | undefined; food: string; constructor(name: string, food: string) { this.name = name; this.food = food; } eat() { console.log(`${this.name}吃${this.food}`); } } class Cat extends Animal { constructor(name: string, food: string) { super(name, food); } jump() { console.log(`${this.name}正在跳`); } } let xiaohhua = new Cat("xiaohua", "貓糧"); console.log(xiaohhua.eat()); // xiaohua吃貓糧 console.log(xiaohhua.jump()); // xiaohua正在跳 這裡和 ES6 中的 class 繼承內容基本上沒什麼出入
三、TypeScript 中公共，私有與受保護的修飾符
這裡的修飾符是對類中對 屬性和方法的類型的定義
3-1、屬性的 public
不定義的類心的話，默認就是 public 類型
class Animals { public name: string | undefined; constructor(name: string) { this.name = name; } eat() { console.log(`${this.name}哇`); } } 轉換成 es5 程式碼
"use strict"; var Animals = /** @class */ (function() { function Animals(name) { this.name = name; } Animals.prototype.eat = function() { console.log(this.name + "u54C7"); }; return Animals; })(); // 和沒定義之前一樣 3-2、屬性的 private
當成員被標記成 private 時，它就不能在聲明它的類的外部訪問
class Animal2 { private name: string | undefined; constructor(name: string) { this.name = name; } eat() { console.log(`${this.name}哇`); } } var a = new Animal2("private"); a.name = "123"; // 報錯，name 屬性只能在 Animal2 內部使用 new Animal2("private").name = "432"; // 報錯： 屬性「name」為私有屬性，只能在類「Animal2」中訪問。 3-3、屬性的 protected
當成員被標記成 protected 時，它就不能在聲明它的類的外部訪問，但是該類的子類可以訪問
class Person2 { protected name: string; constructor(name: string) { this.name = name; } } class exPerson extends Person2 { public age: number; constructor(age: number, name: string) { super(name); this.age = age; this.name = name; } public getInfo() { console.log(`${this.name}哈哈哈哈${this.age}`); } } let ps = new exPerson(123, "za"); // 派生類可以繼承 protected 屬性，但是 ps.name = "zz"; // 報錯 外部無法直接訪問 console.log(ps); // { name: 'za', age: 123 } 構造函數也能夠被 設置成 protected 屬性
class Person22 { protected name: string; protected constructor(name: string) { this.name = name; } } class exPerson2 extends Person2 { public age: number; constructor(age: number, name: string) { super(name); this.age = age; this.name = name; } public getInfo() { console.log(`${this.name}哈哈哈哈${this.age}`); } } let exp = new exPerson2(21, "exp-name"); let per22 = new Person22("zs"); // 報錯 類「Person22」的構造函數是受保護的，僅可在類聲明中訪問 3-4、readonly 修飾符
使用 readonly 關鍵字將屬性設置為只讀的。 只讀屬性必須在聲明時或構造函數里被初始化
class octPers { readonly name: string; readonly age: number = 8; constructor(name: string, age: number) { this.name = name; this.age = age; } } let ns = new octPers("zz", 123); console.log("---1", ns); ns.age = 456; // 報錯 Cannot assign to 'age' because it is a read-only property. console.log("---2", ns); // 這裡會執行什麼內容呢？ 四、TypeScript 中 靜態方法
這裡所謂的靜態方法，其實就是將方法直接定義在了 構造函數對象上，只有構造函數本身才能去使用它，任何其他都無法使用（包括它的 派生類）
class staticPerson { public name: string; public age: number = 8; constructor(name: string, age: number) { this.name = name; this.age = age; } static getName1() { console.log("---static-getName---", this); } protected getName(): void { console.log("---protected-getName---", this); } } let ress = new staticPerson("zzs", 123); console.log("---instancing getName", staticPerson.getName1()); // 屬性「getName」受保護，只能在類「staticPerson」及其子類中訪問。 五、TypeScript 中 繼承與多態
這裡面其實更多的是 JS 的繼承與多態，我們以 ES5 和 ES6 分別對繼承和多態進行對比
5-1 ES5 中是如何實現 繼承的？
這裡我們想想繼承，到底是繼承什麼？如何繼承？為什麼要繼承？
5-1-1 通過類式繼承
類的方式，其核心在於將 子類的 prototype 指向了 父類的實例，這樣的話，子類的實例的
__proto__指向子類的prototype, 然而 子類的prototype被賦予了 父類的實例。我們製作一個簡單的圖，來說明一下這裡如何實現的繼承。
var SuperClass = function(name) { var id = 1; this.name = name; this.work = function() { console.log(this.name + 'in SuperClass'); }; }; SuperClass.prototype.getSuperName = function() { return this.name; }; var SubClass = function() { this.getSubName = function() { console.log('this is subname'); }; }; SubClass.prototype = new SuperClass('superClass'); var sub = new SubClass(); // 這樣有缺點么？ 當然有，下面我們來通過例子來說明一下 這種繼承的方式的缺點、
var SuperClass = function(name) { var id = 1; this.name = name; this.todo = [1, 2, 3, 4]; this.work = function() { console.log(this.name + 'in SuperClass'); }; }; SuperClass.prototype.getSuperName = function() { return this.name; }; var SubClass = function() { this.getSubName = function() { console.log('this is subname'); }; }; SubClass.prototype = new SuperClass('superClass'); var sub = new SubClass(); sub.todo.push('subClass name'); var sub2 = new SubClass(); console.log(sub2.todo); // [ 1, 2, 3, 4, 'subClass name'] // 這裡是缺陷一，父類屬性會被實例子類修改、污染 console.log(sub.name); //superClass console.log(sub2.name); //superClass // 子類的實例只能有一個name，這很顯然也是不夠靈活的，這裡就是缺陷二 這裡因為子類實例對象1，對於父類共有屬性進行了修改，導致子類實例對象2 的對應屬性受到了污染。那有沒有什麼辦法可以避免這種污染呢？當然是有的，後面我們會介紹到的。
5-1-2 通過構造函數繼承
// 聲明父類 function Animal(color) { this.name = 'animal'; this.type = ['pig', 'cat']; this.color = color; } // 添加原型方法 Animal.prototype.eat = function(food) { console.log(food); }; // 聲明子類 function Dog() { Animal.apply(this, arguments); // 這一步的操作就是改變 Animal 方法的上下文，然後讓 Dog 也具備了 父類構造函數內的屬性和方法 } var dog1 = new Dog('blue'); // dog1.color -> blue var dog2 = new Dog('red'); // dog2.color -> red dog1.type.push('haha'); console.log(dog2.type); // [ 'pig', 'cat' ] 我沒看到 dog1 修改了繼承自父類的屬性 type ，但是 dog2 的 type 屬性並為被影響到。原因就是我們實例化的時候，創建的實例對象的指針指向的位置是不同的，所以對應的
__proto__指向的是 不同的子類構造函數的prototype。可能會比較繞口，但是本質就是 new 操作生成了2個不同的對象，各自有各自的原型屬性，互不干擾。
但是上面也有一個缺陷就是，子類沒辦法繼承到父類原型上的方法和屬性
那聰明的前端開發者們，就想到了 集合前2者的優勢，進行了 組合式繼承。
5-1-3 組合式繼承
// 聲明父類 function Animal(color) { this.name = 'animal'; this.type = ['pig', 'cat']; this.color = color; } // 添加原型方法 Animal.prototype.eat = function(food) { console.log(food); }; // 聲明子類 function Dog() { Animal.apply(this, arguments); // 這一步的操作就是改變 Animal 方法的上下文，然後讓 Dog 也具備了 // 父類構造函數內的屬性和方法 } Dog.prototype = new Animal('Animal Color'); var dog1 = new Dog(); console.log((dog1.color = 'dog1.name')); var dog2 = new Dog(); console.log(dog2.color); // undefined 這裡為什麼 dog2.color 是 undefined 而不是 'dog1.name' 呢？ 因為，我們子類的構造函數，已經繼承了 父類的構造函數內部的屬性和方法，然後，在實例我們 子類的時候，子類的實例對象就會有先從本身的對象中去尋找 color 屬性。 當找到對應屬性的時候，無論是否有值，都會優先返回 實例化對象本身的屬性，而不再需要從原型鏈中查找對應屬性。 5-2 ES6 中是如何實現 繼承的？
這裡我們想想繼承，到底是繼承什麼？如何繼承？為什麼要繼承？
5-2-1 ES6 的繼承方式
class Animal { constructor(name) { this.name = name; } eat(food) { console.log(`${this.name}吃${food}`); } } class Dog extends Animal { constructor(name) { super(name); this.name = name; } run() { console.log('小狗泡泡跑'); } } let dog1 = new Dog('小狗'); let dog2 = new Dog('小花'); console.log(dog1.name); // 小狗 console.log(dog2.name); // 小花 dog1.__proto__ === Dog.prototype // true Dog.__proto__ === Animal // true 這裡 Dog 的 __proto__ 指向的是 Animal 這個類 因為 Animal 這個類中的 constructor 就是原來的構造函數， 其中剩下的方法、屬性都是 prototype 上的公共方法與屬性。是可以被子類繼承 六、總結
這裡全篇文章又總結了下 JS 中繼承的原理以及一些我們平時可能忽略的問題，這裡就相當於在 學習 ts 之前，帶著大家再一起複習一下。好了，本篇文章就先到這裡了。
GitHub 地址：（歡迎 star 、歡迎推薦 : )
《前端之路》 – TypeScript（四）class 篇
