解读Vue的原型及原型链

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

在学习原型和原型链之前,我们需要首先掌握以下三个属性:

  • prototype: 每一个函数都有一个特殊的属性,叫做原型(prototype)
  • constructor: 相比于普通对象的属性,prototype属性本身会有一个属性constructor,该属性的值为prototype所在的函数
  • __proto__: 每一个对象都有一个__proto__属性,该属性指向对象(实例)所属构造函数(类)的原型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 中主要用于提供全局方法和实例属性的访问。这样的设计使得在组件中可以方便地使用一些全局方法,同时也让开发者能够通过实例对象访问一些特定的实例属性。

3、Vue是一个函数

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

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

相关文章

恭喜所有纺织人,你最想要的小程序来了

随着互联网的普及和电子商务的快速发展,越来越多的商家开始涉足线上销售。而小程序商城作为一种轻量级的应用程序,正逐渐成为商家们热衷选择的销售平台。本文将通过实用指南的形式,为商家们详细介绍如何通过乔拓云网后台,自助搭建…

推荐 10 个基于 Stable Diffusion 的 AI 绘画网站

在当今快速发展的人工智能领域,AI 绘画已经成为一个不可忽视的趋势。特别是基于 Stable Diffusion 技术的 AI 绘画工具,以其强大的图像生成能力和丰富的创意潜力吸引了众多艺术家和设计师的目光。对于那些热爱艺术创作,但又缺乏专业绘画技巧的…

Defi安全--Orion Protocol攻击事件分析

其它相关文章可见个人主页 1. Orion Protocol攻击事件相关信息 2023年2月2日,在ETH和BSC上的Orion Protocol项目被攻击,这里以ETH上攻击为例: 攻击合约地址:Attacker Contract Address | Etherscan攻击者地址:Orion…

2018年认证杯SPSSPRO杯数学建模A题(第一阶段)海豚与沙丁鱼全过程文档及程序

2018年认证杯SPSSPRO杯数学建模 探究海豚猎捕时沙丁鱼群的躲避运动模型 A题 海豚与沙丁鱼 原题再现: 沙丁鱼以聚成大群的方式来对抗海豚的捕食。由于水下光线很暗,所以在距离较远时,海豚只能使用回声定位方法来判断鱼群的整体位置&#xf…

Qt编程之仿gnome-terminal终端样式 +颜色文字显示

Qt仿linux 终端样式 颜色文字 1.说再多废话不如直接show code2.实现效果 本文采用QTextBrowser作为文本显示窗口,进行文本的显示。本文实例实现的效果并没有终端的输入效果,这里只是提供一些仿终端样式思路。 1.说再多废话不如直接show code 1.ui文件…

FFmpeg之AVFormat

文章目录 一、概述二、解封装流程三、重要结构体3.1、AVFormatContext3.2、AVInputFormat3.3、AVOutputFormat3.4、AVStream 四、重要函数分析4.1、avformat_alloc_context4.2、avformat_open_input4.2.1、init_input4.2.2、av_probe_input_format2 4.3、avformat_find_stream_…

Unity3D和three.js的比较

一、Unity3D和three.js简介 Unity3D是一款跨平台的游戏引擎,可以用于开发2D和3D游戏。它提供了一个可视化的开发环境,包含了强大的编辑器和工具,使开发者可以方便地创建游戏场景、添加物体、设置物理效果、编写脚本等。Unity3D支持多种平台,包括PC、移动设备、主机等,可以…

Windows10系统下的Java环境变量配置

Windows10系统下的Java环境变量配置 1.准备java的jdk2.安装JDK--全部选择下一步3.如果安装的jdk环境没有自动配置,需要以下操作进行手动配置4.点击环境变量5.在系统变量的情况下进行新建6.这个路径是默认安装的是jdk默认安装配置的环境变量:7.java在安装的时候相当于把上面命令…

自建服务器如何备案?

随着互联网的普及和发展,越来越多的人开始考虑自建服务器。然而,在中国大陆地区,自建服务器需要进行备案。本文将介绍自建服务器备案的流程、所需材料以及注意事项。 一、备案流程 确定备案地区 根据《中华人民共和国计算机信息网络国际联网…

rabbitmq-java基础详解

一、rabbitmq是什么? 1、MQ定义 MQ(Message Queue)消息队列 主要解决:异步处理、应用解耦、流量削峰等问题,是分布式系统的重要组件,从而实现高性能,高可用,可伸缩和最终一致性的架…

【MATLAB随笔】GUI编程(未完结)

文章目录 一、创建GUI图窗1.1 使用figure 函数1.11 窗口标识1.12 窗口外观1.13 位置和大小1.14 绘图1.15 交互性 1.2 使用uifigure函数 二、 添加GUI控件2.1 uicontrol(适用于figure)2.11 控件类型2.12 文本和样式2.13 字体待续 一、创建GUI图窗 跟很多…

过滤器、拦截器、AOP、ControllerAdvcie执行顺序对比

过滤器Filter 简介 来自J2EE中的Servlet技术实现原理:基于servlet的函数回调实现只可以获取到请求中的request和response,无法获取到响应方法的信息可以拦截所有请求支持使用xml配置和注解配置应用场景:权限认证、敏感词检测、访问日志记录…