JavaScript面向對象輕鬆入門之多態(demo by ES5、ES6、TypeScript)

来源:http://www.cnblogs.com/elonhu/archive/2017/07/02/7106818.html
-Advertisement-
Play Games

多態(Polymorphism)按字面的意思就是“多種狀態”,同樣的行為(方法)在不同對象上有不同的狀態。在OOP中很多地方都要用到多態的特性,比如同樣是點擊滑鼠右鍵,點擊快捷方式、點擊桌面空白處、點擊任務欄等彈出的菜單都是不同的。 ...


  多態(Polymorphism)按字面的意思就是“多種狀態”,同樣的行為(方法)在不同對象上有不同的狀態。
  在OOP中很多地方都要用到多態的特性,比如同樣是點擊滑鼠右鍵,點擊快捷方式、點擊桌面空白處、點擊任務欄等彈出的菜單都是不同的。

方法重寫(override):

  即子類定義一個與父類名字相同的方法,以此覆蓋父類方法,以此來實現不同的功能。

 1     function Animal(){}
 2     var AnimalP = Animal.prototype;
 3     AnimalP.eat = function(food){
 4         console.log('這個動物正在吃' + food);
 5     };
 6 
 7     function Snake(){}
 8     var SnakeP = extend(Snake,Animal);//extend函數請看上一節
 9     /*snake沒有對eat方法重寫,繼承的父類eat()方法*/
10     function Dog(){}
11     var DogP = extend(Dog,Animal);
12     DogP.eat = function(food){
13         /*對eat()方法重寫*/
14         /*上一章講過,也可以在這裡通過 Animal.eat.call(this,food)調用父方法;*/
15         console.log("這隻狗正在吃"+food);
16     };
17 
18     function Cat(){}
19     var CatP = extend(Cat,Animal);
20     CatP.eat = function(food){
21         console.log("這隻貓正在吃"+food);
22     };
23     var snake = new Snake();
24     snake.eat('老鼠');//log:這個動物正在吃老鼠
25     var dog = new Dog();
26     dog.eat('骨頭');//log:這隻狗正在吃骨頭
27     var cat = new Cat();
28     cat.eat('魚');//log:這隻貓正在吃魚

抽象類(abstract class):

  上面的代碼中,Snake類沒有實現自己的eat()方法,但有的時候我們希望子類一定要有某個方法(抽象方法),這樣可以規範子類的行為,這時候就要用到抽象類,
  ES5、ES6都沒有抽象類的概念的,所以我們只能通過模擬來實現,讓我們接著上面的代碼,假如我們要把Animal的eat()方法定義為抽象方法:

1     AnimalP.eat = function(food){
2         /*定義抽象方法(虛函數),如果子類沒有重寫這個方法,在執行這方法的時候就會拋出錯誤*/
3         throw '"' + this.constructor.name + "'類沒有eat()方法";
4     };
5     function Snake(){}
6     var SnakeP = extend(Snake,Animal);
7     var snake = new Snake();
8     snake.eat('老鼠');//throw:"Snake'類沒有eat()方法

 

方法重載(overload):

  我們一定寫過這樣的函數,根據傳入的參數不一樣(類型、參數個數),方法的運行結果也不一樣:

1 var run = function(speed){
2         if(typeof speed == 'number'){
3             console.log('跑的速度有' + speed + 'm/s');
4         }else if(typeof speed == 'string'){
5             console.log('跑的速度有' + speed);
6         }
7     }
8     run(15);//log:跑的速度有15m/s
9     run('20KM/h');//log:跑的速度有20KM/h

   但上面這樣寫明顯代碼難維護,可以把run方法作為一個介面,根據參數的類型執行不同方法,用在類中就向下麵一樣:

 1     function Dog(){}
 2     var DogP = Dog.prototype;
 3     DogP.run = function(speed){
 4         if(typeof speed == 'number'){
 5             this._runNumber(speed);
 6         }else if(typeof speed == 'string'){
 7             this._runString(speed);
 8         }else{
 9             throw '參數不匹配';
10         }
11     }
12     DogP._runString = function(speed){
13         console.log('這隻狗跑的速度有' + speed);
14     }
15     DogP._runNumber = function(speed){
16         console.log('這隻狗跑的速度有' + speed + 'm/s');
17     }
18     var dog = new Dog();
19     dog.run(15);//log:這隻狗跑的速度有15m/s
20     dog.run('20KM/h');//log:這隻狗跑的速度有20KM/h
21     dog.run([]);//throw:參數不匹配

  這就是方法重載的模擬,但實際上,ES5、ES6、typescipt都不支持語法上的方法重載,typescipt也只是支持函數重載。
  這是多態的另一種實現方式。

