JS原型與原型鏈終極詳解(轉)

来源:http://www.cnblogs.com/alsy/archive/2016/01/04/5099175.html
-Advertisement-
Play Games

JavaScript原型及原型鏈詳解一.普通對象與函數對象 JavaScript中，萬物皆對象！但對象也是有區別的。分為普通對象和函數對象，Object，Function是JS自帶的函數對象。下麵舉例說明 functionf1(){}; varf2=function(){}; varf3=n...


JavaScript原型及原型鏈詳解

一. 普通對象與函數對象

     JavaScript 中，萬物皆對象！但對象也是有區別的。分為普通對象和函數對象，Object，Function 是JS自帶的函數對象。下麵舉例說明

     function f1(){};

     var f2 = function(){};

     var f3 = new Function('str','console.log(str)');
            

     var o3 = new f1();

     var o1 = {};
     var o2 =new Object();

 

      console.log(typeof  Object);  //function
      console.log(typeof  Function);  //function
      console.log(typeof o1);   //object
      console.log(typeof o2);   //object

   　console.log(typeof o3);   //object
　　console.log(typeof  f1);   //function
　　console.log(typeof  f2);   //function
　　console.log(typeof  f3);   //function 

 

在上面的例子中 o1  o2  o3 為普通對象，f1  f2  f3 為函數對象。怎麼區分，其實很簡單，凡是通過 new Function() 創建的對象都是函數對象，其他的都是普通對象。f1,f2,歸根結底都是通過 new Function()的方式進行創建的。Function Object 也都是通過 New Function()創建的。

 

二. 原型對象

在 JavaScript 中，每當定義一個對象（函數）時候，對象中都會包含一些預定義的屬性。其中函數對象的一個屬性就是原型對象 prototype。註：普通對象沒有prototype,但有__proto__屬性。

         原型對象其實就是普通對象（Function.prototype除外,它是函數對象，但它很特殊，他沒有prototype屬性（前面說道函數對象都有prototype屬性））。看下麵的例子：

       function  f1(){};

       console.log(f1. prototype) //f1 {}

       console.log(typeof  f1. prototype) //Object

       console.log(typeof  Function. prototype) // Function

       console.log(typeof  Object. prototype) // Object

       console.log(typeof  Function. prototype. prototype) //undefined

從這句console.log(f1. prototype) //f1 {} 的輸出就結果可以看出，f1. prototype就是 f1的一個實例對象。就是在f1創建的時候,創建了一個它的實例對象並賦值給它的prototype，基本過程如下：

var temp = new f1();

f1. prototype = temp;

所以，Function. prototype為什麼是函數對象就迎刃而解了，上文提高凡是new Function ()產生的對象都是函數對象，所以temp是函數對象。

 var temp = new Function ();

Function. prototype = temp;

 

那原型對象是用來做什麼的呢？主要作用是用於繼承。舉了例子：

 

 var  person  =  function(name){

　　this.name = name

};

person.prototype.getName = function(){

     return this.name;

}

var zjh = new person(‘zhangjiahao’);

zjh.getName(); //zhangjiahao

 

從這個例子可以看出，通過給person.prototype設置了一個函數對象的屬性，那有person實例（例中：zjh）出來的普通對象就繼承了這個屬性。具體是怎麼實現的繼承，就要講到下麵的原型鏈了。

三．原型鏈

       JS在創建對象（不論是普通對象還是函數對象）的時候，都有一個叫做__proto__的內置屬性，用於指向創建它的函數對象的原型對象prototype。以上面的例子為例：

console.log(zjh.__proto__ === person.prototype) //true

 

同樣，person.prototype對象也有__proto__屬性，它指向創建它的函數對象（Object）的prototype

console.log(person.prototype.__proto__ === Object.prototype) //true

 

繼續，Object.prototype對象也有__proto__屬性，但它比較特殊，為null

 

console.log(Object.prototype.__proto__) //null

 

我們把這個有__proto__串起來的直到Object.prototype.__proto__為null的鏈叫做原型鏈。如下圖：



 四．記憶體結構圖

為了更加深入和直觀的進行理解，下麵我們畫一下上面的記憶體結構圖：

 

畫圖約定：

 

疑點解釋：

1.Object.__proto__ === Function.prototype   // true

Object是函數對象，是通過new Function()創建，所以Object.__proto__指向Function. prototype。

2.Function.__proto__ === Function.prototype  // true

Function 也是對象函數，也是通過new Function()創建，所以Function.__proto__指向Function. prototype。

自己是由自己創建的，好像不符合邏輯，但仔細想想，現實世界也有些類似，你是怎麼來的，你媽生的，你媽怎麼來的，你姥姥生的，……類人猿進化來的，那類人猿從哪來，一直追溯下去……，就是無，（NULL生萬物）

 正如《道德經》里所說“無，名天地之始”。

 3.Function.prototype.__proto__ === Object.prototype //true

其實這一點我也有點困惑，不過也可以試著解釋一下。

