前端八股之JS的原型鏈

1.原型的定義

每一個對象從被創建開始就和另一個對象關聯,從另一個對象上繼承其屬性,這個另一個對象就是?原型

當訪問一個對象的屬性時,先在對象的本身找,找不到就去對象的原型上找,如果還是找不到,就去對象的原型(原型也是對象,也有它自己的原型)的原型上找,如此繼續,直到找到為止,或者查找到最頂層的原型對象中也沒有找到,就結束查找,返回undefined

這條由對象及其原型組成的鏈就叫做原型鏈。

總結:

  1. 原型存在的意義就是組成原型鏈:引用類型皆對象,每個對象都有原型,原型也是對象,也有它自己的原型,一層一層,組成原型鏈。
  2. 原型鏈存在的意義就是繼承:訪問對象屬性時,在對象本身找不到,就在原型鏈上一層一層找。說白了就是一個對象可以訪問其他對象的屬性。
  3. 繼承存在的意義就是屬性共享:好處有二:一是代碼重用,字面意思;二是可擴展,不同對象可能繼承相同的屬性,也可以定義只屬于自己的屬性。

2.原型鏈定義

每個對象都有一個內部屬性 [[Prototype]](可通過 __proto__ 訪問),這個[[Prototype]]指向它的原型對象(prototype),這個原型對象也有自己的 __proto__,一直向上查找,最終到達終點null,形成原型鏈

總結:

  1. 對象有__proto__屬性,函數有__proto__屬性,數組也有__proto__屬性,只要是引用類型,就有__proto__屬性,指向其原型。
  2. 只有函數有prototype屬性,只有函數有prototype屬性,只有函數有prototype屬性,指向new操作符加調用該函數創建的對象實例的原型對象。

實例代碼

function Person(name) {this.name = name;
}Person.prototype.sayHello = function() {console.log("Hello, I'm " + this.name);
};const p = new Person("Alice");p.sayHello(); // 從 p 找不到 sayHello,順著原型鏈找到 Person.prototype

p --> Person.prototype --> Object.prototype --> null

  • p.__proto__ === Person.prototype

  • Person.prototype.__proto__ === Object.prototype

  • Object.prototype.__proto__ === null

3.constructor

構造函數都有一個prototype屬性,指向使用這個構造函數創建的對象實例的原型對象

這個原型對象中默認有一個constructor屬性,指回該構造函數。

Person.prototype.constructor === Person // true

4.應用

①.手寫實現instanceof

function instanceof2(L, R) {// 獲取 R 的 prototype.//R 是構造函數,我們要找的是它的 .prototype,這是構造出來對象的原型。let RP = R.prototype;// 獲取 L 的原型//取 L 的原型(注意是 __proto__,而不是 prototype),它表示當前對象的內部原型鏈引用。L = L.__proto__;// 遍歷 L 的原型鏈while (true) {if (L === null) { // 到頭了都沒找到,說明不是return false;}// 🔽 插入這行代碼if (L === RP) {  // 找到了原型鏈中有構造函數的 prototypereturn true;}L = L.__proto__;  // 繼續向上查找原型鏈}
}
  • instanceof 的本質:判斷某對象的原型鏈上是否能找到構造函數的 .prototype
  • __proto__ 是對象的內部原型引用。

  • 可以用 Object.getPrototypeOf(obj) 來代替 __proto__(更標準)。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/82577.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/82577.shtml
英文地址,請注明出處:http://en.pswp.cn/web/82577.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

kafka命令

kafka安裝先安裝zookeeper,jdk 確保jdk版本與kafka版本匹配: 先啟動zookeeper: # 啟動獨立安裝的zookeeper ./zkServer.sh start # 也可以自動kafka自帶的zookerper ./zookeeper-server-start.sh ../config/zookeeper.pr…

微服務面試(分布式事務、注冊中心、遠程調用、服務保護)

1.分布式事務 分布式事務,就是指不是在單個服務或單個數據庫架構下,產生的事務,例如: 跨數據源的分布式事務跨服務的分布式事務綜合情況 我們之前解決分布式事務問題是直接使用Seata框架的AT模式,但是解決分布式事務…

Linux --進程優先級

概念 什么是進程優先級,為什么需要進程優先級,怎么做到進程優先級這是本文需要解釋清楚的。 優先級的本質其實就是排隊,為了去爭奪有限的資源,比如cpu的調度。cpu資源分配的先后性就是指進程的優先級。優先級高的進程有優先執行的…

React 性能監控與錯誤上報

核心問題與技術挑戰 現代 React 應用隨著業務復雜度增加,性能問題和運行時錯誤日益成為影響用戶體驗的關鍵因素。沒有可靠的監控與錯誤上報機制,我們將陷入被動修復而非主動預防的困境。 性能指標體系與錯誤分類 關鍵性能指標定義 // performance-me…

芒果深度學習檢測:開啟農業新視界(貓臉碼客第230期)

芒果深度學習檢測:開啟農業新視界 一、引言 芒果作為熱帶水果中的“明星”,在全球水果市場占據著重要地位,擁有廣泛的市場需求和可觀的經濟價值。伴隨人們生活品質的提升,對芒果品質的要求也愈發嚴苛。芒果產業規模持續擴張&#…

PDF文件轉換之輸出指定頁到新的 PDF 文件

