探索js原型链和vue构造函数中的奥妙

    let obj = {}
    console.log(obj.__proto__)  // object
    console.log(obj.__proto__ === obj.constructor.prototype) // true 证明用字面量创建的函数,他的__proto__ 等于 该对象构造器的原型

2.构造器方式

    function Func () {}
    let a = new Func()
    console.log(a.__proto__) // object
    console.log(a.__proto__ === a.constructor.prototype) // true 

    let obj1 = {name:"rng"}
    let obj2 = Object.create(obj1)
    console.log(obj2.__proto__) //{name: "rng"}
    console.log(obj2.__proto__ === obj2.constructor.prototype) // false

    function fun(o){
        function F(){}
        F.prototype = o;
        return new F();
    }
    let obj = {a:[11,22]}

    function createAnother(z) {
        // 通过调用函数创建一个新对象
        var clone = fun(z);
        clone.sayHi = function () {
            alert("hi");
        }

        return clone;
    }

　　上面的例子中,我们把obj传入createAnother()函数中,返回的新对象clone不仅拥有了该属性,而且还被增强了,拥有了sayHi()方法;

　　等一下,这里要注意: 使用寄生式继承来为对象添加函数, 会由于不能做到函数复用而降低效率;这一点与构造函数模式类似.

5.寄生组合式继承

    function inheritPrototype(subType, superType) {
        var protoType = Object.create(superType.prototype);    //创建对象
        protoType.constructor = subType;                       //增强对象
        subType.prototype = protoType;                         //指定对象
    }


    function Father(name) {
        this.name = name;
        this.colors = ["red", "blue", "green"];
    }
    Father.prototype.sayName = function () {
        console.log(this.name);
    }

    function Son(name, age) {
        Father.call(this, name);

        this.age = age;
    }
    inheritPrototype(Son, Father)
    Son.prototype.sayAge = function () {
        console.log(this.age);
    }

    var instance = new Son("uzi", 3);
    instance.sayName(); //uzi
    instance.sayAge();  //3

我们在使用的vue的时候,经常会用new操作符去将他实例化,这说明vue也是一个构造函数,那么他是如何被创建的呢?我怀着无比激动的心情clone了vue的源码,仔细研究了一番

vue源码地址

我首先找到了src/core/instance/index.js文件,打开一看,惊了

在第八行代码中,创建了一个Vue的函数,这不就是Vue的构造函数么,而且在12行的警告中我更加肯定了,他说:Vue是一个构造函数，应该使用“new”关键字调用
然后他在下面,他分别在

那么这五个方法是干什么的呢?我们先来看看initMixin()方法,打开./init.js文件,找到该方法

其他的代码我们先不管,我们就看该方法的前几行,他在Vue的原型中注入了_init方法,这个方法有点眼熟,我们好像在哪见过,对,就是刚才的index.js文件中

这个this_init(options)看上去像是一个内部初始化的一个方法,而option应该就是初始化时的一些配置项了,在Vue被实例化的时候,this._init()方法就会执行

接下来,我们来看一下./state.js文件,找到stateMixin方法

我们们先看最后两行,他使用Object.defineProperty方法里面传了三个参数:vue的原型,$data和$props以及dataDef和propsDef,Object.defineProperty顾名思义就是在对象里定义原型,所以这个方法应该就是将$data和$props注入Vue的原型中.这两个属性的定义分别写在了 dataDef 以及 propsDef 这两个对象里，我们来看一下这两个对象的定义，首先是 get ：

　　 从中我们可以看出,dataDef.get方法返回了this._data,也就是说,$data 属性实际上代理的是 _data 这个实例属性，而同理,$props 代理的是 _props 这个实例属性。然后有一个是否为生产环境的判断，如果不是生产环境的话，就为 $data 和 $props 这两个属性设置一下 set,给了你一个提示,避免替换实例根$data。' + "使用嵌套数据属性",实际上就是想告诉你:别碰我.所以说,$data和$rop都是只读属性.

　　然后,他又向Vue的原型里注入了$set啊,$delete啊还有$watch,这些你在看vue的api的时候应该见过吧

下面,我们看下一个方法eventsMixin .打开./events.js文件

不难发现,eventsMixin方法在vue的原型中分别写入了$on,$once,$off和$emit这四个方法

下一个是lifecycleMixin方法,打开./lifecycle.js文件找到该方法,这个方法在Vue.prototype上添加了三个方法:_update,$forceUpdate以及$distroy

最后一个就是 renderMixin 方法了，它在 render.js 文件中

这个方法的一开始以 Vue.prototype为参数调用了 installRenderHelpers 函数,我们可以从这个文件开始看到这个函数来自./render-helpers/index.js 文件，打开这个文件找到 installRenderHelpers 函数：

　　以上代码就是 installRenderHelpers 函数的源码，可以发现，这个函数的作用就是在 Vue.prototype 上添加一系列方法，这些方法貌似render函数被创建时需要用到的一些方法.

　　renderMixin 方法在执行完 installRenderHelpers 函数之后，又在 Vue.prototype 上添加了两个方法，分别是：$nextTick 和 _render，至此，instance/index.js 文件中的代码就运行完毕了（所谓的运行，是指执行 npm run dev命令时构建的运行）。

我们大致可以得出一个结论:vue官方通把vue的一些方法和属性做了分类,通过不同*Mixin方法,将这些方法挂载到了vue原型中,而每个 *Mixin 方法的作用其实就是包装 Vue.prototype,这就是Vue构造函数被创建的过程.

　　结束了吗?no,我来看看我们在实际项目中用vue构造函数能干些个啥?

 九.vue构造函数的实际应用

　　在实际项目中,我们有一些属性和方法也是希望能够全局调用的又不想污染全局作用域,这时,我们就可以把该属性或者方法挂载到vue原型上,然后通过this来调用,来看看是怎么做的:

我们在入口函数main.js中做如下操作:

// 首先将Vue构造函数导入
import Vue from 'vue'  

// 在Vue原型中挂载一个属性
Vue.prototype.$man = "liuqiangdong"

// 导入一个axios方法
import axios from 'axios'
// 挂载到Vue原型中
Vue.prototype.$axios = axios

// 实例化
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

　　然后,我们就可以在组件中通过调用this.$man和this.$axios来使用该属性和方法了.

　　你问我为什么要加一个"$"?问的好,其实,这样做更像是在 Vue 所有实例中都可用的属性的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。

　　咋就冲突了?来试验一下:

main.js中:

// 首先我们在Vue的实例中挂载一个公司的属性,他的值是baidu
Vue.prototype.company = "baidu"

// 实例化
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

在组件中:

// 在data中也有一个叫company的属性,他的值是google
  data () {
    return {
      company:"google"
    }
  },
  // 实例创建前打印this.company
  beforeCreate() {
    console.log(this.company)
  },
  // 实例创建后继续打印this.company
  created () {
    console.log(this.company)
  }

我们来看打印结果:

我们可以看出先打印了baidu,然后打印了google,也就是this.company属性在实例创建之后被data中的同名属性替换了,如果加上"$",就不会有这种事情发生了

 (end!) 

以上理解可能有的不到位或者错误的地方,欢迎留言指正,3Q.