javascript 面向對象(實現繼承的幾種方式)

来源:https://www.cnblogs.com/chaixiaozhi/archive/2018/03/06/8515087.html
-Advertisement-
Play Games

1、原型鏈繼承 核心: 將父類的實例作為子類的原型 缺點: 父類新增原型方法/原型屬性,子類都能訪問到,父類一變其它的都變了 2、構造繼承 核心:使用父類的構造函數來增強子類實例,等於是複製父類的實例屬性給子類(沒用到原型) 缺點: 方法都在構造函數中定義, 只能繼承父類的實例屬性和方法,不能繼承原 ...


 1、原型鏈繼承

核心: 將父類的實例作為子類的原型

缺點:  父類新增原型方法/原型屬性,子類都能訪問到,父類一變其它的都變了

        function Person (name) {
            this.name = name;
        };

        Person.prototype.getName = function () {    //對原型進行擴展
            return this.name;
        };

        function Parent (age) {
            this.age = age;
        };

        Parent.prototype = new Person('老明');   //這一句是關鍵 //通過構造器函數創建出一個新對象,把老對象的東西都拿過來。

        Parent.prototype.getAge = function () {
            return this.age;
        };

//        Parent.prototype.getName = function () {   //可以重寫從父類繼承來的方法,會優先調用自己的。
//            console.log(222);
//        };

        var result = new Parent(22);
        console.log(result.getName());  //老明  //調用了從Person原型中繼承來的方法(繼承到了當前對象的原型中)  
        console.log(result.getAge());   //22   //調用了從Parent原型中擴展來的方法

 

2、構造繼承

基本思想
借用構造函數的基本思想就是利用call或者apply把父類中通過this指定的屬性和方法複製(借用)到子類創建的實例中。

因為this對象是在運行時基於函數的執行環境綁定的。也就是說,在全局中,this等於window,而當函數被作為某個對象的方法調用時,this等於那個對象。
call、apply 方法可將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。

所以,這個借用構造函數就是,new對象的時候(new創建的時候,this指向創建的這個實例),創建了一個新的實例對象,
並且執行Parent裡面的代碼,而Parent裡面用call調用了Person,也就是說把this指向改成了指向新的實例,
所以就會把Person裡面的this相關屬性和方法賦值到新的實例上,而不是賦值到Person上面,
所以所有實例中就擁有了父類定義的這些this的屬性和方法。

因為屬性是綁定到this上面的,所以調用的時候才賦到相應的實例中,各個實例的值就不會互相影響了。

核心:使用父類的構造函數來增強子類實例,等於是複製父類的實例屬性給子類(沒用到原型)

缺點: 方法都在構造函數中定義, 只能繼承父類的實例屬性和方法,不能繼承原型屬性/方法,無法實現函數復用,每個子類都有父類實例函數的副本,影響性能

      function Person (name) {
            this.name = name;
            this.friends = ['小李','小紅'];
            this.getName = function () {
                return this.name;
            }
        };

//        Person.prototype.geSex = function () {    //對原型進行擴展的方法就無法復用了
//            console.log("男");
//        };

        function Parent = (age) {
            Person.call(this,'老明');  //這一句是核心關鍵
            //這樣就會在新parent對象上執行Person構造函數中定義的所有對象初始化代碼,
            // 結果parent的每個實例都會具有自己的friends屬性的副本
            this.age = age;
        };

        var result = new Parent(23);
        console.log(result.name);    //老明
        console.log(result.friends);  //["小李", "小紅"]
     console.log(result.getName());  //老明
     console.log(result.age);    //23
     console.log(result.getSex());  //這個會報錯,調用不到父原型上面擴展的方法

 

3、組合繼承

組合繼承(所有的實例都能擁有自己的屬性,並且可以使用相同的方法,組合繼承避免了原型鏈和借用構造函數的缺陷,結合了兩個的優點,是最常用的繼承方式)

核心:通過調用父類構造,繼承父類的屬性並保留傳參的優點,然後再通過將父類實例作為子類原型,實現函數復用

