記錄--JS原型鏈

来源:https://www.cnblogs.com/smileZAZ/archive/2022/07/02/16437865.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 引子 對於初學者學習原型鏈，還是有很大的困難。一方面是函數與對象分不太清楚；另一方面，不懂原型鏈的繼承等。本人曾今也深受困惑，並且把疑惑的地方都記錄下來，為大家做出解釋。明明CSDN搜索關於原型鏈的文章一大堆，為啥我還要寫？個人覺得，寫下 ...


這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

引子

對於初學者學習原型鏈，還是有很大的困難。一方面是函數與對象分不太清楚；另一方面，不懂原型鏈的繼承等。本人曾今也深受困惑，並且把疑惑的地方都記錄下來，為大家做出解釋。明明CSDN搜索關於原型鏈的文章一大堆，為啥我還要寫？個人覺得，寫下這篇原型鏈文章，不僅表達我對原型鏈理解的程度，也算是總結自己了自己的學習心得；更多的，此篇文章，或多或少會為大家理解原型鏈，又多出了一些新的感悟。同時，在講解原型鏈之前，要補充關於函數和對象的一些知識，加強大家的理解。總體圍繞原型鏈展開，其它內容為輔。希望大家能夠靜下心來，認真閱讀，最終能夠有所收穫！

對象與函數的區別

  • 對象包含函數，函數是特別的對象，也就是說對象的範圍更大，而函數的範圍更加小。舉個簡單例子，985,211等知名大學是一定是本科，而本科不一定是985,211，本科可能是普通一本，甚至是普通二本，三本等。
  • 對象特別擁有*** --proto–（因為使用Markdown語法寫文章，下劃線的_會轉譯成別的作用，所以用-代替，接下里的文章內容都將如此) *** 和 constructor 兩個屬性，而函數特別擁有 prototape 這個屬性。這個屬性因為函數屬於特殊的對象，因此函數也可以有 –proto– 和 constructor 兩個屬性。也就是說，對象有的，我都有，對象沒有的，我還有。換句話說，你的就是我的，我的還是我的。
  • Object函數和Function函數是已經內置好了的,除此之外，還有Array，Date等等。Object這個函數，也是由 Function 構造的。並且，所有函數都是 Function的實例。換句話說，我們聲明的普通函數 *function name（）{} *， 更加像是由new Function實例生成的，如
var ff = new Function("a", "b", "console.log(a,b); return a+b;");
就相當於function ff(a,b){
console.log(a+b);
 return a+b;
}
值得註意的是，Function最後一個""中，是函數的主體，在它之前的都是參數。
並且，由Function實例生成的，都是函數。這是與其它普通函數實例出來的
最大不同，普通函數new生成的，是一個對象，而不是函數。

通過 函數名.–proto– 可以得到 Function.prototape。通過 函數名.constructor這個屬性，可以得到它的構造函數是Function。比較巧的是，Function的constructor就是它自身，Function的–proto–也是它的 Function.prototape。但是規定，一切函數的prototape的–proto– 指向 Object.prototape，即函數名.prototape.–proto–等於Object.prototape

對象的創建

  1. 通過new ＋構造函數，比如var obj=new Object（）
  2. 通過字面量的形式，比如var obj={}，這個是JOSN對象的簡寫。JOSN是由Object構造的，也就是說 JOSN不是函數，也就不擁有prototape這個屬性，JOSN.–proto–為Object.prototape，而不是Function.prototape。JOSN.constructor為Object。Math對象和JOSN一樣，也是由Object實例的。那麼，Math.constructor也為Object，Math.–proto–也為Object.prototape值得註意的是，JOSN和Math已經是實例對象了，不可以再new一個實例對象。也就是不能new JOSN（）和new Math（）等 ，這些都是錯誤的操作，這是很多新學者會出錯的地方。

函數的創建

  1. 通過函數聲明式，如function name(){}
  2. 通過函數表達式，如let name=function(){}
  3. 通過Function實例，如let name=new Function().凡事由Function實例的，都是函數

函數的靜態屬性和方法，以及函數的實例屬性和方法

  • 靜態屬性和方法
    通過函數名.屬性或者方法就是靜態屬性或者方法。
    上代碼

