一文讓你搞懂javascript如何實現繼承

来源:https://www.cnblogs.com/999-ganmaoling/archive/2023/05/11/17391894.html
-Advertisement-
Play Games

一、本文想給你聊的東西包含一下幾個方面：（僅限於es6之前的語法哈，因為es6裡面class這關鍵字用上了。。） 1.原型是啥？原型鏈是啥？ 2.繼承的通用概念。 3.Javascript實現繼承的方式有哪些？ 二、原型是啥？原型鏈是啥？ 1.原型是函數本身的prototype屬性。 首先js和ja ...


一、本文想給你聊的東西包含一下幾個方面：（僅限於es6之前的語法哈，因為es6裡面class這關鍵字用上了。。）

1.原型是啥？原型鏈是啥？

2.繼承的通用概念。

3.Javascript實現繼承的方式有哪些？

 

二、原型是啥？原型鏈是啥？

1.原型是函數本身的prototype屬性。

首先js和java不一樣，js頂多算是一個基於對象的語言，而不是標準的面向對象的語言。

所以我們談繼承，只能是基於new關鍵字作用域構造函數的場景。

上代碼：

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

    console.log(Person.prototype);

                                                                                                                                               代碼 1

                                          圖1

 定義一個構造函數，預設起原型就是一個Object對象，相當於一個new Object()。

而且還有一個new出來的對象有一個隱式原型屬性__proto__，也指向了構造函數的原型。

也就是說： Person.prototype   === new Person().__proto__。

用圖來表示就是：

                                                                                圖2

 

在上圖中，我把Object.prototype 叫rootObject，那麼rootObject中就有了所有對象都共用的方法，如下圖：

                                           圖3

 如果person.toString()方法調用，那麼起自身沒有toString方法，就是走__proto__指向的原型對象中找，而object中也沒有

所有就找到了根對象。所以構造函數原型對象存在的意義是使得該構造函數產生的對象可以共用屬性和方法。

所以原型對象中的屬性和方法就類似於java類中定義的static屬性和方法，所有對象都可以共用。

那麼如上圖2所示，person  ->  object  -> rootObject之間就形成了原型鏈。

 

二、繼承的通用概念

如果一個類B繼承了類A，在java中這些寫：class B extends A{}  

那麼類B就擁有了A中的所有屬性和方法。

繼承是面向對象編程的一大特性，目的很簡單，就是復用。

 

三、javascript中實現繼承的方式有哪些？

1.原型鏈

假如有個構造函數Student想要繼承Person函數，想擁有Person中的屬性和方法，可以使用原型鏈來實現。

上代碼

// 定義Person
function Person(name,age) {
    // 保證屬性有初始值
    this.name = name ? name : "";
    this.age = (age || age === 0) ? age : 0;
    this.setName = function (name) {
        this.name = name;
    }
    this.setAge = function (age) {
        this.age = age;
    }
    this.getPersonInfo = function () {
        return "[Person]: " + this.name + "_" + this.age;
    }
}
// 定義一個所有Person對象都能共用的屬性和方法
Person.prototype.typeDesc = "人類";
Person.prototype.hello = function () {
    console.log("hello");
}
function Student(score) {
    this.score = score;
    this.setScore = function (score) {
        this.score = score;
    }
    this.getStudentInfo = function () {
        return "[Student:]: " + this.score;
    }
}
// 修改Student的原型
Student.prototype = new Person();

let student1 = new Student(90);
let student2 = new Student(80);
let student3 = new Student(70);

console.log(student1.typeDesc);  //  能訪問

student1.setName("aa");
student1.setAge(99);
console.log(student1.getPersonInfo()); // 能訪問

console.log(student1.getStudentInfo()); // 能訪問

                                                                                                                                                  代碼2

給你一張圖吧  更清楚

                                                                                                                     圖 4

 

老鐵，你思考下？雖然看似student1對象能訪問了能訪問了Person中定義的方法和屬性，但是有沒有問題呢？

 本來name，age是對象的私有屬性，不屬於“類級別”，但是他們卻出現在了Student的原型對象中，而且此時如果你

console.log(student2.name)，發現其訪問到了原型person對象的name屬性了，是個初始的空字元串，這裡為什麼要在Person函數中使用初始值，

這個在工作中是很常見的，對象創建出來一般屬性都是需要初始值的。

所以原型鏈實現繼承，缺點是：原型對象中多出了一些沒必要的屬性。

