JS 面向對象之繼承---多種組合繼承

来源:https://www.cnblogs.com/Joe-and-Joan/archive/2019/01/18/10286888.html
-Advertisement-
Play Games

1. 組合繼承:又叫偽經典繼承,是指將原型鏈和借用構造函數技術組合在一塊的一種繼承方式。 下麵來看一個例子: 組合繼承避免了原型鏈和借用構造函數的缺陷,融合它們的優點。 2. 原型式繼承 可以在不必預先定義構造函數的情況下實現繼承,其本質是執行對給定對象的淺複製。而複製得到的副本還可以得到進一步的改 ...


1. 組合繼承:又叫偽經典繼承,是指將原型鏈和借用構造函數技術組合在一塊的一種繼承方式。

下麵來看一個例子:

function SuperType(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
  }
  SuperType.prototype.sayName = function() {
    alert(this.name);
  }
  function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
  }
 
  //繼承方法
  SubType.prototype = new SuperType();
  SubType.prototype.sayAge = function() {
    alert(this.age);
  }
 
  var instance1 = new SubType("Nicholas", 29);
  instance1.colors.push("black");
  alert(instance1.colors); //red,blue,green,black
  instance1.sayName(); //Nicholas
  instance1.sayAge(); //29
 
  var instance2 = new SubType("Greg", 27);
  alert(instance2.colors); //red,blue,green
  instance2.sayName(); //Greg
  instance2.sayAge(); //27

組合繼承避免了原型鏈和借用構造函數的缺陷,融合它們的優點。

2. 原型式繼承

可以在不必預先定義構造函數的情況下實現繼承,其本質是執行對給定對象的淺複製。而複製得到的副本還可以得到進一步的改造。

function object(o) {
    function F(){};
    F.prototype = o;
    return new F;
  }
 
  var person = {
   name: "Nicholas",
   friends: ["Shelby", "Court", "Van"]
  };
 
  var antherPerson = object(person);
  antherPerson.name = "Greg";
  antherPerson.friends.push("Rob");
 
  var antherPerson = object(person);
  antherPerson.name = "Linda";
  antherPerson.friends.push("Barbie");
 
  alert(person.friends); //Shelby,Court,Van,Rob,Barbie
 

3. 寄生式繼承

與原型式繼承非常相似,也是基於某個對象或某些信息創建一個對象,然後增強對象,最後返回對象。為瞭解決組合繼承模式由於多次調用超類型構造函數而導致的低效率問題,可以將這個模式與組合繼承一起使用。

function object(o) {
    function F(){};
    F.prototype = o;
    return new F;
  }
  function createAnother(original) {
    var clone = object(original);
    clone.sayHi = function() {
      alert("Hi");
    };
    return clone;
  }
 
  var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
  };
 
  var anotherPerson = createAnother(person);
  anotherPerson.sayHi();

 

4. 寄生組合式繼承

集寄生式繼承和組合繼承的優點與一身,是實現基本類型繼承的最有效方式。

//繼承原型
  function extend(subType, superType) {
    function F(){};
    F.prototype = superType.prototype;
 
    var prototype = new F;
    prototype.constructor = subType;
    subType.prototype = prototype;
  }
 
  //超類方法
  function SuperType(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
  }
  SuperType.prototype.sayName = function() {
    return this.name;
  }
 
  //子類方法
  function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
  }
 
  //繼承超類的原型
  extend(SubType, SuperType);
 
  //子類方法
  SubType.prototype.sayAge = function() {
    return this.age;
  }
 
  var instance1 = new SubType("Shelby");
  var instance2 = new SubType("Court", 28);
 
  instance1.colors.push('black');
 
  alert(instance1.colors); //red,blue,green,black
  alert(instance2.colors); //red,blue,green
 
  alert(instance1 instanceof SubType); //true
  alert(instance1 instanceof SuperType); //true

這段例子的高效率體現在它只調用了一次SuperType構造函數,並且因此避免了在SubType.prototype上面創建不必要的多餘的屬性。與此同時,原型鏈還能保持不變。因此,還能正常使用instanceof 和 isPrototypeOf()。開發人員普遍認為寄生組合式繼承是引用類型最理想的繼承範式。


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

-Advertisement-
Play Games
更多相關文章
  • from: https://freefrontend.com/css-timelines/ https://bootstrapthemes.co/items/resources/timeline/ https://github.com/twbs/bootstrap/releases css: htm ...
  • 互聯網內各網路設備間的通信都遵循TCP/IP協議,利用TCP/IP協議族進行網路通信時,會通過分層順序與對方進行通信。分層由高到低分別為:應用層、傳輸層、網路層、數據鏈路層。發送端從應用層往下走,接收端從數據鏈路層網上走 ...
  • 091-100章總結 091. DOM簡介 什麼是DOM • DOM,全稱Document Object Model文檔對象模型。 • JS中通過DOM來對HTML文檔進行操作。只要理解了DOM就可以隨心所欲的操作WEB頁面。 • 文檔– 文檔表示的就是整個的HTML網頁文檔 • 對象– 對象表示將... ...
  • Document ...
  • 效果展示 包含技術點 1、分片上傳。 2、文件秒傳。 3、文件夾上傳 4、文件續傳。 5、文件拖拽上傳。 組件目錄 實現分析 分片上傳 通過H5 FileUpload對象可以實現文件上傳, mutiple屬性可以支持文件多選。拿到文件對象後,調用完整的分片上傳流程:計算MD5-添加文件-獲取鑒權信息 ...
  • 摘要: 理解瀏覽器渲染。 原文: "JavaScript是如何工作的: CSS 和 JS 動畫底層原理及如何優化它們的性能" 作者: "前端小智" "Fundebug" 經授權轉載,版權歸原作者所有。 這是專門探索 JavaScript 及其所構建的組件的系列文章的第 13 篇。 如果你錯過了前面的 ...
  • https://blogs.msdn.microsoft.com/dotnet/2019/01/10/announcing-ml-net-0-9-machine-learning-for-net/ https://marketplace.visualstudio.com/items?itemName ...
  • 既然選擇了遠方,便只顧風雨兼程! __HANS許 系列:零基礎搭建前後端分離項目 系列:零基礎搭建前後端分離項目 [email protected] 創建項目 Vue的Debug(調試) Vue的Http請求 提示:本篇圖片較多,所以篇幅較長。 在前面幾篇文章我們講了Vue的基本內容,語法,組件,插件等等。但例 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...