Demo by ES6:

 1     class Animal{
 2         eat(food){
 3             throw '"' + this.constructor.name + "'類沒有eat()方法";
 4         }
 5     }
 6     class Snake extends Animal{}
 7     class Dog extends Animal{
 8         eat(food){
 9             console.log("這隻狗正在吃"+food);
10         }
11     }
12     class Cat extends Animal{
13         eat(food){
14             console.log("這隻貓正在吃"+food);
15         }
16     }
17     let snake = new Snake();
18     snake.eat('老鼠');//throw:"Snake'類沒有eat()方法
19     let dog = new Dog();
20     dog.eat('骨頭');//log:這隻狗正在吃骨頭
21     let cat = new Cat();
22     cat.eat('魚');//log:這隻貓正在吃魚

 

Demo by TypeScript:

 1 abstract class Animal{//定義抽象類Animal
 2     constructor(){}
 3     abstract eat(food: string){}
 4     /*定義抽象方法eat(),並且限定傳入的參數類型是string,
 5     還可以定義返回值,介面等,如果子類不符合限定的規範,編譯的時候就會報錯。
 6     */
 7 }
 8 class Snake extends Animal{}//報錯,無法通過編譯,因為沒有定義eat()抽象方法
 9 class Dog extends Animal{
10     eat(food: string){
11         console.log("這隻狗正在吃"+food);
12     }
13 }
14 class Cat extends Animal{
15     eat(food: string){
16         console.log("這隻貓正在吃"+food);
17     }
18 }
19 let dog = new Dog();
20 dog.eat('骨頭');//log:這隻狗正在吃骨頭
21 let cat = new Cat();
22 cat.eat('魚');//log:這隻貓正在吃魚

 

後話

  如果你喜歡作者的文章,記得收藏,你的點贊是對作者最大的鼓勵;

  面向對象的主要知識點在這裡就講完了,這些東西僅僅是基礎,我講的肯定不夠完善,僅僅是為了讓大家快速入門,建議大家有時間的話還是系統的看書學習一下js OOP;

  本系列還有最後一章,會把前幾張講的知識點通過一個案例整合在一起,讓大家可以更好的消化吸收,大概會醞釀兩周的時間;

  大家有什麼疑問可以留言或私信作者,作者儘量第一時間回覆大家;

  如果老司機們覺得那裡可以有不恰當的,或可以表達的更好的,歡迎指出來,我會儘快修正、完善。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • [1]使用方法 [2]基本用法 [3]按鈕工具欄 [4]按鈕尺寸 [5]嵌套分組 [6]垂直排列 [7]等分按鈕 ...
  • Angular.js與Vue.js是非常有淵源的兩款前端框架,據Vue.js的官方網站描述,在其早期開發時,靈感來源就是Angular.js。而在很多方面,Vue.js也正像是中國的那句古話,“青出於藍而勝於藍”。今天,K就從下麵幾個方面來跟大家一起探討一下,Vue.js到底在哪些方面更“勝於藍”。 ...
  • 一、什麼是語義化標簽?1.那麼什麼叫做語義化呢?說的通俗點就是:就是給div起個外號,比如,網頁上的文章的標題就可以叫他標題,網頁上的各個文章,就可以叫他文章。 2.為啥使用語義化標簽?(1). 更容易被搜索引擎收錄。(2). 更容易讓屏幕閱讀器讀出網頁內容。(3). 能夠更好的體現頁面的主題。(4 ...
  • Vue.js 是一套構建用戶界面的漸進式框架。他自身不是一個全能框架——只聚焦於視圖層。因此它非常容易學習,非常容易與其它庫或已有項目整合。在與相關工具和支持庫一起使用時,Vue.js 也能完美地驅動複雜的單頁應用。他是基於AnjularJs 編寫的,所以和前者的語法特別相似,卻又使用簡潔了很多。 ...
  • 1 /*css 初始化 */ 2 html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; } 3 fieldset, img,i... ...
  • 1 js首先需要的函數 2 3 window.onload = function () { 4 function $(id){ 5 return document.getElementById(id); 6 } 7 function $arr(array){ ... ...
  • cursor 1.定義和用法 cursor 屬性規定要顯示的游標的類型(形狀)。 該屬性定義了滑鼠指針放在一個元素邊界範圍內時所用的游標形狀(不過 CSS2.1 沒有定義由哪個邊界確定這個範圍)。 2.屬性 需使用的自定義游標的 URL。 註釋:請在此列表的末端始終定義一種普通的游標,以防沒有由 U ...
  • [1]使用方法 [2]基本用法 [3]原理分析 [4]擴展用法 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...