在深入学习JavaScript原型这一块我们会碰到几个概念，原型，构造函数，原型链，下面就通过图解的方式来看看吧。

构造函数

首先我们通过构造函数创建一个对象，然后创建一个实例原型属性

function Person(){}
// prototype
Person.prototype.name = 'xiaoming';
let person1 = new Person();
let person2 = new Person();
console.log(person1.name);  // xiaoming
console.log(person2.name);  // xiaoming

这里提出了一个实例原型的概念，它是由构造函数的 prototype 属性所指向的实例原型，这里我们就有疑问了，prototype 不就是原型了吗？真的是这样吗，接着往下看，其实函数的 prototype 属性指向了一个对象，这个对象正是调用该构造函数而创建的实例原型，也就是这个例子中的 person1 和 person2 的原型。通过下面这种图我们能了解上面构造函数和实例原型的关系。

image.png

那到这里我们的实例对象和实例原型直接到底是什么关系呢？这个时候我们引出一个__proto__属性，该属性是对象和实例原型直接的纽带，MDN中是这么解释的：

Object.prototype的 __proto__ 属性是一个访问器属性（一个getter函数和一个setter函数）, 暴露了通过它访问的对象的内部[[Prototype]] 。绝大部分浏览器都支持这个非标准的方法访问原型，然而它并不存在于 Person.prototype 中，实际上，它是来自于 Object.prototype ，与其说是一个属性，不如说是一个 getter/setter，当使用 obj.proto 时，可以理解成返回了 Object.getPrototypeOf(obj)。

function Person() {}
let person = new Person();
console.log(person.__proto__ === Person.prototype); // true

这个时候添加上实例对象和实例原型之间的关系图

image.png

这里多说一句这个非正式的属性的一些注意的地方，参考MDN：

警告: 通过现代浏览器的操作属性的便利性，可以改变一个对象的[[Prototype]]属性, 这种行为在每一个JavaScript引擎和浏览器中都是一个非常慢且影响性能的操作，使用这种方式来改变和继承属性是对性能影响非常严重的，并且性能消耗的时间也不是简单的花费在obj.__proto__ = ...语句上, 它还会影响到所有继承来自该 [[Prototype]] 的对象，如果你关心性能，你就不应该在一个对象中修改它的[[Prototype]].。相反, 创建一个新的且可以继承 [[Prototype]]的对象，推荐使用Object.create();

接下来我们看一下构造函数和实例原型的关系，这里实例原型并没有指向实例，但是有一个constructor指向构造函数，如图所示：

image.png

function Person() {}
let person = new Person();

console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true

到这里我们就清楚了实例，构造函数以及实例原型之间的关系，接着往下走啊。我们知道JavaScript中都是对象，我们这里的实例原型也是对象啊，那么它指向谁呢？

原型链

当读取实例的属性时，如果实例中找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止。

function Person() {}
var person = new Person();

console.log(person.name) // undefined

Person.prototype.name = 'xiaoming';
person.name = 'hhh';
console.log(person.name) // hhh

delete person.name;
console.log(person.name) // xiaoming

我们先实例化构造函数得到一个对象，然后在没有添加属性的时候打印则为 undefined，给实例原型添加属性同时也给对象添加属性，打印我们发现如果能在对象中找到属性则不会往上查找，当我们删除对象属性会发现会从实例原型上去查找，通过person.__proto__，如果实例原型上刚好有我们就取到了数据，但是如果实例原型上也没有怎么办呢？这个时候我们就要接着往下走了，来看看实例原型的实例原型是什么 ~

image.png

假设没有扩展原型链的情况下我们的原型图会是这样的，都会指向 Object.prototype ，那这里就结束了吗？ Object.prototype 又指向谁呢？打印下发现指的是null，这里请参考阮老师的 undefined与null的区别 ，这里并不表示Object的原型是null，而是说Object是最顶层的对象，也就是说我们查到 Object.prototype 就停止查找了，再往上就没有东西了，最终的原型图就如下所示，图中的红线就是我们没有提到的原型链。

// 这里并不表示Object的原型是null，而是表示没有原型
console.log(Object.prototype.__proto__ === null) // true

image.png

总结：

函数的prototype属性指向原型，说prototype是原型略显不严谨，原型链通过__proto__链接起来，这里prototype 是函数的一个属性，并不表示原型，Person.prototype 是指向 person 实例的原型，也就是 person.__proto__，__proto__表示的是原型。