理解原型與原型鏈

来源:https://www.cnblogs.com/jofun/archive/2018/04/09/8746511.html
-Advertisement-
Play Games

原型與原型鏈是學習JavaScript這門語言不能不理解的兩個重要概念,為什麼?因為JavaScript是一門基於原型的語言。 怎麼理解“JavaScript是一門基於原型的語言”?在軟體設計模式中,有一種模式叫做原型模式,JavaScript正是利用這種模式而被創建出來。先來瞭解下原型模式的概念... ...


原型與原型鏈是學習JavaScript這門語言不能不理解的兩個重要概念,為什麼?因為JavaScript是一門基於原型的語言。

怎麼理解“JavaScript是一門基於原型的語言”?在軟體設計模式中,有一種模式叫做原型模式,JavaScript正是利用這種模式而被創建出來。先來瞭解下原型模式的概念:原型模式是用於創建重覆的對象,同時又能保證性能。這種類型的設計模式屬於創建型模式,它提供了一種創建對象的最佳方式。這種模式是實現了一個原型介面,該介面用於創建當前對象的克隆。原型模式的目的是用原型實例指定創建對象的種類,並且通過拷貝這些原型創建新的對象。也就是說利用已有的一個原型對象,可以快速地生成和原型對象一樣的新對象實例。

 

原型:

原型到底是什麼?原型是一個可以被覆制(或者叫克隆)的一個類,通過複製原型可以創建一個一模一樣的新對象。通俗的說,原型就是一個模板,在設計語言中更準確的說是一個對象模板

 

看下麵一段代碼來理解原型:

var Person = function(name){
    this.name = name;
}
            
Person.prototype.sayHi = function(){
    console.log("Hello! I am " + this.name + ".");
}
            
var joe = new Person("joe");
var john = new Person("john");
            
joe.sayHi();    //Hello! I am joe.
john.sayHi();   //Hello! I am john.

從上面的代碼可以看出來,原型(Person)定義了一些公用的屬性和方法;利用原型(Person)創建出來的新對象實例(joe和john對象)會共用原型(Person)的所有屬性和方法。

 

把代碼修改一下:

"use strict";

var Person = function(name){
    this.name = name;
}
            
var joe = new Person("joe");
var john = new Person("john");

Person.prototype.sayHi = function(){
    console.log("Hello! I am " + this.name + ".");
}
            
joe.sayHi();    //Hello! I am joe.
john.sayHi();   //Hello! I am john.

這次把新創建的對象(joe和John)提前到原型(Person)的sayHi方法定義之前,並使用嚴格模式。原型(Person)的sayHi方法依然會被共用出去,所以原型(Person)的屬性和方法總是被原型實例所共用

 

再來修改下代碼:

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

Person.prototype.sayHi = function(){
    console.log("Hello! I am " + this.name + ".");
}

var joe = new Person("joe");
var john = new Person("john");

joe.sayHi();    //Hello! I am joe.
john.sayHi();   //Hello! I am john.

joe.getName = function(){
    console.log(this.name);
}

joe.getName();    //joe
john.getName();   //undefined

 這次為新對象實例(joe)添加getName方法,最後只有實例(joe)擁有該方法,而另一個實例(john)並沒有getName方法,這說明:通過原型創建的新對象實例是相互獨立的

也正是因為這樣對象的使用才能更加靈活、更加易於擴展。

 

原型鏈:

在javascript中,所有的對象都擁有一個__proto__屬性指向該對象的原型(prototype)。在上面的代碼中,執行console.log(joe.__proto__)後在控制台可以看到輸出了原型(Person),然後繼續執行console.log(Person.__proto__),控制台列印的結果是function(){},為什麼Person的原型是function呢?這是因為Person是一個構造函數,它的本質就是一個函數。在javascript中函數是一等對象。

現在用箭頭符號來表示上面原型創建的過程:

joe.__proto__  =>  Person,

Person.__proto__  =>  function(){}

由此可見,原型鏈記錄了原型對象創建的整個過程,因此,我給原型鏈添加一個概念:原型鏈是原型對象創建過程的歷史記錄。

 

原型設計帶來的問題:

當查找一個對象的屬性時,JavaScript 會根據原型鏈向上遍歷對象的原型,直到找到給定名稱的屬性為止。直到到達原型鏈的頂部仍然沒有找到指定的屬性,就會返回 undefined。

 

使用 for in 迴圈可以遍歷對象所有的屬性,包括該對象在原型鏈中的屬性,如:

var A = {
    a:1,
    b:2
};
                
var B = Object.create(A);
var C = Object.create(B);
            
B.c = 3;
C.d = 4;

console.log(c)    //{d:4}
            
for(var key in c){
    console.log(c[key])
}

//會在控制臺中依次列印出4 3 1 2 