缺點:調用了兩次父類構造函數,生成了兩份實例(子類實例將子類原型上的那份屏蔽了)

        function Person  (name) {
             this.name = name;
             this.friends = ['小李','小紅'];
         };

         Person.prototype.getName = function () {
             return this.name;
         };

        function Parent (age) {
            Person.call(this,'老明');  //這一步很關鍵
            this.age = age;
        };

        Parent.prototype = new Person('老明');  //這一步也很關鍵
        var result = new Parent(24);
        console.log(result.name);    //老明
        result.friends.push("小智");  //
        console.log(result.friends);  //['小李','小紅','小智']
        console.log(result.getName());  //老明
        console.log(result.age);    //24

        var result1 = new Parent(25);   //通過借用構造函數都有自己的屬性,通過原型享用公共的方法
        console.log(result1.name);  //老明
        console.log(result1.friends);  //['小李','小紅']

 

4、寄生組合繼承

核心:通過寄生方式,砍掉父類的實例屬性,這樣,在調用兩次父類的構造的時候,就不會初始化兩次實例方法/屬性,避免的組合繼承的缺點

缺點:堪稱完美,但實現較為複雜

        function Person(name) {
            this.name = name;
            this.friends = ['小李','小紅'];
        }

        Person.prototype.getName = function () {
            return this.name;
        };

        function Parent(age) {
            Person.call(this,"老明");
            this.age = age;
        }

        (function () {
            var Super = function () {};     // 創建一個沒有實例方法的類
            Super.prototype = Person.prototype;
            Parent.prototype = new Super();     //將實例作為子類的原型
        })();

        var result = new Parent(23);
        console.log(result.name);
        console.log(result.friends);
        console.log(result.getName());
        console.log(result.age);

 


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

-Advertisement-
Play Games
更多相關文章
  • JSONP是什麼?JSON全稱為JSON with Padding,是JSON的一種補充的使用方式,不是官方協議。 使用JSONP伺服器後臺要改動嗎?JSONP不同於一般的ajax請求返回json對象,JSONP返回的是script腳本。所以,使用JSONP時,伺服器後臺需要進行改動,如果依然返回的 ...
  • 首先,沒有第二題,沒有第二題的原因是,JavaScript中根本就沒有那種數據結構,儘管我在playground裡面調試出了正確的結果,但是也許是因為數據結構問題,最終沒能讓我通過。 所以我就拋棄第二題了。 Given a string, find the length of the longest ...
  • 前不久刷文章的時候看到了一篇關於聖杯和雙飛翼的佈局介紹,自己也是去學習了一下,這篇博文也是我為了總結自己學習的知識,嘻嘻。 國外提出的聖杯佈局和阿裡提出的雙飛翼都是為瞭解決三欄佈局,中間內容部分自適應並且最先被渲染,兩邊的寬度固定。這兩種佈局呈現的結果是一樣的,如下圖所示: 下麵將展示代碼公有部分: ...
  • 閱讀目錄 介紹 "網頁標題、文章標題、文章段落" 介紹 "字體大小、字體顏色、字體類型、字體位置、背景顏色" 介紹 "插入圖片" 介紹 "網頁內的超鏈接、網頁間的超鏈接" 介紹 "有序列表、無序列表" 介紹 "表格製作" 介紹 "其他一些常用元素" 一、網頁標題、文章標題、文章段落 代碼: 運行結果 ...
  • 懶載入:只顯示當前所能看到的頁面的內容,這樣做的好處可以減少伺服器的壓力,當頁面繼續往下拉的時候,再繼續載入內容。 預載入:一般用於圖片載入,預先載入圖片,還可以預先判斷圖片是否載入成功,如果載入不成功,可以使用本地圖片替換,這樣也能達到美觀的效果. 懶載入的主要代碼:if(imgHeight < ...
  • webpack-4.0更新日誌(翻譯) 前言 純手打翻譯,也有小部分比較生硬的翻譯,原諒那部分我也沒太懂😂 大改動 環境 不在支持Nodejs 4。源代碼已經更新到一個較高的ecmascript版本。 使用 你必須在兩種模式中選擇一個(mode或者--mode): production 或者 de ...
  • 怎麼學HTML5 HTML5是萬維網的核心語言,標準通用標記語言下的一個應用超文本標記語言(HTML)的第五次重大修改,一方面提升了用戶體驗,另一方面HTML5技術跨平臺,適配多終端,改變了傳統開發者需針對不同操作系統進行研發的局面。 面對不同層次的人群,學習可分為以下幾個大類。話不多說,直接上乾貨 ...
  • 一、瀏覽器相容性 vue: ie9+ react: ie8+ 二、安裝使用 vue:1、直接引入 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> 後直接寫vue代碼(小項目) 2、依賴node.j ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...