Vue基礎(25)_組件與Vue的內置關系(原型鏈)

了解組件與Vue的內置關系前,我們需要回顧js原型鏈基礎知識:

1、構造函數

構造函數是一種特殊的方法,用于創建和初始化一個新的對象。它們是使用 new 關鍵字和函數調用來創建對象的。構造函數實際上只是一個普通的函數,通常以大寫字母開頭,用來和普通函數作區分。

構造函數的作用:

js面向對象可以通過構造函數實現封裝,把公共的屬性和方法抽取封裝到構造函數里面來從而實現數據的共享,這樣被構造函數new出來的實例對象就可以使用這些屬性和方法。

構造函數固然好用但是也存在一定的問題:
1、浪費內存。
2、構造函數中的函數多次創建,占用內存。

構造函數的顯示原型和隱式原型

在JavaScript中,顯示原型和隱式原型是理解原型鏈的關鍵概念。顯示原型是指構造函數的prototype屬性,而隱式原型是指對象的__proto__屬性。

顯示原型(prototype):每個函數都有一個prototype屬性,這個屬性指向一個對象,這個對象稱為原型對象。原型對象上有一個constructor屬性,指向構造函數本身。例如:

function Person(name) {
this.name = name;
}
console.log(Person.prototype); // 輸出:Person {}
console.log(Person.prototype.constructor === Person); // 輸出:true

在這個例子中,Person函數的prototype屬性指向一個空對象,這個對象的constructor屬性指向Person函數。

隱式原型(proto):每個對象都有一個__proto__屬性,這個屬性指向創建該對象的構造函數的prototype屬性。例如:

var person1 = new Person('Tom');
console.log(person1.__proto__); // 輸出:Person {}
console.log(person1.__proto__ === Person.prototype); // 輸出:true
在這個例子中,person1對象的__proto__屬性指向Person函數的prototype屬性。

顯示原型和隱式原型的關系

顯示原型和隱式原型之間的關系可以通過以下代碼示例來理解:

function Person(name) {
this.name = name;
}
var person1 = new Person('Tom');
console.log(person1.__proto__ === Person.prototype); // 輸出:true
console.log(Person.prototype.__proto__ === Object.prototype); // 輸出:true
console.log(Object.prototype.__proto__ === null); // 輸出:true

在這個例子中,person1對象的__proto__屬性指向Person函數的prototype屬性,而Person函數的prototype屬性的__proto__屬性指向Object函數的prototype屬性。

原型對象

什么是原型對象:JavaScript規定,每一個構造函數都有一個prototype屬性,指向另一個對象,所以我們也稱為原型對象
作用:原型對象可以掛載函數,對象實例化不會多次創建原型對象里面的函數,節約內存。

原型鏈

當訪問一個對象的某個屬性或者方法時,會現在這個對象本身屬性上找,如果沒有找到,那么這個對象的__proto__屬性就會去構造函數的 原型對象(prototype)上找,如果還沒有找到就會再在構造函數的原型對象上找,這樣一層一層的向上找,就會形成一個鏈式結構,也稱為原型鏈。

小結:
①當訪問一個對象成員(屬性/方法)時,首先查找這個對象自身有沒有該成員(屬性/方法)
②如果沒有就查找它的原型對象(也就是_proto_指向的prototype原型對象)
③如果還沒有就查找原型對象的原型對象(Object的原型對象)
④依此類推一直找到Object為止( null )
⑤原型鏈就在于為對象成員查找機制提供一個方向,或者說一條路線。

以上部分內容節選自原文鏈接:https://blog.csdn.net/qq_52902590/article/details/132078639

組件與Vue的內置關系

1.VueComponent.prototype.____proto__ === Vue.prototype
2.為什么要有這個關系:讓組件實例對象(vc)可以訪問到Vue原型上的屬性、方法。

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

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

相關文章

kafka中生產者的數據分發策略