註意在控制臺中列印的順序是 4 3 1 2,而不是 1 2 3 4。為什麼?因為C的原型是B,B的原型是A。C對象只有一個d屬性,執行for...in時先返回C.d,然後在從C的原型(B)中查找到並返回B.c,再從B的原型(A)中查找到並返回A.a和A.b,最後從A的原型(Object)中查找,發現Object中沒有任何屬性,於是結束for...in。所以最後的結果是 4 3 1 2。這就解釋了原型鏈繼承時查找屬性的過程是先查找自身屬性,當自身屬性不存在時,會在原型鏈中逐級查找。

有時只需檢查對象自身的屬性,那麼,這種消耗就是一種浪費,怎麼解決呢?

 

hasOwnProperty 函數:

hasOwnProperty 函數可以用來檢查對象自身是否含有某個屬性,返回值是布爾值,當屬性不存在時不會向上查找對象原型鏈。

 

在上面的代碼中添加下麵的代碼,看看 hasOwnProperty 和 for in 的區別:

...

ifvar "a" in C){
    console.log(c["a"]) //屬性 a 是原型鏈上的屬性, 輸出 1
}

if(C.hasOwnProperty("a")){
    console.log(c["a"]) //屬性 a 不是自身屬性,不會執行這一步
}

hasOwnProperty 函數只能檢查對象是否擁有某個屬性,那如何遍歷對象的自身屬性?

 

getOwnPropertyNames 函數:

getOwnPropertyNames 函數可以獲取對象所有的自身屬性,返回值是由對象自身屬性名稱組成的數組,同樣不會向上查找對象原型鏈。

如:

console.log(Object.getOwnPropertyNames(C))  //輸出 ["d"]

 

利用getOwnPropertyNames 函數遍歷所有對象所有自身屬性,例:

(fucntion(){
    var
    o = {a:1, b:2},
    propertys = Object.getOwnPropertyNames(o),
    len = propertys.length;

    for(var i = 0; i < len; i++){
        var key = propertys[i];
        console.log(o[key])      //輸出 1, 2
    }
})();

 

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

-Advertisement-
Play Games
更多相關文章
  • 在我們使用MySQL資料庫時,字元亂碼,對我們來說是一個很頭疼的問題。今天筆者就來教大家如何徹底解決更改預設字元集以及字元亂碼問題。 當我們使用壓縮包進行MySQL安裝後,系統會使用預設的字元集,這時就會產生亂碼。 方案: 來到MySQL安裝路徑下,創建一個my.ini文件(如果有my-defaul ...
  • 1.1 SQL概述 1.1.1 SQL語句介紹 結構化查詢語言(Structured Query Language)簡稱SQL,是關係型資料庫管理系統都需要遵循的規範。不同的資料庫生產廠商都支持SQL語句,但都有特有內容。 1.1.2 SQL語句分類 SQL分類: 數據定義語言:簡稱DDL(Data ...
  • 在升級一個SQL Server 2000的資料庫時,遇到了一致性錯誤,其中有幾個錯誤是元數據損壞(metadata corruption),特意研究了一下這個案例,因為以前也零零散散的遇到過一些一致性相關錯誤,但是難得遇到元數據損壞的案例。 如下所示,資料庫從SQL Server 2000還原到SQ... ...
  • 在實現一個問題的時候,同樣的結果我寫了兩個sql。 sql1 sql2 在效率問題上詢問了前輩,得到的建議是使用第二個,因為分組跟子查詢都會影響效率,相比之下分組好一點。 另外產生的一個問題是,如果使用.net並使用c#語言實現sql的話,第一個sql是無法(在我的能力範圍內)使用拉姆達查詢對象的, ...
  • 資料庫的三大特性可謂是:實體屬性和關係。 實體:表; 屬性:表中的數據(欄位); 關係:表與表之間的關係。 資料庫設計三大範式(重點): 第一範式(1NF):數據表中的每一列(每個欄位)必須是不可拆分的最小單元,也就是確保每一列的原子性; 第二範式(2NF):滿足1NF後,要求表中的所有列,都必須依 ...
  • 一、用Log列印日誌 二、Toast用法 三、在活動中使用Menu 首先在res目錄下新建menu文件夾,接著在這個文件夾下新建一個名叫main的菜單文件,在main.xml中添加如下代碼 回到Activity中重寫onCreateOptionsMenu()方法,編寫如下代碼(返回true表示允許創 ...
  • 一、view鉤子 view鉤子有2個,ngAfterViewInit和ngAfterViewChecked鉤子。 1、實現ngAfterViewInit和ngAfterViewChecked鉤子時註意事項 以父組件調用子組件方法 中例子為基礎,在父組件中實現ngAfterViewInit和ngAft ...
  • 一、什麼是slot 在使用組件時,我們常常要像這樣組合它們: 當需要讓組件組合使用,混合父組件的內容與子組件的模板時,就會用到slot , 這個過程叫作內容分發( transclusion )。 註意兩點: 1.< app>組件不知道它的掛載點會有什麼內容。掛載點的內容是由<app >的父組件決定的 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...