<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                企業??AI智能體構建引擎,智能編排和調試,一鍵部署,支持知識庫和私有化部署方案 廣告
                [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 修飾符** ,就變成了 **私有方法** ,外部不可以訪問。 ![](https://img.kancloud.cn/2e/b9/2eb998f19f83a08a93d9f18efe35560d_864x410.png) 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** 就會報錯 ![](https://img.kancloud.cn/97/96/9796d4f457a1d280a3c16ed7b1c4d059_632x395.png)
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看