JavaScript原型和原型链简单理解

简单理解原型

将构造函数、原型、实例想象成3个房子。
构造函数的房子里住了prototype，
原型的房子里住了constructor，
实例的房子里住了__proto__。

他们的关系如下所示：
其实很好理解：构造函数的英语是constructor，原型的英语是prototype。
因此构造函数的prototype和实例的__proto__都指向了原型，原型的constructor指向了构造函数。

举例，如下列代码：
构造函数就是Person，实例就是p1(通过new Person构造出)，原型就是Person.prototype。

function Person(name, age){
  this.name = name,
  this.age = age
}

let p1 = new Person("zhangsan","22")
console.log(Person.prototype === p1.__proto__)//true
console.log(Person.prototype.constructor === Person)//true

再举一个JS自己的构造函数的例子

let s1 = "zhangsan" //此处等同于let s1 = new String("zhangsan")
console.log(String.prototype === s1.__proto__) //true
console.log(String.prototype.constructor === String) //true

简单理解原型链

原型链在原型的基础上就是prototype的房子里多了个__proto__属性指向了它的上级（也是原型）。
也可以理解成：子的原型成了父的原型的实例，而实例都有个__proto__属性指向原型，因此子的原型下也有个__proto__属性指向父的原型。

由于JS中所有都是对象（Object），因此最后会指向Object.prototype，Object.prototype也拥有__proto__属性，它指向null。

console.log(Object.prototype.__proto__ === null) //true

看下面的例子

function Father(){
  this.a = true
}
function Son(){
  this.b = true
}
// new Father()会创造出Father的实例
// 这一句将Son的原型成为Father的一个实例
Son.prototype = new Father()
console.log(Son.prototype.__proto__ === Father.prototype)//true
console.log(Father.prototype.__proto__ === Object.prototype)//true
console.log(Object.prototype.__proto__ === null)//true

可以看出，当通过Son.prototype = new Father()将它们连接以后，Son原型下的__proto__指向了Father原型，Father原型下的__proto__指向了Object原型，Object原型下的__proto__指向了null。
如下图所示（constructor、实例间的指示关系在下图没画，试试自己能不能画出来）。