vue中的原型链

终极原型链

类的继承的关系

//父类
 class Person {
        do() {
          console.log("do");
        }
      }
//定义一个子类继承父类
      class Student extends Person {
        eat() {
          console.log("eat");
        }
      }
      //实例化Student实例
      const s1 = new Student();

分析含有继承的原型链的关系

当要找一个自己对象原型上没有的属性或者方法的时候，会沿着原型链一级一级的往上走 s1===>s1.__proto__==>s1.__proto__.__proto__==>s1.__proto__.__proto__.__proto__==>null

查找过程：1.在自己的实例上（s1）找，2.沿着自己的隐式原型对象去构造函数Person的原型对象上找（s1.__proto__==Student.prototype） 3.在前面的基础上再往上找(查找继承的类的原型)（s1.__proto__.__proto__===Person.prototype） 4.如果还是没有找到，还会往上找 （s1.__proto__.__proto__.__proto__===Object.prototype） 5.最后如果Object.prototype上不存在的话，整个方法或者属性就不存在，因为Object.prototype.__proto__===null

分析不含继承的原型链的关系

s1 ===> Student.prototype ===> Person.prototype ===> Object.prototype ===->null 区别在于当查找自己的构造函数的原型对象时候，如果没有找到（由于原型对象是一个对象，是Object New出来的），那么会直接去查找Object的原型对象去找。

vue的原型链

组件创建过程

Vue组件会Vue.extend一个子组件,每一个子组件的实质其实是一个小型vm的实例,每一个组件实例都有自己的VueComponent构造函数,在使用的过程中,VueComponent构造函数会创建实例,该组件上的this会指向组件实例,

组件的原型链

this(指向组件当前的实例),
this.__proto__(指向VueComponent构造函数的原型对象)
this.__proto__.__proto__(指向的是Vue组件的原型对象)
this.__proto__.__proto__.__proto__(指向的是Object)

VueComponent是Vue框架内部使用的一个类，表示一个 Vue 组件的构造函数，只有通过Vue.extend方法或使用单文件组件(SFC)定义的组件才会存在该构造函数。