function Son(){} ;
Son.age=18;
Son.sex="男";
Son.play=function(){
console.log("我會玩游戲");
 }
  Son.sing=function(){
console.log("我會唱歌");
 }
 要想得到age，sex屬性以及play(),sing()方法，只能通過函數名.屬性或者方法使用
 如 
 console.log(Son.age,Son.sex)//18,男
 Son.play()//我會玩游戲
 Son.sing()//我會唱歌
 不能通過new一個對象得到
 比如
 var son= new Son（）；
 console.log(Son.age,Son.sex)//undefined,undefined
 son.sing()//son.sing is not a function
  • 實例屬性和方法
  • 通過在函數內部，用this.屬性或者this.方法的就是實例屬性或方法
  • 上代碼
function Son(name,age,phone){
this.name1=name;
this.age=age;
this.phone=phone;
this.dance=function(){
console.log("我會跳舞")
}
 this.getAge=function(){
return this.age;
}
}
   要想得到age，sex，phone屬性以及dance(),getAge()方法，只能new一個實例對象，
然後通過實例對象.屬性或者方法使用
   如
   var son1=new Children("小強","18","蘋果");
   console.log(son1.name1);//小強
   console.log(son1.age);//18
   console.log(son1.phone);//蘋果
   console.log(son1.getAge);//18
   son1.dance();//我會跳舞
   不能通過函數名.屬性或者方法使用
   如
   console.log(Children.name1);//undefined
   Children.dance();//Uncaught TypeError: Parent.say is not a function

–proto–屬性的例子

–proto–屬性，指向構造它的函數的prototape屬性。比如

function Son() {
    
    }
    var son=new Son();
   console.log( son.__proto__==Son.prototape)//true
   console.log( Son.__proto__==Function.prototape)//true
   var obj=new Object()或者 var obj=new Object({})或者var obj={}
   console.log( obj.__proto__==Object.prototape)//true
   console.log(Object.__proto__==Function.prototape)//true
   console.log(Array.__proto__==Function.prototape)//true
   console.log(JOSN.__proto__==Object.prototape)//true
   console.log(Math.__proto__==Object.prototape)//true
   console.log(JOSN.__proto__==Function.prototape)//false
   console.log(Math.__proto__==Function.prototape)//false
   console.log(Function.__proto__==Function.prototape)//true 特殊
   上述表明，函數的__proto__屬性指向的，都是Function.prototape，而實例對象指向的
   是構造函數的prototape屬性。

constructor屬性的例子

constructor屬性，指向構造它的函數

function Son() {
    
    }
    var son=new Son();
    console.log(son.constructor==Son)//true
    console.log(Son.constructor==Function)//true
    console.log(Object.constructor==Function)//true
     console.log(Date.constructor==Function)//true
    console.log(Math.constructor==Object)//true
    console.log(JOSN.constructor==Object)//true
    console.log(Function.constructor==Function)//true
    上述表明，函數的constructor屬性指向的，都是Function，而實例對象指向它的構造函數

prototape屬性的例子

prototape屬性 函數特別擁有，對象沒有這個屬性

var obj={}
    console.log(obj.prototape)//undefined
    function Son() {
    
    }
    var son=new Son();
    console.log(obj.prototape)//undefined
    console.log(son.prototape)//undefined
    console.log(Date.prototape)//undefined
    console.log(JOSN.prototape)//undefined
    console.log(Object.prototape) //{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ,...}
    console.log(Son.prototape) //{constructor: ƒ}
    console.log(Function.prototape) //ƒ () { [native code] }
    由此可見，對象沒有這個屬性，並且，prototape的值為對象
    我們可以通過prototape.constructor，可以知道這個原型對象的構造函數是誰
    console.log(Object.prototape.constructor)//ƒ Object() { [native code] } 
    console.log(Son.prototape.constructor)//ƒ Son() {  }
    console.log(Son.prototape.constructor)//ƒ Function() { [native code] }
    我們可以向prototape中添加方法或者屬性，但一般添加方法，代表這個鏈上的公共方法，個人認為，
    這個方法如果很多對象都用到了，不妨放在Object.prototape中。
    Object.prototape.sing=function(){
    console.log("我會唱歌");
    }
    Object.prototape.sing（）//我會唱歌
    首先new 一個實例對象
    var son=new Son();
    然後通過實例對象.方法名就可以使用
    son.sing();//我會唱歌

