解读Vue的原型及原型链

在 JavaScript 中,每个对象都有一个关联的原型(prototype)。原型是一个对象,其他对象可以通过原型实现属性和方法的继承。原型链是一种由对象组成的链式结构,它通过原型的引用连接了一系列对象,形成了一种继承关系。

原型(Prototype):

每个 JavaScript 对象都有一个原型对象,它用于查找对象的属性和方法。对象可以通过 __proto__ 属性访问它的原型。在 ES6 中,可以使用 Object.getPrototypeOf() 方法获取对象的原型。

const myObject = {};
const myPrototype = Object.getPrototypeOf(myObject);console.log(myPrototype === Object.prototype);  // 输出: true

原型链(Prototype Chain):

原型链是一种对象之间通过原型引用连接起来的链式结构。当我们访问一个对象的属性或方法时,JavaScript 引擎首先在该对象本身查找,如果找不到,则会沿着原型链向上查找,直到找到对应的属性或方法,或者查找到达原型链的顶端(Object.prototype)。

function Animal(name) {this.name = name;
}Animal.prototype.sayHello = function() {console.log(`Hello, I'm ${this.name}`);
};const cat = new Animal('Whiskers');
cat.sayHello(); // 输出: Hello, I'm Whiskers

在上述例子中,cat 对象的原型是 Animal.prototypeAnimal.prototype 的原型是 Object.prototype。因此,当调用 sayHello 方法时,JavaScript 引擎首先在 cat 对象中查找,找不到的话就沿着原型链向上查找,最终在 Animal.prototype 中找到了 sayHello 方法。

原型链的终点:

原型链的终点是 Object.prototype,它是所有对象的根原型。Object.prototype 没有自己的原型,形成了原型链的终点。

构造函数与原型链:

通过构造函数创建的对象共享同一个原型。当我们创建一个新对象时,它的原型会指向构造函数的原型对象。

function Car(make, model) {this.make = make;this.model = model;
}Car.prototype.drive = function() {console.log('Vroom!');
};const myCar = new Car('Toyota', 'Camry');
myCar.drive(); // 输出: Vroom!

在上述例子中,myCar 对象的原型是 Car.prototype,而 Car.prototype 的原型是 Object.prototype,形成了原型链。

继承与原型链:

通过原型链,可以实现对象之间的继承。一个对象可以继承另一个对象的属性和方法,从而减少代码冗余。

function Bird(name) {this.name = name;
}Bird.prototype.fly = function() {console.log(`${this.name} is flying.`);
};function Penguin(name) {Bird.call(this, name);
}Penguin.prototype = Object.create(Bird.prototype);
Penguin.prototype.constructor = Penguin;Penguin.prototype.swim = function() {console.log(`${this.name} is swimming.`);
};const penguin = new Penguin('Happy Feet');
penguin.fly();  // 输出: Happy Feet is flying.
penguin.swim(); // 输出: Happy Feet is swimming.

在上述例子中,Penguin 构造函数通过 Bird.call(this, name) 继承了 Bird 构造函数的属性。然后,通过 Object.create(Bird.prototype) 创建了一个新对象,将其设置为 Penguin.prototype,从而继承了 Bird.prototype 中的方法。最后,将 Penguin.prototype.constructor 设置为 Penguin,确保正确指向构造函数。这样,Penguin 对象就能够继承 Bird 对象的方法。

Vue进阶:

在 Vue.js 2 中,原型链主要用于两个方面:全局方法和实例属性的访问。

1. 全局方法的访问:

Vue.js 在其原型链上定义了一些全局方法,可以通过实例对象或者全局引用来调用。例如,$emit$on 等方法。

// 在组件中使用
export default {methods: {handleClick() {this.$emit('custom-event', 'Hello from child!');}}
};// 在全局使用
Vue.prototype.$myGlobalMethod = function() {console.log('This is a global method!');
};// 然后在任何组件中
this.$myGlobalMethod();

