了解组件与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上找如果还没有找到就会再在Object的原型对象上找这样一层一层的向上找就会形成一个链式结构也称为原型链。小结①当访问一个对象成员(属性/方法)时首先查找这个对象自身有没有该成员(属性/方法)②如果没有就查找它的原型对象也就是_proto_指向的prototype原型对象③如果还没有就查找原型对象的原型对象Object的原型对象)④依此类推一直找到Object为止( null )⑤原型链就在于为对象成员查找机制提供一个方向或者说一条路线。以上部分内容节选自原文链接5分钟带你搞懂 构造函数、原型对象、实例对象、原型、原型链【叫我上官老妖】组件与Vue的内置关系1.vue团队改变VueComponent的原型对象的隐式原型__proto__属性地址指向让它指向Vue的原型对象而不是默认的Object的原型对象从而能实现以下两边数据全等VueComponent.prototype.____proto__ Vue.prototype2.为什么要有这个关系让组件实例对象(vc)可以访问到Vue原型上的属性、方法。(没改之前vue构造函数和VueComponent构造函数的原型对象的原型对象是共同指向Object的原型对象的)