整理学习——JavaScript中的原型和原型链

（自己默默地理了一整天搞出来的东西，以下都是个人理解，大佬觉得我理解有错的话请评论区告诉我，Thanks♪(･ω･)ﾉ）

原型

prototype属性，他指向了包含了其所属对象以及其所属对象的构造函数的所有的属性和方法。换句话说，就是包含了构造函数给实例能够直接调用的属性和方法。

首先从构造函数说起吧……

构造函数

通过构造函数new出来的对象都具有相同的特点(属性)和行为(方法)。

//构造函数func
function func(){
	var elem = 0;
	var method = function(){};
	
	this.funcElem = 0;
	this.funcMethod = function(){};
}
//创建实例
var instanceFunc = new func();

以上是构造函数和他创建的实例。
然后来看看实例能访问到的和不能访问到的

console.log(instanceFunc.elem);
//Output: undefined

console.log(instanceFunc.method);
//Output: undefined

console.log(instanceFunc.funcElem);
//Output: 0

console.log(instanceFunc.funcMethod);
//Output: f(){}

elem和method是构造函数func的私有变量和私有函数，因为作用域只在func内，而外部不能直接访问。可以在构造函数内添加以下代码。

this.printElem = function() {
	console.log(elem);
}

进行实例化后，运行

instanceFunc.printElem();
//Output: 0

实例里面可以也有这个变量，但是也是不能直接访问。

原型和原型链

每一个构造函数（func）都有一个prototype属性（原型），这个属性指向了原型对象。
通过new，可以新建一个实例（instanceFunc），而每个实例都有一个__proto__ ，他指向了他的原型对象
实例的原型对象中含有一个constructor属性，这个constructor指向了构造函数（func）的prototype
或许文字这么说很懵，用图来表示一下
1）每一个构造函数（func）都有一个prototype属性，这个属性指向了原型对象。

console.log(func.prototype)

2）通过new，可以新建一个实例（instanceFunc）

var instanceFunc = new func();

每个实例都有一个__proto__ (前后各两个下划线那个)，他指向了他的原型对象

3）实例的原型对象中含有一个constructor属性，这个constructor指向了构造函数（func）的prototype

那么合起来就是以下的图

再扩展一下，JavaScript中几乎都是对象，那么构造函数是Object的一个实例。完整的原型链如下

PS：__proto__想加粗加不上，有人能告诉我吗？
参考：
https://www.cnblogs.com/youxin/p/3219175.html
https://segmentfault.com/a/1190000018895543
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain【搜索：MDN 原型链】
https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/Object_prototypes【搜索：MDN 原型】