js 原型链实例探究-附原型图

关于js原型链的问题，网上的文章有很多，但是大多数对于初学者来说晦涩难懂。没有结合实例，看起来总是没有什么概念，以下是我结合一个简单的例子，绘出的原型图，如有不对，欢迎指正。

代码

代码很简单，一个构造函数，一个通过构造函数new出来的对象实例，一个直接new的出来对象，和一个函数体

function A(){
  this.c=3;
  this.d=4;
 }
 var a = new A();
 var b = new Object();
 var c = function () {console.log('c')}

我们来研究一下他们的原型（下图是以浏览器中测试结果为依据绘出）

原型图

蓝色线条为对象查找属性的原型链路径，我们可以看到，不管是函数还是对象，最终都都集中到了Object.prototype上。说明我们一但在object.prototype上增加一个属性，那么下面所有的对象都能查到该属性

Object.prototype.test = 666 
A.test //666
a.test //666
b.test //666
c.test //666

同理如果在构造函数A上增加一个方法，那么实例a，就会具有这个方法。
这种写法我们会经常看到。例如给vue增加一个全局方法可以这么写

Vue.prototype.$http = axios

从图上我们可以看出函数和普通对象的区别，普通对象是通过__proto__查找原型链，而函数是通过prototype查找