原型鏈

  • 沒有改變prototape的原型鏈

    • 如圖

  • 箭頭指向它們的方向，上述關係（–proto–,constructor,prototape）都在例子中講解了，就不再贅述，這裡關註的是原型鏈。(備註：本圖的JOSN和Math對象不好畫在圖的左邊，因此又畫了一個Object.prototape原型對象在右邊。)我們看Son的實例對象，為了方便，我寫一個var son=new Son（）。通過son.–proto–，可以得到Son.prorotape。如果繼續通過鏈式，即son.–proto–.–proto–可以得到Object.prototape。我們已經知道了，son.–proto–就是為Son.prorotape，那麼我們通過Son.prorotape.–proto–也可以得到Object.prototape。也就是說，–proto–能夠讓我們順藤摸瓜，一直向上查找，這就是原型鏈（圖中已經用紅色大邊框包裹起來了）。當我們son.–proto–.–proto–.–proto–（相當於Object.prototape–proto–，也相當於Son.prorotape.–proto–.–proto–）時，得到null，這說明，原型鏈是有終點的。

  • 為什麼要原型鏈？

    當我們需要一些方法時，別的函數已經有了這些方法，那麼我們不需要自己再次造輪子，可以通過原型鏈，查找各個父級的prototape屬性的值，得到想要的方法。比如：我們想要讓Object的實例對象可以使用sing（）方法，同時也想讓Son的實例對象使用一個sing（）方法，那麼我們就可以通過在Object的原型對象上，寫上這個sing（）共有方法，不需要讓Son的原型對象上，再寫下這個sing（）方法。

Object.prototape.sing=function(){
console.log("我會唱歌");
}
首先new 一個實例對象
var son=new Son();
然後通過實例對象.方法名就可以使用
son.sing();//我會唱歌
  • 所以，通過原型鏈，可以讓我們少些一些相同的代碼。我們只需要把相同的方法放在父級上，就不必自己重寫一個；除此之外，如果我們這個實例對象的構造函數如果沒有這個方法，那麼這個實例對象會依次向原型鏈查找，直到查找到Object.prototape為止，如果還沒有找到，那就終止，並且報錯。如果這個構造函數有這個方法，那麼按照構造函數的來，而不是父級的prototape裡面的方法。這說明，存在一定的優先順序，我們需要註意。
  • 改變了prototape的值原型鏈

    • 如圖

我們已經知道了prototape的值是一個對象，那麼我讓prototape的值等於一個實例對象，會怎麼樣？
如上圖所示，即Son.prototape=new Parent()。我們試著列印一下Son.prototape的值，console.log(Son.prototape)//Parent {},顯示是parent的實例對象，再試著列印console.log(Son.prototape.constructor)//function Parent(){},發現竟然是Parent，你會心想，這就不合理了。我應該指向Son才對啊。這裡我做出解釋，因為我們是將Son.prototape重新賦值了，將原本的對象覆蓋了，即地址發生了變化。現在的地址和之前的地址不是同一個地址（對象的重新賦值，會改變地址），那麼大家是不是瞬間清楚了。同時，這也說明瞭，Son.prototape.constructor繼承Parent.prototape.constructor，我相信這下子大家都清楚了，說明constructor也可以繼承。為瞭解決這種問題，我們必須讓Son.prototape.constructor重新指向Son，所以Son.prototape.constructor=Son，這樣子，console.log(Son.prototape.constructor)//function Son(){}就解決問題了。之後通過–proto–與沒有改變prototape的原型鏈是一樣的，只不過Son.prototape.–proto–為Parent.prototape。那麼，我們new 一個Son的實例對象，有 
var son=new Son();
console.log(son.--proto--)//Son.prototape
console.log(son.--proto--.--proto--)//Parent.prototape
console.log(son.--proto--.--proto--.--proto--)//Object.prototape
console.log(son.--proto--.--proto--.--proto--.--proto--)//null
console.log(Son.prototape.--proto--)//Parent.prototape
console.log(Son.prototape.--proto--.--proto--)//Object.prototape
console.log(Son.prototape.--proto--.--proto--.--proto--)//null
console.log(Patent.prototape.--proto--)//Object.prototape
console.log(Patent.prototape.--proto--.--proto--)//null
console.log(Object.prototape.--proto--)//null
並不是說，只有一個函數的prototape的值可以更改，我們還可以更改很多函數的prototape值。比如Parent的prototape的值，讓Parent.prototape=new Grandparent又加了一個父級，多出來一條鏈。有興趣的，可以去試試。

