初始原型鏈(一)

来源:http://www.cnblogs.com/xiabaoying/archive/2017/09/16/7532834.html
-Advertisement-
Play Games

前端面試經常會問關於原型鏈的知識,今天我總結了一下關於原型鏈的內容,希望對廣大小白一點點參考~ 什麼是原型? 在 js 中,對象都有 __proto__ 屬性, 就是指這個對象的原型,如果構造函數 A 實例化一個對象 B,那麼 A.prototype 就是 B 的原型。也就是: 什麼是原型鏈? 介紹 ...


前端面試經常會問關於原型鏈的知識,今天我總結了一下關於原型鏈的內容,希望對廣大小白一點點參考~

什麼是原型?

在 js 中,對象都有 __proto__ 屬性, 就是指這個對象的原型,如果構造函數 A 實例化一個對象 B,那麼 A.prototype 就是 B 的原型。也就是:

  function A(){}
  
  var B = new A();

  B.__proto__ == A.prototype

什麼是原型鏈?

介紹完原型,那麼就必須說原型鏈了。

剛纔提到,每個對象都有 __proto__屬性,指向其構造函數的 prototype, 而 prototype 的值也是一個對象啊,所以就形成一條鏈,稱為原型鏈。

舉個例子:

cat 的原型鏈

我們創建一個叫做 Animal 的類, 並實例化一個對象 cat,我們來一點一點探索 cat 所處的原型鏈。

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

var cat = new Animal("cat");

cat 由 Animal 實例化而來,那麼就之前的說法,cat 的 __proto__ 指向 Animal 的 prototype:

 

的確如此!

接下來考慮到 Animal 的 prototype 也是一個對象,也有原型 ,那麼 Animal.prototype 的 __proto__  有指向什麼呢?

我們分析到 Animal 的 prototype 是一個對象, 那麼應該由 Object 構造,這麼說,Animal.prototype.__proto__  應該指向 Object.prototype 。

Object.prototype 也是一個對象啊,那麼它的原型又是什麼? 

原型鏈的定義中提到,原型鏈的終點指向 null 。所以, Object.prototype.__proto__ 應該指向  null。

小結

實例化 cat  有以下關係:

1. cat 由 Animal 構造,所以有:cat.__proto__ == Animal.prototype;

2. Animal.prototype是一個對象,由 Object 構造,所以有:Animal.prototype.__proto__  == Object.prototype;

3. 原型鏈的終點指向 null,所以有:Object.prototype.__proto__ == null;

也就是:

cat.__proto__.__proto__.__proto__ == null;

圖示:

 

 這就是 cat 的原型鏈了,我們知道了什麼是原型鏈,那麼原型鏈有什麼用?

原型鏈的作用

 當我們用一個構造函數實例化很多不同的對象,而又希望給這些對象綁定相同的方法,就可以綁定到它們的構造函數上去。

舉個例子:

我們想讓所有的字元串都擁有一個去掉空格的方法,調用這個方法,就能去掉字元串中的所有空格。我們只需要給 String.prototype 綁定一個方法:

String.prototype.trim = function(){
        return this.replace(/\s+/g,"");
    };


    var str = "This is a good day!";
    console.log(str.trim());

//列印出 Thisisagoodday!

原型鏈的屬性查找規則

 當從對象搜尋一個屬性或者方法的時候,會遵循以下規則:

1. 先從本身擁有的屬性或方法查找,如果對象本身有,那就直接用自己的屬性或者方法;

function Animal( name){
        this.name = name;
        this.say = function (){
            console.log("hello cat!");
        }
    }

    var cat = new Animal("cat");
    cat.say = function (){
        console.log("cat hello!");
    }
    cat.say();                //列印出 cat hello!
  

2. 當本身找不到這個屬性或者方法的時候,就會沿著原型鏈找,使用原型鏈上的方法或者屬性;

 function Animal( name){
        this.name = name;
        this.say = function (){
            console.log("hello cat!");
        }
    }

    var cat = new Animal("cat");
    cat.say();          //列印出  hello cat!

3. 原型鏈也找不到,那麼找不到的屬性返回 undefined,找不到的方法會報錯,提示不是一個 function。

console.log(cat.sayHello());       // 報錯:Uncaught TypeError: cat.sayHello is not a function
console.log(cat.age);          //undefined

特殊的:

沒有原型屬性的對象

通過 Object.create(null)生成沒有原型的對象。

 

後記

這是我對原型鏈知識的一點理解和看法,如有錯誤的理解或表述,歡迎大家指出,接下來我會著重探究幾個特殊的對象(Object、Function等)的原型。請大家多多支持!

 如需轉載,請指明出處,素質轉載,謝謝。


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

-Advertisement-
Play Games
更多相關文章
  • 一、javascript簡介 1、javaScript是什麼? JavaScript一種直譯式腳本語言,是一種動態類型、弱類型、基於原型的語言,內置支持類型。它的解釋器被稱為JavaScript引擎,為瀏覽器的一部分,廣泛用於客戶端的腳本語言,最早是在HTML(標準通用標記語言下的一個應用)網頁上使 ...
  • 基本語法 <marquee>滾動文字 </marquee> 文字移動屬性的設置 方向 <direction=#> #=left, right,up,down 方式 <bihavior=#> #=scroll,由一端滾動到另一端,會重覆 slide, 由一端滾動到另一端,不會重覆 alternate ...
  • 效果: ...
  • 核心:浮動元素會脫離文檔流並向左/向右移動,直到碰到父元素或者另外一個浮動元素。 float :left 向左浮動 right 向右浮動 none (預設) inherit 繼承父元素 float效果 原效果圖 換張圖.....因為我突然發現一個問題,用這張圖不好解釋........ 原圖 代碼 然 ...
  • 一、函數的調用方式 1.作為函數,一種直接易懂的方式(即函數調用模式)。 2.作為方法,方法是連接在對象上的,被這個對象調用,這種形式就是面向對象編程。 3.作為構造器,在構造的過程中一個新的對象被創建出來。 4.經由函數的apply或者call方法。 二、函數參數 1.傳入參數 (1)傳入變數多於 ...
  • 1. 創建對象的幾種方式 ...
  • JSONP:一種非官方跨域數據交互協議 JSONP怎麼產生的 JSONP的原理 看上面的來源加以理解 上面說過了,script是不受跨域影響的 那麼我們可以在我們代碼中引用B伺服器的文件 在B伺服器端demoResult.aspx會根據我們傳的callback參數jsonpCallback自動返回數 ...
  • - 是express框架下的一個方法,可以根據請求路徑名查找某個文件下文件名字和路徑名相同的文件 - 3.X裡面有20多個中間件,但是在4.X裡面 只保留了express.static - 語法 express.static('/設置一下請求路徑/路徑名','要被查找文件夾的絕對路徑') 請求路徑後 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...