跟面向對象卯上了,看看ES6的“類”

来源:https://www.cnblogs.com/zhangnan35/archive/2018/02/26/8475994.html
-Advertisement-
Play Games

上回我們說到ES5的面向對象,以及被大家公認的最佳的寄生組合式繼承。時代在進步,在ES6中對於面向對象這個大boss理所應當地進行了一次大改,從原先那種比較長的寫法轉變為“小清新”寫法。我們一起來看一下。 在ES6中是有類這個概念,而且是堂而皇之地有了。 我們來看一串代碼: 其實我們用的依然是上回說 ...


  上回我們說到ES5的面向對象,以及被大家公認的最佳的寄生組合式繼承。時代在進步,在ES6中對於面向對象這個大boss理所應當地進行了一次大改,從原先那種比較長的寫法轉變為“小清新”寫法。我們一起來看一下。

  在ES6中是有類這個概念,而且是堂而皇之地有了。

  我們來看一串代碼:

  

 1 class Dad {
 2     constructor(name="無姓名",age=0){
 3         this.name=name;
 4         this.age=age;
 5     }
 6 
 7     surface(){
 8         console.log(this.name,this.age);
 9     }
10 }
11 
12 class Sons extends Dad {
13     constructor(name,age){
14         super(name,age);
15     }
16 }
17 
18 const son1=new Sons("張花花",16);
19 son1.surface();

  其實我們用的依然是上回說的那個例子,在ES6中,用extends來實現對父類的繼承,同時在構造器中調用super方法實現子類給父類傳參,這裡我們傳入張花花這個妹子作為參數,果然成功地調用到了父類的surface方法。註意,這裡在類中定義的這個方法,其實本質上就是構造函數Dad的prototype裡面的方法。

  當我說到這裡時,也許小伙伴們會有少許震驚吧,exo me?Dad不是類嗎,怎麼變方法了。我們在控制臺中測一測:

  

  哇!多麼恐怖,真的就是個function,其實ES6中類的概念只不過是對ES5中相關概念的包裝,說得好聽一點就是對語法糖的抽象,只是看起來確實更加簡單了。對於上面這個例子,我們繼承了父類的surface方法,也可以自己寫一個方法來覆蓋它。

  

  這回我們在子類裡面又寫了一個surface方法,成功將父類繼承下來的同名方法覆蓋了。


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

-Advertisement-
Play Games
更多相關文章
  • <div align=center><img............></div> ...
  • 一、盒子模型 標準盒子模型 從下圖可以看到標準 w3c 盒子模型的範圍包括 content、padding、border、margin,並且 content 部分不包含其他部分。 怪異盒子模型 從下圖可以看到 ie 盒子模型的範圍也包括 margin、border、padding、content,和 ...
  • 前面的話 本文是vscode使用中遇到問題的解決辦法總結 CPU100% 有時,vscode會出現CPU利用率100%的情況,兩個rg.exe占用了全部的CPU。解決辦法如下 文件>首選項>設置, 搜索設置 "search.followSymlinks" :false; emmet 若想在jsx中使 ...
  • ajax跨域問題的解決思路主要分為3種: 1.瀏覽器限制解決思路:不讓瀏覽器做出限制解決方法:通過指定參數,讓瀏覽器不做跨域校驗評價:價值不大,需要每個人都做改動,而且改動是客戶端的改動 2.XHR請求解決思路:不使用XHR解決方法:JSONP缺點:無法滿足現有的開發要求 3.跨域(重要)解決思路: ...
  • 本文最初發表於 "博客園" ,併在 "GitHub" 上持續更新 前端的系列文章 。歡迎在GitHub上關註我,一起入門和進階前端。 以下是正文。 CSS 預處理器 為什麼要有 CSS 預處理器 CSS基本上是設計師的工具,不是程式員的工具 。在程式員的眼裡,CSS是很頭痛的事情,它並不像其它程式語 ...
  • 簡要介紹:箭頭函數中的this,指向與一般function定義的函數不同,箭頭函數this的定義:箭頭函數中的this是在定義函數的時候綁定,而不是在執行函數的時候綁定。 (1)一般函數this指向在執行是綁定 當運行obj.say()時候,this指向的是obj這個對象。 (2)所謂的定義時候綁定 ...
  • JS基礎 頁面由三部分組成: + html:超文本標記語言,負責頁面結構 + css:層疊樣式表,負責頁面樣式 + js:輕量級的腳本語言,負責頁面的動效和數據交互 小總結:結構,樣式和行為,三者相分離 + 在html頁面中寫結構 + 通過 link標簽的href屬性,引入css樣式 + 通過scr ...
  • 整個前端開發的工作流程 1. 產品經理提出項目需求 2. UI出設計稿 3. 前端人員負責開發靜態頁面(跟前端同步的後臺人員在準備數據) 4. 前後臺的交互 5. 測試 6. 產品上線(後期項目維護) 互聯網原理 1. 當用戶在瀏覽器輸入網址的時候,就會發送到對應的伺服器,請求該網址對應的網頁信息 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...