2. 实例属性的访问:

在 Vue.js 2 中,实例对象上有一些特定的属性,可以通过原型链访问。

// 创建 Vue 实例
const vm = new Vue({data: {message: 'Hello, Vue!'}
});// 访问实例的属性
console.log(vm.$data.message); // 输出: Hello, Vue!

上述代码中,vm.$data.message 中的 $data 就是通过原型链访问到实例对象的属性。同样,还有其他一些实例属性,如 $props$el$options 等,它们可以提供对实例的不同方面的访问。

总的来说,原型链在 Vue.js 2 中主要用于提供全局方法和实例属性的访问。这样的设计使得在组件中可以方便地使用一些全局方法,同时也让开发者能够通过实例对象访问一些特定的实例属性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/624442.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

克服大模型(LLM)部署障碍,全面理解LLM当前状态

近日,CMU Catalyst 团队推出了一篇关于高效 LLM 推理的综述,覆盖了 300 余篇相关论文,从 MLSys 的研究视角介绍了算法创新和系统优化两个方面的相关进展。 在人工智能(AI)的快速发展背景下,大语言模型&…

从文本文件或 csv 文件读取信息的示例

如下表格说明文本文件或 csv 文件中的信息如何在 WinCC (TIA Portal) 中显示。 IO 域用作于显示,只有最有一个条目被输出。 注意 在此例中由于最后一条条目被搜索,脚本的运行系统会随着文件的尺寸增长而增长。先前示例中的配置在该示例中不是必须的。但是…

Linux 系统上,你可以使用 cron 定时任务来定期备份 MySQL 数据库

在 Linux 系统上,你可以使用 cron 定时任务来定期备份 MySQL 数据库。以下是一个基本的步骤,假设你已经安装了 MySQL 数据库和使用了 mysqldump 工具来进行备份。 步骤: 创建备份脚本: 创建一个包含备份命令的脚本。在这个例子中…

leetcode 1两数之和

题目 给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 target 的那 两个 整数,并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是,数组中同一个元素在答案里不能重复出现。 你可以按任意顺…

手把手教你使用Django如何连接Mysql

目录 一、引言 二、准备工作 三、配置Django连接MySQL 1、安装MySQL驱动: 2、配置数据库设置: 3、 创建数据库迁移: 四、编写Django模型和视图函数 1、编写模型: 2. 编写视图函数: 3. 编写模板: …

前端解析文件流