而且由於student2和student3等其他Student的對象仍然能訪問到原型對象person中的屬性，這會讓人產生錯覺，以為他們也擁有name，age的私有屬性。

於是，你接著看下麵的方式。

 

2.復用構造方法

這東西嚴格來講，我感覺不太像繼承，但是好像用起來還挺好用，起碼省事了。。。。

繼續哈，上代碼啊（改變一下代碼2）

    // 定義Person
    function Person(name,age) {
        // 保證屬性有初始值
        this.name = name ? name : "";
        this.age = (age || age === 0) ? age : 0;
        this.setName = function (name) {
            this.name = name;
        }
        this.setAge = function (age) {
            this.age = age;
        }
        this.getPersonInfo = function () {
            return "[Person]: " + this.name + "_" + this.age;
        }
    }
    // 定義一個所有Person對象都能共用的屬性和方法
    Person.prototype.typeDesc = "人類";
    Person.prototype.hello = function () {
        console.log("hello");
    }
    function Student(name, age, score) {
        // 使用call調用函數，可以改變this指向，服用了父類的構造方法
        Person.call(this, name,age);
        this.score = score;
        this.setScore = function (score) {
            this.score = score;
        }
        this.getStudentInfo = function () {
            return "[Student:]: " + this.score;
        }
    }
    let student1 = new Student("aa", 99, 99);
    console.log(student1.typeDesc);  // undefined
    console.log(student1.hello);   // undefined
    console.log(student1.getStudentInfo());  // 能訪問
    console.log(student1.getPersonInfo());   // 能訪問

                                                                                                                          代碼 3

此時雖然，雖然復用了Person構造函數，但是原型Person的原型student1無法訪問到。

缺點很明顯：雖然復用了Person的構造函數，但是卻沒有繼承Person的原型。

好了，我們演變一下。。

 

3.共用原型

基於上述代碼3，在Student函數後面加入如下代碼：

Student.prototype = Person.prototype;

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  代碼 4

其實就是兩個構造函數都指向同一原型。。

此時發現，student1能訪問Person原型上的內容了。

還是要問一下，這樣就行了嗎？

問題：一旦Student向原型裡面加了變數或者函數，或者修改原型中的變數內容時，哪怕是Person構造出來的對象，

同樣也感知到了。。。。  這樣互相影響的話，兩個構造函數的原型中的變數和函數摻雜在一起，確實不合適？

那怎麼辦呢？

來吧，看看下麵的變種。

 

4.聖杯模式

說實話我也不知道為啥取名叫聖杯模式，感覺也不是官方的命名，有些人還叫其他名字。

把代碼4替換成如下代碼：

    // 定義空函數
    function F() {}
    // 空函數和Person共用原型
    F.prototype = Person.prototype;
    // 改變Student的原型
    Student.prototype = new F();
    // 添加原型上的構造函數
    Student.prototype.constructor = Student;

                                                                                                             代碼 5

這樣做Student的原型和Person的原型就不是一個對象了，而且不像原型鏈那樣，由於new Person()作為Student.prototype導致該原型對象中包含了Person對象的私有屬性。

來吧，給你個最終版本的代碼，希望能幫助到你，能力有限，相互借鑒哈。。

 

5.聖杯模式+復用構造函數（算是比較完美了）

 

    // 定義Person
    function Person(name,age) {
        // 保證屬性有初始值
        this.name = name ? name : "";
        this.age = (age || age === 0) ? age : 0;
        this.setName = function (name) {
            this.name = name;
        }
        this.setAge = function (age) {
            this.age = age;
        }
        this.getPersonInfo = function () {
            return "[Person]: " + this.name + "_" + this.age;
        }
    }
    // 定義一個所有Person對象都能共用的屬性和方法
    Person.prototype.typeDesc = "人類";
    Person.prototype.hello = function () {
        console.log("hello");
    }
    function Student(name, age, score) {
        // 使用call調用函數，可以改變this指向，服用了父類的構造方法
        Person.call(this, name,age);
        this.score = score;
        this.setScore = function (score) {
            this.score = score;
        }
        this.getStudentInfo = function () {
            return "[Student:]: " + this.score;
        }
    }
    // 定義空函數
    function F() {}
    // 空函數和Person共用原型
    F.prototype = Person.prototype;
    // 改變Student的原型
    Student.prototype = new F();
    // 添加原型上的構造函數
    Student.prototype.constructor = Student;


    let student1 = new Student("aa", 99, 99);
    console.log(student1.typeDesc);  // 人類
    student1.hello();   // hello
    console.log(student1.getStudentInfo());  // 能訪問
    console.log(student1.getPersonInfo());   // 能訪問

    let student2 = new Student("bb", 33, 88);
    student2.setScore(89);
    // student2和student1都各自有自己的私有屬性，並不會受影響。
    console.log(student1.getStudentInfo());
    console.log(student2.getStudentInfo());

    Student.prototype.temp = "新加屬性";
    console.log(Person.prototype.temp);  // undefined

                                                                                                               代碼 6