本文轉載於:

https://juejin.cn/post/7101887288652595230

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。

 


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

-Advertisement-
Play Games
更多相關文章
  • Linux 磁碟掛載和swap空間管理
    掛載：把指定的設備和根下麵的某個文件夾建立關聯 卸載：解除兩者關係的過程 掛載文件系統：mount 格式：mount device mountpoint mount 設備名 掛載點 mountpoint：掛載點目錄必須事先存在，建議使用空目錄 選項： -t fstype：指定文件系統類型，比如ext ...
  • [自製操作系統] 第10回 認識保護模式之深入淺出特權級
    目錄 一、前景回顧 二、什麼是特權級檢查 三、門 四、如何進行特權級檢查 五、調用門的跳轉執行流程 六、調用門的跳轉許可權檢查 一、前景回顧 我們在前面講過保護模式較之於實模式的三大特點：分頁機制、特權級和分時機制。現在分頁機制的坑已經填好了，接下來我們開始填特權級的坑。 二、什麼是特權級檢查 首先我 ...
  • 不會看器件手冊的工程師不是個好廚子
    寫在前面 我一直認為，對於電子工程師來講，最好的學習資料就是晶元或者電子器件的數據手冊，可能一開始讀起來會很吃力，但只要你能堅持住，並且本著一種不懂就問，不會就查的態度，相信我，不需要多久你就能看到自己的進步。所以今天我就帶大家解讀一種非常常見，但又似懂非懂的器件——MOSFET，也就是我們常說的M ...
  • Kubernetes（k8s）許可權管理RBAC詳解
    一、簡介 kubernetes 集群相關所有的交互都通過apiserver來完成，對於這樣集中式管理的系統來說，許可權管理尤其重要，在1.5版的時候引入了RBAC(Role Base Access Control)的許可權控制機制。 啟用RBAC，需要在 apiserver 中添加參數--authori ...
  • MySQL 關於 only_full_group_by 限制
    先上結論 如果 only_full_group_by 被啟用，那麼在查詢時，如果某個列不在group by 列表中，此時如果不對該列進行聚合處理，則該列不能出現在 select 列表，having 條件中及order by 列表中 MySQL 8.0 預設啟用了sql_mode，我們可以通過 sel ...
  • Fabric.js 更換圖片的3種方法（包括更換分組內的圖片，以及存在緩存的情況）
    本文簡介 我列舉了3種在 Fabric.js 中 更換圖片 的方法。 其中還包括 更換組內圖片 的操作。 環境和版本 Chrome瀏覽器版本：96.0.4664.45 Fabric.js版本：4.6.0 我是在原生環境下開發的，同時也提供了一份 Vue3 環境下開發的代碼（文末有鏈接）。 動手操作 ...
  • 圖文看懂JavaScritpt引擎V8與JS執行過程
    本篇文章通過圖文為你介紹了V8引擎大概的執行過程，你可以瞭解到代碼是從從掃描器Scaner變成tokens，從解析器Parser變成AST，從解釋器變成位元組碼等等。·以及JavaScript代碼在執行的過程中，它在記憶體的情況是如何變化的，讓你從更加底層的角度去理解你的js代碼是如何運行的。瞭解這些後... ...
  • 【前端線上試題解析】牛客JavaScript專項（一）
    1. 在下列Promise所提供的方法中，用來向成功或者失敗的回調函數隊列中添加回調函數的是（ ） then 接收兩個回調函數並返回一個新的 promise 對象，這兩個回調函數分別對應成功回調 onFullfilled 和失敗回調 onRejected，這兩個回調函數接收 promise 的返回值 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類