了解组件与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…