vue原型链

构造函数原型 prototype

构造函数通过原型分配的函数是所有对象所共享的

JavaScript 规定,每一个构造函数都有一个 prototype 属性,指向另一个对象。注意这个 prototype 就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有

对象原型 __proto__

对象都会有一个属性 __proto__ 指向构造函数的 prototype 原型对象,之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法,就是因为对象有 __proto__ 原型的存在。

  • __proto__ 对象原型和原型对象 prototype 是等价的
  • __proto__ 对象原型的意义就在于为对象的查找机制提供一个方向,或者说一条路线,但是它是一个非标准属性,因此实际开发中,不可以使用这个属性,它只是内部指向原型对象 prototype
  • 在这里插入图片描述
constructor 构造函数

对象原型 ( __proto__ ) 和 构造函数 ( prototype ) 原型对象 里面都有一个属性 constructor 属性 ,constructor 我们称为构造函数,因为它指回构造函数本身。

constructor 的作用主要用于记录该对象引用于哪个构造函数,它可以让原型对象重新指向原来的构造函数。

一般情况下,对象的方法都在构造函数的原型对象中设置。如果有多个对象的方法,我们可以给原型对象采取对象形式赋值,但是这样就会覆盖构造函数原型对象原来的内容,这样修改后的原型对象 constructor 就不再指向当前构造函数了。 此时,我们可以在修改后的原型对象中,添加一个 constructor 指向原来的构造函数。
在这里插入图片描述
原型链
在这里插入图片描述

  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3中,使用原型链的方式与Vue 2有所不同。在Vue 3中,你可以使用`app.config.globalProperties`来添加全局属性或方法到Vue实例的原型链上。 具体使用方法如下: 1. 在`main.js`中创建Vue实例时,可以通过`app.config.globalProperties`来添加全局属性和方法。例如,如果你想在Vue实例上添加一个名为`$EventBus`的全局事件总线,可以这样写: ```javascript import { createApp } from 'vue'; import App from './App.vue'; const app = createApp(App); app.config.globalProperties.$EventBus = new Vue(); app.mount('#app'); ``` 2. 然后,在任何Vue组件中,你都可以通过`this.$EventBus`来访问全局事件总线,并使用其提供的方法进行事件的触发和监听。例如,在一个组件中可以这样使用: ```javascript export default { mounted() { this.$EventBus.$emit('event-name', data); }, methods: { handleEvent(data) { // 处理事件 } }, created() { this.$EventBus.$on('event-name', this.handleEvent); } } ``` 通过以上方法,你可以在Vue 3中使用原型链来添加全局属性和方法,并实现组件间的通信。注意,Vue 3中的`createApp`函数代替了Vue 2中的`new Vue()`,其他部分的用法基本相同。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [Vue中关于JS原型链的应用](https://blog.csdn.net/qq_38802910/article/details/125884336)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [Vue3、Vue2原型链挂载区别与实战举例](https://blog.csdn.net/qq_43547255/article/details/125925863)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值