在 Kafka 中,生產者的數據分發策略決定了消息如何分配到主題的不同分區。在 Python 中,我們通常使用 kafka-python 庫來操作 Kafka,下面詳細講解其數據分發策略及實現代碼。一、Kafka 生產者數據分發核心概念分區(Partition&#…

【動態規劃算法】斐波那契數列模型

一. (1137.)第N個泰波那契數(力扣)1.1動態規劃的算法流程 對于初學者來講學術上的概念晦澀難懂,將用通俗易懂的方式帶來感性的理解. 1.狀態表示dp表(一維或二維數組)里面的值所表示的含義 從哪獲取? 1.題目要求,如本題 2.題目沒有明確說明的情況下做題經驗的累積 3.分析問題的…

Odoo 18 PWA 全面掌握:從架構、實現到高級定制

本文旨在對 Odoo 18 中的漸進式網絡應用(Progressive Web App, PWA)技術進行一次全面而深入的剖析。本文的目標讀者為 Odoo 技術顧問、高級開發人員及解決方案架構師,旨在提供一份權威的技術參考,以指導 PWA 相關的實施項目與戰略…

Binary Classifier Optimization for Large Language Model Alignment

2025.acl-long.93.pdfhttps://aclanthology.org/2025.acl-long.93.pdf 1. 概述 在生產環境中部署大型語言模型(LLMs)時,對齊LLMs一直是一個關鍵因素,因為預訓練的LLMs容易產生不良輸出。Ouyang等人(2022)引入了基于人類反饋的強化學習(RLHF),該方法涉及基于單個提示的…

在CentOS上以源碼編譯的方式安裝PostgreSQL

下載目錄:PostgreSQL: File Browser,我使用的PostgreSQLv17.5。Linux系統:CentOS Linux release 7.9.2009 (Core) 安裝依賴包和工具鏈(必須且重要!) yum groupinstall "Development Tools" -y yu…

Baumer工業相機堡盟工業相機如何通過YoloV8深度學習模型實現沙灘小人檢測識別(C#代碼UI界面版)

Baumer工業相機堡盟工業相機如何通過YoloV8深度學習模型實現沙灘小人檢測識別(C#代碼UI界面版)工業相機使用YoloV8模型實現沙灘小人檢測識別工業相機通過YoloV8模型實現沙灘小人檢測識別的技術背景在相機SDK中獲取圖像轉換圖像的代碼分析工業相機圖像轉換…

Ubuntu服務器安裝與運維手冊——操作純享版

本手冊匯總了從硬件預配置、Ubuntu 安裝、網絡與服務配置,到 Windows/macOS 訪問共享、MySQL 初始化的完整流程,便于今后運維參考。 目錄 環境與硬件概覽BIOS/UEFI 設置制作與啟動安裝介質Ubuntu 24.04 LTS 安裝流程靜態 IP 配置(netplan&am…

【Nginx】Nginx進階指南:解鎖代理與負載均衡的多樣玩法

在Web服務的世界里,Nginx就像是一位多面手,它不僅能作為高性能的Web服務器,還能輕松勝任代理服務器、負載均衡器等多種角色。今天,我們就來深入探索Nginx的幾個常見應用場景,通過實際案例和關鍵配置解析,帶…

原創-銳能微82xx系列電能計量芯片軟件驅動開發與精度校準流程完全指南

引言 電能計量芯片的軟件驅動開發是整個計量系統的核心,它直接決定了計量精度、系統穩定性和功能完整性。銳能微82xx系列電能計量芯片憑借其強大的數字信號處理能力和豐富的功能特性,為開發者提供了靈活的軟件開發平臺。本文將詳細介紹82xx系列芯片的軟…

如何使用 Apache Ignite 作為 Spring 框架的緩存(Spring Cache)后端

這份文檔是關于 如何使用 Apache Ignite 作為 Spring 框架的緩存(Spring Cache)后端,實現方法級別的緩存功能。 這和前面我們講的 Spring Data Ignite 是兩個不同的概念。我們先明確區別,再深入理解。🔁 一、核心區別…

Android 超大圖片、長圖分割加載

在Android開發中,處理大圖片的加載是一個常見且重要的問題,尤其是在需要顯示高分辨率圖片時。大圖片如果不正確處理,可能會導致內存溢出或應用性能下降。下面是一些常用的策略和技術來優化大圖片的加載:1. 使用圖片壓縮庫a. Glide…

Linux:理解操作系統

文章目錄數據流動操作系統數據流動 軟件運行,必須先加載到內存,本質要把磁盤上的文件 加載到內存。 我們寫的算法是處理存儲器里面的數據,數據就是文件,我們自己寫的可執行文件。 圖中QQ就是軟件,加載內存后進行下一步…

【每日一錯】PostgreSQL的WAL默認段大小

文章目錄題目擴展學習WAL工作原理流程圖題目 擴展學習 WAL(Write Ahead Log)預寫日志: WAL是PostgreSQL先寫日志、后寫數據的機制,用來防止數據丟失、提升數據恢復能力。 流程: 事務先寫日志文件(WAL&…

Visual Studio Code 使用指南 (2025年版)

Visual Studio Code (VS Code) 是一款由微軟開發的免費、開源、跨平臺的現代化輕量級代碼編輯器,憑借其強大的核心功能、豐富的擴展生態系統以及高度可定制性,已成為全球數百萬開發者的首選工具。本指南旨在幫助您快速上手 VS Code,掌握其核心…

【Java】JVM虛擬機(java內存模型、GC垃圾回收)

一、Java內存模型(JMM)JMM(Java Memory Model,Java 內存模型)是 Java 虛擬機規范中定義的一種抽象概念,用于規范 Java 程序中多線程對共享內存的訪問規則,解決可見性、原子性和有序性問題&#…

二叉樹算法之【二叉樹的層序遍歷】

目錄 LeetCode-102題 LeetCode-102題 給定二叉樹的根節點root&#xff0c;返回其節點值的層序遍歷&#xff08;即逐層地&#xff0c;從左到右訪問所有節點&#xff09;。 class Solution {public List<List<Integer>> levelOrder(TreeNode root) {// checkif (r…

uniapp+vue3——通知欄標題縱向滾動切換

介紹 取巧&#xff0c;使用縱向輪播實現 <!-- 通知欄 --> <view class"noticeBox" v-if"notice.length>0"><image src"/static/images/index/noticeIcon.png" mode"aspectFill"></image><swiper class&…

BilldDesk 開源、免費、吊打收費軟件!白嫖黨最愛!遠程控制神器,沒有任何連接次數和畫質限制,同時顯示多屏、屏幕墻等高級功能

遠程控制軟件哪個好用&#xff1f;TeamViewer收費太貴&#xff0c;向日葵限制太多&#xff0c;QQ遠程又不穩定……別擔心&#xff01;今天給大家推薦一款完全免費、開源的遠程控制神器——BilldDesk&#xff01;它不僅功能強大&#xff0c;而且支持Windows、macOS、Linux、Andr…

ios UIAppearance 協議

一、前言 iOS 上提供了一個比較強大的工具UIAppearance&#xff0c;我們通過UIAppearance設置一些UI的全局效果&#xff0c;這樣就可以很方便的實現UI的自定義效果又能最簡單的實現統一界面風格。 (id)appearance ; 這個是這個協議里最重要的方法了 . 這個方法是統一全部改&am…

進階數據結構:用紅黑樹實現封裝map和set

? 嘿,各位技術潮人!好久不見甚是想念。生活就像一場奇妙冒險,而編程就是那把超酷的萬能鑰匙。此刻,陽光灑在鍵盤上,靈感在指尖跳躍,讓我們拋開一切束縛,給平淡日子加點料,注入滿滿的 passion。準備好和我一起沖進代碼的奇幻宇宙了嗎?Let’s go! 我的博客:yuanManGa…