弄懂原型对象和原型链

这些都是自己在学习的过程中整理出来的笔记，希望能帮到大家。因为自己也是个前端菜鸟，只是最前端有很浓厚的兴趣，想往这个方面发展，如果有整理不对的地方，请大家斧正。

首先我们需要知道原型是什么？

JavaScript规定，每一个构造函数都会有一个prototype属性，指向另一个对象。prototype就是原型的意思，这个prototype是一个对象，所以也通常称为原型对象。

然后我们得知道为什么会有原型这个东西，它的用途是什么？

我们知道es6提供class关键字帮助我们创建类，以及使用super关键字继承父类的属性和方法；但是在es6之前是没有class关键字的，我们都是用构造函数来创建一个实例对象。但是构造函数存在一个非常大的缺陷：内存消耗问题。就是我们使用构造函数创建类的时候，属性还好说是存在栈内的，但是方法的话是要去堆内存中开辟地址的。而这些方法代码重复性很高，当创建很多的实例对象时，就需要开辟很多内存空间，但是方法的代码重复性很高。这样的话，就很浪费内存。那能不能把公共的方法存储在一个地址，所有的实例对象调用方法时都去这个地址调用代码呢。这时就需要用到原型了。

构造函数通过原型分配的函数是所有实例对象所共享的（即原型的作用就是共享方法）

实例代码如下

function Ee(name,age) {
this.name=name,
this.age=age

};
Ee.prototype.sing=function(song)
{
console.log('我会唱'+song)}//利用原型共享方法

var ee = new Ee('zhangsan',18)//实例化对象

console.log(ee)//Ee {name: "zhangsan", age: 18}
ee.sing('closer')//我会唱closer

 可能到这里有些同学会有疑惑为什么new创建实例对象的时候不是只是创建了属性而已吗，为什么实例对象能够访问到构造函数上面的方法呢。

接下来就要说到另外一个知识点了：__proto__对象原型了。

同时，对象都会有个属性__prot__(前后都是双下划线)指向构造函数的prototype原型对象，之所以我们实例对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有--proto--原型的存在

①--proto--对象原型和prototype对象原型是等价的

②--proto--对象原型的意义就在于为对象的查找机制提供了一个方向，或者说一条路线，但是它是一个非标准属性，因此在实际开发中，不可以使用这个属性，它只是内部指向原型对象prototype。

这就是为什么实例对象能够使用构造函数原型对象上的方法的原因所在了。

对象原型，原型对象，构造函数的关系如下图

 这就是在es6之前我们实现类的操作。原型是面试过程中经常问到的题目，是比较重要的。原型在某些业务场景中会经常用到。

刚刚说了只要是对象就有会有__proto__这个属性，那原型prototype也是一个对象是不是也有一个__proto__指向另一个原型对象呢？

//使用上面的代码，输出Ee.prototype查看一下有没有__proto__
console.log(Ee.prototype)
//{sing: ƒ, constructor: ƒ}
//sing: ƒ (song)
//constructor: ƒ Ee(name,age)
//[[Prototype]]: Object

//[[prototype]]和__proto__意义相同，均表示对象的内部属性，其值指向对象原型。前者在一些书籍、规范中表示一个对象的原型属性，后者则是在浏览器实现中指向对象原型。

可以看到Ee.prototype是指向了一个新的对象；

对象原型（ --proto--）和构造函数（prototype）原型对象里面都有一个属性 constructor 属性 ，constructor 我们称为构造函数，因为它指回构造函数本身。

展开[[prototype]]可以看到：constructor: ƒ Object()；说明Ee构造函数的原型对象的__proto__是指向Object构造函数的原型对象的。接下来就能弄清楚说明原型链了：

如下图：

 

学会了原型和原型链之后我们就可以在不使用es6的类关键字也能实现继承的效果。关于继承的知识点，请看我的其他博客。