[TOC] >[success] # class - 類 初次見面 大家都清楚，在 **javascript 的世界** 都是用 **原型鏈** 與 **構造函數** 來實現 **繼承** ，到了 **ES6** 時代，總算出現了 **Class** 的概念， **雖然它內部還是原型鏈的機制來實現**，但是我們總算有了新的方法，從我們熟悉的 **面向對象** 的方式來審視這門語言了，**Typescript** 對 **類的支持更加豐富，除了ES6、ES7有的內容，還添加了新的內容** ，首先我們來復習一下 **Class** ： 1. **類（Class）：定義了一切事物的抽象特點** **定義了一切事物的抽象特點** ，包括它的 **屬性** 和 **方法** ， 假如說 **它就是一張汽車的圖紙，上面描繪了如何制作汽車** 2. **對象（Object）：類的實例** 我們可以說 **一輛寶馬車是實例，一個奧迪車也是一個實例** 。 3. **面向對象（OOP）三大特性：封裝、繼承、多態** 1. **封裝** **封裝** ，就是說對 **數據操作的細節隱藏起來，只暴露對外的接口，外界調用端不需要，也可能不知道里面的細節，只能通過對外提供的接口來訪問該對象。** **** 2. **繼承** **繼承** 很好理解， **子類** 可以 **繼承父類** ，**子類除了擁有父類所有的特征外，還有一些更具體的特性。** **** 3. **多態** 由 **繼承** 產生了相關 **不同的類** ，對 **同一個方法可以有不同的響應，比如貓跟狗，都繼承自 animal（動物） 它們都繼承了自己 eat（吃） 的方法，此時針對某一個實例，我們無需了解它是貓或狗，我們可以直接調用 eat 這個方法，程序會自動判斷出來應該如何執行這個方法** 接下來我們根據上面講解的意思，來寫這么一個類 **class.js** ~~~ // ---------------------------------------- 1. 封裝 ----------------------------- // 基本類(動物基類) class Animal { constructor(name){ this.name = name } run(){ return `${this.name} 在奔跑` } } // 實例化函數 // const snake = new Animal('小狗') // console.log(snake.run()) // ---------------------------------------- 2. 繼承 ----------------------------- // 小狗繼承動物這個類（派生類） class Dog extends Animal { bark(){ return `${this.name} 在狂吠` } } // 小狗繼承了動物這個類的方法 const xiaobao = new Dog('旺財') console.log(xiaobao.run()) console.log(xiaobao.bark()) // ---------------------------------------- 3. 多態 ----------------------------- // 小貓繼承動物這個類（派生類） class Cat extends Animal { // 靜態方法 static categories = ['mammal'] constructor(name){ // 使用父類的屬性，ES6中我們可以通過類，我們使用extends實現基類(SuperType)與派生類(SubType)之間的繼承。在派生類的constructor中調用super()即可訪問基類的構造函數。super()負責初始化this，相當于ES5中的call和apply方法。 super(name) console.log(this.name) } run(){ // 方法重寫 // 調用父類方法 return `喵， ${super.run()}` } } const maomao = new Cat('小臭貓') console.log(maomao.run()) // 靜態屬性與方法，不需要new實例化，可以直接調用 console.log(Cat.categories) ~~~ 為什么要有 **靜態屬性** 或 **靜態方法**呢，因為 **Class 類里面的定義和實例狀態沒有太大的關系 。** >[success] ## Typescript 中的類 **Typescript** 中增強了 **Class 類** ，分別是 **Public、 Private、 Protected、 readonly** ，有了這 **4 種修飾符** ，我們就可以 **給類上的方法和屬性提供權限管理** ，因為 **有些內容，我們是不愿意暴露給外部使用的** 。 * **Public** ： **修飾的屬性或方法是共有的，默認使用的屬性或方法都是Public** * **Private** ： **修飾的屬性或方法是私有的，不能在聲明它的類的外部調用** * **Protected** ： **修飾的屬性或方法是受保護的，它跟 Private 類似，因為它在子類中是允許被訪問的** * **readonly** ： **只讀屬性，只可以讀取，不可以修改** 1. **Public** **Public** 就沒有什么可以講的了，因為默認就是 **Public** 2. **Private** 下面的 **run 函數** 前面添加了 **private 修飾符** **class.ts** ~~~ // 基本類(動物基類) class Animal { name: string; constructor(name){ this.name = name } private run(){ return `${this.name} 在奔跑` } } // 實例化函數 const snake = new Animal('小狗') console.log(snake.run()) ~~~ 如下，執行時就會報錯，加了 **private 修飾符** ，就變成了 **私有方法** ，外部不可以訪問。  3. **protected** **protected 有點像遺產，只有我與我的子女可以訪問，其他外部人員都不可以訪問** **class.ts** ~~~ // ---------------------------------------- 1. 封裝 ----------------------------- // 基本類(動物基類) class Animal { name: string; constructor(name){ this.name = name } protected run(){ return `${this.name} 在奔跑` } } // 實例化函數 const snake = new Animal('小狗') console.log(snake.run()) // ---------------------------------------- 2. 繼承 ----------------------------- // 小狗繼承動物這個類（派生類） class Dog extends Animal { bark(){ return `${this.name} 在狂吠` } } // 小狗繼承了動物這個類的方法 const xiaobao = new Dog('旺財') console.log(xiaobao.run()) console.log(xiaobao.bark()) // ---------------------------------------- 3. 多態 ----------------------------- // 小貓繼承動物這個類（派生類） class Cat extends Animal { // 靜態方法 static categories = ['mammal'] constructor(name){ // 使用父類的屬性，ES6中我們可以通過類，我們使用extends實現基類(SuperType)與派生類(SubType)之間的繼承。在派生類的constructor中調用super()即可訪問基類的構造函數。super()負責初始化this，相當于ES5中的call和apply方法。 super(name) console.log(this.name) } run(){ // 方法重寫 // 調用父類方法 return `喵， ${super.run()}` } } const maomao = new Cat('小臭貓') console.log(maomao.run()) // 靜態屬性與方法，不需要new實例化，可以直接調用 console.log(Cat.categories) ~~~ 4. **readonly** 有些時候我們希望有些 **屬性只能讀取不可以修改** ，這時候我們可以使用 **readonly 修飾符** **class.ts** ~~~ // 基本類(動物基類) class Animal { readonly name: string; constructor(name){ this.name = name } protected run(){ return `${this.name} 在奔跑` } } // 實例化函數 const snake = new Animal('小狗') snake.name = '小明' console.log(snake.run()) ~~~ **修改 name** 就會報錯