浅析JS原型 原型链

最近前端要用到的技术栈差不多学完了，正在肝JS高级，看了很久的课，很折磨，在这里小结一下自己对这俩部分内容的理解，希望相对语义化的理解能让大家更容易理解。

一.什么是原型（原型对象）(prototype) 

我们所创建的每一个函数（以MyClass为例），JS解析器都会向函数中添加一个属性prototype，存放了对应着指向prototype原型对象的地址。那么为什么需要原型这个概念呢？个人理解为，如图中不论是实例对象还是构造函数，都是借助原型对象产生的，或者可以抽象理解为你要声明构造函数，那JS就会也根据JS中创建函数的规则为你创建相应的原型对象。

注意：

函数的原型对象本质上默认是一个空的object实例对象。为什么这么说呢？因为原型对象也是对象，也是任意object的实例对象，在函数还没有具体内容的时候便是空的object实例对象。

二.显式原型与隐式原型

当函数以构造函数的形式调用（如var fn=new MyClass（））时，它所创建的实例对象fn中都会有一个隐含的属性__proto__（隐式原型）,它指向该构造函数的原型对象，通过__proto__就可以访问到该属性（即该构造函数的原型对象）。

这里附图让大家更便于理解：

如图：构造函数为Foo（），f1是该构造函数的实例对象 ，那么f1 instanceof foo是否成立？

结果是True。

f1的隐式原型属性__proto__（图中虚线）可以访问到构造函数Foo的原型对象Foo.prototype（显式原型），而构造函数Foo的原型对象也是Foo.prototype,那么通俗的理解就是它俩是一个爹生的。

（Foo.prototype通过construtro属性“创造”了Foo构造函数，Foo构造函数创建了f1实例对象。）

三.原型链

当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如具有则直接使用，
如果没有则会去原型对象中寻找，直到找到object对象的原型。如果找到就可以直接使用。（也可以理解为冒泡）

原型对象就相当于一个公共的区域，所有。结合我们使用vue做项目的经验来看，当我们多个组件都要用到同一个数据时，把这个数据放到vm上，所有组件都可以从vm上拿到到这个数据，那对应这里同一个类的实例对象都可以访问这个原型对象也就很好理解了。

如果找不到查找的属性/方法它会一直顺着原型链找下去吗？

原型链是有尽头的。原型链的尽头是object对象的原型。因为object对象的原型没有原型对象。

这里要注意理解，虽然说尽头是object的原型对象，但要清楚object对象是object的原型对象创建的实例对象，是有__proto__（隐式原型）属性的，只是object.__proto__返回null。