JS原型和原型链
JS原型和原型链
原型
prototype
_proto _
constructor
实例与原型
原型的原型
原型链

JS原型和原型链
原型
prototype
在javascript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象
例如：
function Person(age){
	this.age = age
}
Person.prototype.name="小花"
var person1 =  new Person()
var person2 = new Person()
console.log(person1)  // 小花
console.log(person2) // 小花

上述例子中，函数的prototype指向了一个对象，这个对象就是调用构造函数时创建的实例的原型，也就是person1和person2

原型的概念：每个javascript对象（null除外）创建的时候，就会与之关联另一个对象，这个对象就是我们说的原型，每个对象都会从原型中“继承”属性

也可以这样理解：原型（prototype）是function对象的一个属性，它定义了构造函数制造对象的公共祖先（公共属性和公共方法），通过该构造函数产生的对象，可以继承原型的属性和方法。原型也是对象

通俗点讲：原型就是对象的模板

我们用张图来表示 构造函数和实例原型之间的关系

_proto _
每个对象（null除外）都会有的属性，叫做_proto_，指向该对象的原型
function Person(){
}
var person = new Person()
console.log(person._proto_ === Person.prototype) // true

而关系图



补充说明：

绝大数的浏览器都支持这个非标准的方法来访问原型，然而它并不存在Person.prototype中，实际上，它存在Object.prototype，与其说是一个属性不如说是一个getter/setter,当使用obj.proto,可以理解为返回了Object.getPrototype(obj)

constructor
每个原型都有一个constructor属性，指向该关联的构造函数
function Person(){
}
console.log(Person===Person.prototype.constructor) // true

更新关系图:


function Person(){
}
var person = new Person()
console.log(person._proto_  == Person.prototype ) // true
console.log(Person.prototype.constructor == Person) // true
//顺便学个ES5的方法，获取对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) //true

补充说明
function Person (){
}
var person = new Person()
console.log(person.constructor === Person) //true 

当获取 person.constructor 时，其实Person中并没有constructor属性，当不能读取到construcor属性时，就会从person的原型也就是Person.prototype中读取，正好该原型中有该属性，所以
person.constructor == Person.prototye.constructor

实例与原型
当获取实例的属性时，如果找不到，就会查找与对象关键的原型的属性，如果还找不到就找原型的原型，一直找到最顶层为止
function Person(){
}
Person.prototype.name = '小花'
var person = new Person()
person.name = '大花'
console.log(person.name) //大花
delete person.name
console.log(person.name)  //小花

这个例子中给实例对象person添加了name 属性，当我们打印person.name的时候，结果自然为大花

当我们删除了实例对象的name属性，读取person的name时，从person对象中找不到name属性就会从person的原型（person._proto _）上找,也就是Person.prototype，找到了name属性，结果为小花

但万一找不到那？原型的原型又是什么？
原型的原型
在前面讲，原型其实也就是个对象，既然是对象，我们就以最原始的方法创建它，那就是:
var object = new Object()
object.name = '小花'
console.log(object.name)

其实原型对象就是通过Object构造函数生成的，结合之前所讲，实例的_proto _指向构造函数的prototype，所以我们再更新关系图：


原型链
简单回顾一下构造函数、原型和实例之间的关系：

每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原生对象的内部指针。那么我们假如让原型对象等于另一个类的实例，结果会怎么样？显然此时，原型对象包含一个指向另一个原型的指针，相应的另一个原型也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立。如此层层递进，就构成了实例与原型的链条。这就是所谓的原型链的概念。

简单来说就是上实例与原型和原型与原型的过程

综上所诉：那Object.pprototype的原型呢
console.log(Object.prototype._proto _ === nulll) //true


null表示没有对象，即此处不应该有值

最后一张关系图可以更新为:



图中由相互关联的原型组成的链状结构就是原型链，也就是蓝色的这条线。