總結：可能我們在平常工作中很少這樣寫代碼，或者用到這種繼承模式，但是框架中很有可能會用到這些思想。

聖杯模式是共用原型模式的一個變種，使用空函數F來作為中間橋梁，巧妙得解決了共用原型模式的問題，同時

也解決了原型鏈模式的產生多餘屬性的問題。

 


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

-Advertisement-
Play Games
更多相關文章
  • Apache DolphinScheduler 開源之夏學生項目申請開啟，6 大課題等你來拿萬元獎金！
    開源之夏 2023 學生報名已經正式開啟！Apache DolphinScheduler 今年繼續參與開源之夏的活動，2023 年 4 月 29 日-6 月 3 日 15:00 UTC+8，同學們可以在開源之夏官網 https://summer-ospp.ac.cn/ 找到 Apache Dolph ...
  • 共築數字化未來，金山辦公攜手華為雲完成文檔中心和GaussDB適配
    摘要：金山辦公攜手華為雲完成金山辦公自主研發的“WPS文檔中心系統”與華為雲GaussDB相互相容性測試認證，並獲得華為雲授予的《技術認證書》。 本文分享自華為雲社區《共築數字化未來 金山辦公攜手華為雲完成文檔中心和GaussDB適配》，作者：GaussDB 資料庫。 近日，金山辦公攜手華為雲完成金 ...
  • 數據剖析更靈活、更快捷，火山引擎 DataLeap 動態探查全面升級
    更多技術交流、求職機會，歡迎關註位元組跳動數據平臺微信公眾號，回覆【1】進入官方交流群 近期，火山引擎 DataLeap 上線“動態探查”能力，為用戶提供全局數據視角、完善的抽樣策略，提高數據探查的靈活度以及響應速率。 傳統的數據探查是基於庫表的全量探查，由後端引擎執行，通過自動化檢查數據成分、關係、 ...
  • Oracle 定時任務job實際應用
    (Oracle 定時任務job實際應用) 一、Oracle定時任務簡介 Oracle定時任務是在oracle系統中一個非常重要的子系統，運用得當，可以大大提高我們系統運行和維護能力。oracle定時任務的功能，可以在指定的時間點自行執行任務。 那麼在實際工作中，什麼樣的場景會用到定時任務呢？下麵是在 ...
  • 跑步課程導入能力，助力科學訓練
    HUAWEI Health Kit為開發者提供用戶自定義的跑步課程導入介面，便於用戶在華為運動健康App和華為智能穿戴設備上查看來自生態應用的訓練課表，開啟科學、適度的運動訓練。 跑步課程導入能力支持生態應用在獲取用戶的華為帳號授權後，將跑步課程數據寫入至華為運動健康App，併在已有的華為智能穿戴設 ...
  • 京喜APP - 圖片庫優化
    京喜APP早期開發主要是快速原生化迭代替代原有H5，提高用戶體驗，在這期間也積累了不少性能問題。之後我們開始進行一些性能優化相關的工作，本文主要是介紹京喜圖片庫相關優化策略以及關於圖片相關的一些關聯知識。 ...
  • 鯨鴻動能廣告接入如何高效變現流量？
    廣告是App開發者最常用的流量變現方法之一，當App擁有一定數量用戶時，開發者就需要考慮如何進行流量變現，幫助App實現商業可持續增長。 鯨鴻動能流量變現服務是廣告服務依托華為終端強大的平臺與數據能力為開發者提供的App流量變現服務，開發者通過該服務可以在自己的App中獲取並向用戶展示精美的、高價值 ...
  • 一統天下 flutter - 插件: flutter 使用 web 原生控制項，並做數據通信
    源碼 https://github.com/webabcd/flutter_demo 作者 webabcd 一統天下 flutter - 插件: flutter 使用 web 原生控制項，並做數據通信 示例如下: lib\plugin\plugin2.dart /* * 插件 * 本例用於演示 flu ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類