Function.prototype是個函數對象，理論上他的__proto__應該指向 Function.prototype，就是他自己，自己指向自己，沒有意義。

JS一直強調萬物皆對象，函數對象也是對象，給他認個祖宗，指向Object. prototype。Object. prototype.__proto__ === null，保證原型鏈能夠正常結束。

五．constructor

原型對象prototype中都有個預定義的constructor屬性，用來引用它的函數對象。這是一種迴圈引用

person.prototype. constructor === person  //true

Function.prototype.constructor === Function //true

Object.prototype.constructor === Object //true

 

完善下上面的記憶體結構圖：

 

 有兩點需要註意：

  1. 註意Object.constructor===Function；//true 本身Object就是Function函數構造出來的        
  2. 如何查找一個對象的constructor，就是在該對象的原型鏈上尋找碰到的第一個constructor屬性所指向的對象

六．總結

1.原型和原型鏈是JS實現繼承的一種模型。

2.原型鏈的形成是真正是靠__proto__ 而非prototype

要深入理解這句話，我們再舉個例子，看看前面你真的理解了嗎？

 

var animal = function(){};

var dog = function(){};

 

animal.price = 2000;//

dog.prototype = animal;

var tidy = new dog();

 

 

console.log(dog. price)  //undefined

console.log(tidy.price)  // 2000

 

為什麼呢？畫一下記憶體圖：



 

這說明什麼問題呢，執行dog.price的時候，發現沒有price這個屬性，雖然prototype指向的animal有這個屬性，但它並沒有去沿著這個“鏈”去尋找。同樣，執行tidy.price的時候，也沒有這個屬性，但是__proto__指向了animal，它會沿著這個鏈去尋找，animal中有price屬性，所以tidy.price輸出2000。由此得出，原型鏈的真正形成是靠的__proro__，而不是prototype。

因此，如果在這樣指定dog.__proto__ = animal。那dog.price = 2000。

<!--[if !supportLists]-->1.    

<!--[endif]-->最後打個比喻，雖然不是很確切，但可能對原型的理解有些幫助。

 

父親（函數對象），先生了一個大兒子（prototype），也就是你大哥，父親給你大哥買了好多的玩具，當你出生的時候，你們之間的親情紐帶（__proto__）會讓你自然而然的擁有了你大哥的玩具。同樣，你也先生個大兒子，又給他買了好多的玩具，當你再生兒子的時候，你的小兒子會自然擁有你大兒子的所有玩具。至於他們會不會打架，這不是我們的事了。

       所以說，你是從你大哥那繼承的，印證了那句“長兄如父”啊！

 

 

參考文獻：

1.《JavaScript 權威指南（中文第6版）》

2. http://www.libuchao.com/2012/05/14/prototypes-in-javascript/

3. http://www.blogjava.net/heavensay/archive/2013/10/20/405440.html

4. http://rockyuse.iteye.com/blog/1426510

5.《JavaScript高端系列教程》

來源：http://zhangjiahao8961.iteye.com/blog/2070650


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

-Advertisement-
Play Games
更多相關文章
  • jQuery打造動態下滑菜單
    作者：漫凱維奇 來源：【教程】jQuery打造動態下滑菜單Tip：這隻是一個轉載，源代碼可以在上面的來源博文中下載此教程將分步講解如何使用JQuery和CSS打造一個炫酷動感菜單。效果如下：效果實現步驟如下：1.HTML結構的實現，跟平常的菜單代碼沒有什麼區別： Home...
  • JavaScript、全選反選-課堂筆記
    全選反選 布爾屬性，只要name即可，...
  • JavaScript簡單的tabel切換2
    table切換 1 2 3 4 5
  • W3School-CSS 尺寸 (Dimension) 實例
    <h2 CSS 尺寸 (Dimension) 實例</h2 <h3 CSS 實例</h3 CSS 背景實例 CSS 文本實例 CSS 字體(font)實例 CSS 邊框(border)實例 CSS 外邊距 (margin) 實例 CSS 內邊距 (padding) 實例 CSS 列表實例 CSS ....
  • get獲取json數據並以表格形式生成到頁面
    jq-get方法test.json文件：[{"name": "艷艷","pass": "123456","age": "26"},{"name": "張三","pass": "88888888","age": "28"},{"name": "李四","pass": "111111"
  • jquery中eq和get的區別與使用方法
    $("p").eq(0).css("color") //因為eq(num)返回的是個jq對象，所以可以用jq的方法css使用get來獲得第一個p標簽的color值；$("p").get(0).style.color //因為get(num)返回的是個html對象，所以要使用傳統的HTML對象方法，j...
  • Jquery 獲取日期date()對象
    獲取JavaScript 的時間使用內置的Date函數完成var mydate = new Date();mydate.getYear(); //獲取當前年份(2位)mydate.getFullYear(); //獲取完整的年份(4位,1970-????)mydate.getMonth(); //獲...
  • javascript類型系統之Number
    [1]整數 [2]浮點數 [3]舍入誤差 [4]數值範圍 [5]數值轉換 [6]繼承的方法 [7]其他方法
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類