JavaScript面向對象--繼承 (超簡單易懂,小白專屬)

来源:https://www.cnblogs.com/zhangnan35/archive/2019/03/16/10539370.html
-Advertisement-
Play Games

一、繼承的概念 子類共用父類的數據和方法的行為,就叫繼承。 二、E55如何實現繼承?探索JavaScript繼承的本質 2.1構造函數之間的“複製粘貼” 第一條路是通過構造函數來繼承,這可以理解為子類直接複製了父類構造函數的代碼,然後按照一定的規矩“粘貼”在自己的構造函數中,為己所用。舉個例子: 如 ...


一、繼承的概念

  子類共用父類的數據和方法的行為,就叫繼承。

二、E55如何實現繼承?探索JavaScript繼承的本質

  2.1構造函數之間的“複製粘貼”

  第一條路是通過構造函數來繼承,這可以理解為子類直接複製了父類構造函數的代碼,然後按照一定的規矩“粘貼”在自己的構造函數中,為己所用。舉個例子:

  

 如果A要繼承B的屬性,是不是直接把this.name = name複製粘貼到A函數就可以了?簡單粗暴。

 所以在A中,直接執行B函數,不就等於執行了this.name = name嗎。

  

  直接這樣嘗試下,發現是不行的,這是因為B中的this指向B的實例化對象,A中的this指向A的實例化對象,所以要統一this的指向

  

  這樣,就完成了一次合乎規範的構造函數之間的“代碼複製粘貼”,也就是繼承。這其實也是後面ES6中super關鍵字的實現原理。

 

  2.2原型鏈上要“擠進一位來客”

  當然,這還是不夠的,因為在實際情況中,B這個構造函數還可以拓展一些方法和屬性到原型鏈上,比如:

  

  我們在構造函數B中拓展了一個skill方法,發現上面那種“複製粘貼”的方法不好使了對嗎?這是因為A的原型鏈和B的原型鏈還沒有“建立聯繫”,我們需要在A和B之間搭一座橋,把他們聯繫起來。

  熟悉基本原型鏈的同學都知道,原型鏈的“通信”是通過隱式原型(__proto__)來實現的。所以基本原型鏈是這樣的:

  

  這就是基本的原型鏈,現在的情況是,A要繼承B的屬性和方法,所以B得加入到原型鏈中,並且,B要在A的上面,所以理想的情況是不是應該像下麵這樣:

  

  實際上我們也確實是這麼做的,也就是令A.prototype.__proto__ = B.prototype

  控制台試一下,成功了。

  

  總結一下:ES5實現繼承需要兩步,第一:合乎規範的“代碼複製粘貼”;第二,原型鏈上“搭座橋”。

 

三,ES6實現繼承,其實只是換了種叫法

  首先,要明確JavaScript是沒有真正“類”的概念的,ES6中的類,就是ES5中構造函數。

  

  這件事是很容易驗證的,類A的類型列印出來,就是function。

   ES6實現類的繼承,是不是也要“兩步走”呢?答案是肯定的,看看ES6的繼承如何實現:

  

  其實原理是完全一樣的,extends相當於做了A.prototype.__proto__ = B.prototype這件事,而super則相當於執行了ES5中的B.call(this,name)這個操作,只是換個操作的名字向Java靠攏而已。


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

-Advertisement-
Play Games
更多相關文章
  • 1.最傳統方法 for迴圈 for… in for…of 雖然for… in 、 for… of 都能夠變曆數組,但是兩者還是有很大區別的,先說結論: 兩者的主要區別在於他們的迭代方式 推薦在迴圈對象屬性的時候,使用for in,在遍曆數組的時候推薦使用for of for…in 迴圈出來的是key ...
  • H5的新特性 1.語義化標簽 2.表單新特性 3.多媒體視頻(video)和音頻(audio) 4.web存儲 C3的新特性 1.選擇器:屬性選擇器E[attr],偽類選擇器E:nth-child(n),空偽類E:empty ,排除偽類E:not(selector) 2.顏色:新增了RGBA、HSL ...
  • 基礎知識點 1.水平垂直居中 子絕父相,子盒子設置絕對定位,設置top:50%;left:50%,margin-top:-50%;margin-left:-50%; 子絕父相,子盒子設置絕對定位,設置 left & top & right & bottom為0;margin: auto; 伸縮盒子, ...
  • 碼雲地址https://gitee.com/zenonia/gerenjianjie 截圖 代碼如下: ...
  • javaScript基礎 js中的註釋 單行註釋(格式://註釋內容) 多行註釋(格式:/* 註釋內容 */) 文本註釋(格式:/** 註釋內容 */)js語句 例如: var num = 8; 我能用var定義了一個保存數字8的變數num 語句塊:{聲明內容的區域} 註意:JS語句塊是由 { } ...
  • 最近研究了js的單元測試,分享一下心得。 說起單元測試以前還真是不太瞭解,這次索性瞭解一番,測試有很多包含單元測試,性能測試,安全測試和功能測試等幾方面,本次只介紹一下單元測試。 前端進行單元測試主要是為了提高自己的代碼質量,多組測試用例,驗證自己的代碼是否都能通過,這是在開發中很有必要的。需要倡導 ...
  • 勻速運動 (當需要物體做勻速運動直接調用statMove函數) 緩衝運動(越接近目標,速度越慢) 緩運運動比直線運動視覺性更好,所以很常用 1 function startMove(dom, targetPosetion) { 2 clearInterval(timer); 3 var speed ...
  • 續前文 "轉載: 中文輸進去,程式出得來,開發者發大財 LingaScript:中文化TypeScript" , 雖然其中常式使用了繁體中文語法, 但它同時也支持簡體中文語法. 註: 此文中VS Code的TypeScript環境設置為了中文, 因此錯誤信息也是中文. 方法見 "VS Code 有哪 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...