背景 一份 PDF 學習資料需要打印其中某幾頁,文件有幾百兆,看到 WPS 有PDF拆分功能,但是需要會員,開了一個月會員后完成了轉換。突然想到,會員到期后如果還要拆解的話,怎么辦呢?PDF 文件拆解功能…

【計網】SW、GBN、SR、TCP

目錄 三種可靠傳輸機制(數據鏈路層) 停止-等待(Stop and Wait,SW)協議 回退N幀(Go-back-N,GBN)協議 選擇重傳(Selective Repeat,SR)協議 傳輸…

Go的隱式接口機制

正確使用Interface 不要照使用C/Java等OOP語言中接口的方式去使用interface。 Go的Interface的抽象不僅可以用于dynamic-dispatch 在工程上、它最大的作用是:隔離實現和抽象、實現完全的dependency inversion 以及interface segregation(SOLID principle中的I和D)。…

Async-profiler 內存采樣機制解析:從原理到實現

引言 在 Java 性能調優的工具箱中,async-profiler 是一款備受青睞的低開銷采樣分析器。它不僅能分析 CPU 熱點,還能精確追蹤內存分配情況。本文將深入探討 async-profiler 實現內存采樣的多種機制,結合代碼示例解析其工作原理。 為什么需要內…

Android 顏色百分比對照

本文就是簡單寫個demo,打印下顏色百分比的數值.方便以后使用. 1: 獲取透明色 具體的代碼如下: /*** 獲取透明色* param percent* param red* param green* param blue* return*/public static int getTransparentColor(int percent, int red, int green, int blue) {int alp…

MPLS-EVPN筆記詳述

目錄 EVPN簡介: EVPN路由: 基本四種EVPN路由 擴展: EVPN工作流程: 1.啟動階段: 2.流量轉發: 路由次序整理: 總結: EVPN基本術語: EVPN表項: EVPN支持的多種服務模式: 簡介: 1.Port Based: 簡介: 配置實現: 2.VLAN Based: 簡介: 配置實現: 3.VLAN Bundle: 簡…

SpringBoot自定義線程池詳細教程

文章目錄 1. 線程池基礎概念1.1 什么是線程池1.2 Java線程池核心參數1.3 線程池執行流程 2. SpringBoot中的線程池2.1 SpringBoot默認線程池2.2 SpringBoot異步任務基礎 3. 自定義線程池配置3.1 配置文件方式3.2 Java配置方式3.3 線程池工廠配置 4. 異步任務實際應用4.1 業務服…

智能快遞地址解析接口如何用PHP調用?

一、什么是智能快遞地址解析接口 隨著互聯網技術的普及和電子商務的迅猛發展,網購已成為現代人日常生活的重要組成部分。然而,在這個便捷的背后,一個看似不起眼卻影響深遠的問題正悄然浮現——用戶填寫的快遞地址格式混亂、信息不全甚至錯漏…

概率分布,支撐AI算法的數學基石

概率分布,是現代人工智能(AI)算法不可或缺的數學語言。它不僅描述了數據中的不確定性,更揭示了機器學習模型背后的本質運作機制。本文將帶你深入了解概率分布的數學本質,以及它在監督學習、深度學習、生成模型等核心AI領域的關鍵作用,揭秘概率論如何成為AI理論和實踐的強…

2025年Splunk的替代方案:更智能的安全選擇

在安全信息和事件管理(SIEM)領域,2025年的競爭愈發激烈。Splunk憑借其強大的功能和穩定性長期占據市場主導地位,但其高昂的成本、復雜性和擴展性挑戰促使許多企業轉向其他解決方案。無論是初創公司、快速發展的中型企業&#xff0…

(10)Fiddler抓包-Fiddler如何設置捕獲Firefox瀏覽器的Https會話

1.簡介 經過上一篇對Fiddler的配置后,絕大多數的Https的會話,我們可以成功捕獲抓取到,但是有些版本的Firefox瀏覽器仍然是捕獲不到其的Https會話,需要我們更進一步的配置才能捕獲到會話進行抓包。 2.環境 1.環境是Windows 10版…

simulink mask的使用技巧

1.mask界面布局 1.1如何調整控件的位置和控件大小? 反正2020a是調不了, 找了好久,只能是調布局,例如你要調成下面這樣: 第一個控件的iTem location屬性選擇New row 后面跟著的幾個和第一個同一行的空間屬性選擇Cu…

Go中MAP底層原理分析

MAP底層原理分析 參考 https://golang.design/go-questions/map/principalmap | Golang 中文學習文檔 先來看一下map結構體,(runtime.hmap結構體就是代表著 go 中的map,與切片一樣map的內部實現也是結構體) type hmap struct {/…

#開發環境篇:postMan可以正常調通,但是瀏覽器里面一直報403

本地header代理下面內容即可 headers: { // 添加必要的請求頭 ‘Host’: ‘服務端域名’, ‘Origin’: https://服務端域名, ‘Referer’: https://服務端域名 }, devServer: {// 本地開發代理API地址proxy: {^/file: {target: https://服務端域名,changeOrigin: true, // 是否…

【論文閱讀 | PR 2024 |ICAFusion:迭代交叉注意力引導的多光譜目標檢測特征融合】

論文閱讀 | PR 2024 |ICAFusion:迭代交叉注意力引導的多光譜目標檢測特征融合 1.摘要&&引言2.方法2.1 架構2.2 雙模態特征融合(DMFF)2.2.1 跨模態特征增強(CFE)2.2.2 空間特征壓縮(SFS)…