| title | date | tags | categories | ||
|---|---|---|---|---|---|
JS原型理解 |
2018-08-08 16:40:45 -0700 |
|
|
js原型和原型链一直是js中一个难点，也是面试时大概率的问题，看了网上很多的说法，好像都不是那么通俗易懂。我就用简单的方式来介绍介绍，本人是前端菜鸟，说错了欢迎大家提出来。
我理解中的原型是为了继承而产生的，为了防止污染全局变量，我们可以给Person的原型加上一个sayHello方法，这也是最简单的例子（自行脑补代码），这样我们就可以在Person的实例中共享sayHello这个方法。图中的每条线其实都可以用一个属性代替，我画出来你们就一目了然了。
我们可以看到，Person构造函数可以通过prototype属性访问它自己的原型对象的，而实例化出来的对象可以通过_proto_属性访问Peroson构造函数的原型对象._proto_属性其实是非标准的属性，也就是说这是浏览器为了方便才产生的属性，为了什么方便？当然是为了调试的方便啦，所以我们还是尽量不要在代码中使用_proto_，而在调试的时候使用。
上面给的是一个简单的原型模型，我们知道，原型对象还有一个属性constructor，这个属性就是指向该对象的构造函数的。下面我们需要了解几个概念，以便我们清楚的知道原型链是什么：
1.每个构造函数都有原型对象
2.每个对象都会有构造函数
3.每个构造函数的原型都是一个对象
4.那么这个原型对象也会有构造函数
5.那么这个原型对象的构造函数也会有原型对象
这样就形成一个链式结构，也就是我们说的原型链
从图中我们就可以清楚的看到一个原型链结构，我们的原型其实也是个对象，对象也是由对象构造函数生成的，其实也就是之前的原型三角结构的延伸，可以看到，所有的对象的原型最顶层就是null。