深入浅析js原型链和vue构造函数

JS原型链

在JavaScript中，所有的对象都是从原型ProtoType对象中继承而来的。每个对象都拥有一个Prototype对象，它是一个指向其他对象的引用。当在一个对象上调用一个方法或访问一个属性时，如果该对象本身不存在该方法或属性，JavaScript引擎就会沿着这个Prototype链找到最终的原型对象，也就是从该对象继承的对象。

简单示例

// 定义一个Person构造函数
function Person(name, age) {
  this.name = name
  this.age = age
}
// 在Person的原型对象上添加一个getInfo方法
Person.prototype.getInfo = function() {
  console.log('姓名：' + this.name + '，年龄：' + this.age)
}
// 新建一个Person的实例
var person = new Person('Tom', 18)
// 调用实例对象上的getInfo方法，实例对象在找不到该方法时，就会沿着原型链往上找
person.getInfo() // 输出：姓名：Tom，年龄：18

vue构造函数

在Vue.js中，每个组件都是一个Vue实例。Vue组件基于Vue构造函数进行创建，通过监听数据的变化来进行相应的DOM操作。Vue实例中有一个$options对象，其中保存了该Vue实例的各种配置和数据。在该$options对象中，有一个prototype属性，它是Vue的原型对象。Vue的原型对象中封装了Vue的API和一些工具函数，所有的Vue实例都可以通过原型链访问到这些函数和方法。

示例

<template>
  <div>{{ message }}</div>
</template>
<script>
// 定义一个组件
export default {
  data() {
    return {
      message: "Hello Vue"
    }
  },
  mounted() {
    this.logInfo()
  },
  methods: {
    logInfo() {
      console.log(this.$options.prototype) // 输出：Vue
    }
  }
}
</script>

在以上示例中，我们定义了一个简单的Vue组件。在组件实例对象中，我们通过调用this.$options.prototype属性，获取到了Vue的原型对象，从而获取到了Vue中的API和工具函数。