第一种方法,转blob对象 this.$axios({url: /md2api/attachment/c/${val.code},method: "GET",responseType: blob, //设置响应格式headers: {"Content-Type": "application/x-www-form-urlencoded",}, }) .then(function (respons…

软件测试感悟2

沟通 a.在测试前期与开发沟通,确认测试重点 ,确认测试的优先级 b.了解开发人员技术和业务背景 业务水平 技术水平 代码质量 人员流动性 在测试结束后 对已发现的bug进行统计 ,知道高发概率bug ,在新项目中要进行重点测试 针对代码 代码复杂…

开关电源如何覆铜

开关电源如何覆铜 开关电源覆铜是一个很重要的技术方法,如果没有很好的覆铜,就有可能会造成开关电源芯片的损坏。先介绍常见的开关电源电路: 图 1开关电源电路 从左到右分别是非同步整流Buck电路和同步整流Buck电路,第二排从左到…

MIinW-W64交叉编译找不到‘mutex‘问题解决

问题 在linux下安装mingw-w64来交叉编译Windows的程序和库. 就像我之前的一篇博客提到的来进行mingw的交叉编译 这样默认安装的线程模型是win32模型.这个线程模型不支持mutex. 一般查找问题的过程: 线程模型通常包含互斥锁(mutex)作为线程同步的基本工…

Arduino快速上手esp8266方案开发

认识ESP8266 ESP8266 是 Espressif Systems 生产的 Wi-Fi 片上系统 (SoC)。它非常适合物联网和家庭自动化项目,目前有非常高的市场普及率,还有更加高端的同时支持wifi和蓝牙的双核心芯片ESP32,可以在乐鑫官网查看完整的芯片列表。 ESP8266芯…

Keepalived双机热备

学会构建双机热备系统学会构建LVSHA高可用群集 1.1 Keepalived概述及安装 Keepalived的官方网站位于http://www.keepalived.org/,本章将以yum方式讲解Keepalived的安装、配置和使用过程。在非LVS群集环境中使用时,Keepalived也可以作为热备软件使用 1.…

解决PS“暂存盘已满”错误

问题:PS“暂存盘已满”错误 原因: PS在运行时会将文件的相关数据参数保存到暂存区。当提醒暂存盘满时,说明你当前PS运行的使用盘符空间不足,所以在运行时一定要保留有足够的盘符空间来运行PS。 效果图 解决方案 注意: 我们在使用P…

光纤和光缆有何不同之处?

很多人会有这样的疑问,光纤和光缆有何不同之处?主要是因为光纤和光缆这两个名词容易引起混淆。在严格的定义下,光纤和光缆是两种不同的东西,然而在现实生活中,许多人仍然会混淆这两者。为了更好地理解光纤和光缆之间的…

C#基础:利用LINQ进行复杂排序

一、场景 请你写出linq对表格排序,CODE3排前面,其余按照CODE降序排序,CODE一样再按照字母升序排序 IDCODEVALUEA00011AA00021BA00031CA00042DA00052EA00062FA00073GA00083HA00093IA00104J 二、代码 using System; using System.Collectio…

进程 p.close和p.join的区别

p是指的进程 p.close()和p.join()是multiprocessing.Process类的两个方法,用于管理子进程的行为。 p.close(): 这个方法用于关闭子进程。当调用p.close()后,子进程将不再接受新的任务。在子进程执行完当前任务后,它将自动退出。这个方法通常…

Dubbo 模块探秘:深入了解每个组件的独特功能【二】

欢迎来到我的博客,代码的世界里,每一行都是一个故事 Dubbo 模块探秘:深入了解每个组件的独特功能 前言Dubbo-common公共逻辑模块Dubbo-remoting 远程通讯模块Dubbo-rpc 远程调用模块Dubbo-cluster 集群模块Dubbo-registry 注册中心模块Dubbo-…

【Leetcode】239. 滑动窗口最大值

【Leetcode】239. 滑动窗口最大值 题目链接代码 题目链接 【Leetcode】239. 滑动窗口最大值 代码 func maxSlidingWindow(nums []int, k int) []int {// 单调队列使用的栈q : []int{}n : len(nums)// 结果切片ans : []int{}// 枚举切片for i : 0; i < n; i {// 如果栈顶元…

【LeetCode】202. 快乐数(简单)——代码随想录算法训练营Day06

题目链接&#xff1a;202. 快乐数 题目描述 编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。然后重复这个过程直到这个数变为 1&#xff0c;也可能是 无限循环 但始终…

pdf2image的poppler-Linux支持安装教程

文章目录 使用目的下载源码安装依赖直接安装的依赖需要编译的依赖1、libassuan2、gpgme3、libb24、pcre25、Qt6 命令行编译命令-poppler测试小结 使用目的 我想要解决的问题是以最快的速度抽取PDF中的图片&#xff0c;再和对应文本进行关联&#xff0c;最终适配到LangChain上 …

Nginx 配置反向代理 - part 3

继承上文&#xff1a; Nginx location 配置 - Part 2 之前 介绍了 nginx 配置web服务器&#xff0c; 但是用nginx 多的情况下是作为反向代理。 本问就是介绍如何利用nginx 配置反向代理服务。 什么是 反向代理 和 正向代理 一张图很清楚地表达了 正向代理 所谓正向代理就是…