最近在准备面试，正好理一下关于原型、原型链之间的关系，看到几篇很好的文章，感觉通俗易懂，就想综合整理一下帮助自己和大家一起学习。
整理来源：
慕课网课程《前端跳槽面试必备技巧》的学习笔记
JavaScript深入之从原型到原型链
创建对象有几种方法
1.字面量创建对象(普通对象)
var s1 = {name: '陈楚', age: 18}
var o1 = new Object({
name: '陈楚',
age: 18
})
2.通过构造函数创建对象(函数对象)
var s2 = function () {
this.name = '陈楚',
this.age = 18
}
var o2 = new s2()
此处s2就是我们通常所说的构造函数，而o2则为实例对象。
此处延伸扩展通过字面量创建的普通对象和通过构造函数创建的函数对象有什么区别呢？
此处可参考文档：
字面量创建对象和构造函数创建对象的区别
3.通过object.create方法来创造对象
var s3 = {name: '陈楚'}
var o3 = Object.create(s3)
console.log(o3.name)
创建对象的三种方式了解之后大家对实例和构造函数的概念应该有一定的了解，那么什么是原型呢？了解概念之前让我们先使用构造函数来创建一个对象。
认识prototype
每个函数都有一个 prototype 属性，比如：
var s2 = function () {
this.name = '陈楚',
this.age = 18
}
s2.prototype.say = function () {
console.log(111)
}
s2.prototype.address = "洪山区"
var o2 = new s2()
console.log(o2.name) //陈楚
console.log(o2.address) //洪山区
console.log(o2.say()) //111
s2构造函数的prototype属性上的address属性和say方法都可以被o2这个实例直接调用。所以说函数的prototype属性指向了一个对象，这个对象正是调用该构造函数而创建的实例的原型，在这里也就是o2的原型。
那什么是原型呢？我们可以这样理解，每一个javascript对象(null除外)在创建的时候就会与之关联另外一个对象，这个对象就是我们所说的原型，每一个对象都会从原型继承属性和方法。
用一张图来表示构造函数和实例原型之间的关系
001.png
构造函数的prototype就是通过该构造函数生成的实例的原型，在这里可以想一下既然实例原型可以通过构造函数的prototype方法来获得，那么实例原型和实例之间又有什么关系呢？
认识_ proto _
这是每一个javascript对象(除了null)都具有的一个属性，这个属性会指向该对象的原型。
var s2 = function () {
this.name = '陈楚',
this.age = 18
}
var o2 = new s2()
console.log(s2.prototype === o2.__proto__) //true
于是我们可以更新如下关系图
002.png
实例可以通过_ proto _指向原型对象，构造函数可以通过prototype指向原型对象，那么原型对象是否有属性指向构造函数或者实例呢？
认识constructor
原型对象无法直接指向实例，因为同一个构造函数可以生成多个实例，但是原型指向构造函数倒是有，这里就引入了constructor，每个原型对象都有一个constructor属性指向关联的构造函数。
var s2 = function () {
this.name = '陈楚',
this.age = 18
}
var o2 = new s2()
console.log(s2.prototype.constructor === s2) //true
所以我们又可以得到如下关系图
003.png
通过一系列的证明，我们可以发现构造函数的prototype和实例的_ proto _都是指向原型对象，而且构造函数的prototype的constructor属性又指向构造函数自己。具体如下代码
var s2 = function () {
this.name = '陈楚',
this.age = 18
}
var o2 = new s2()
console.log(s2.prototype.constructor === s2) //true
console.log(s2.prototype === o2.__proto__) //true
初步理清了构造函数、实例原型、和实例之间的关系，那再来看看实例和原型的关系。
实例与原型
当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止。
举个栗子：
var s2 = function () {
this.name = '陈楚',
this.age = 18
}
s2.prototype.address = "洪山区"
var o2 = new s2()
o2.address = "硚口区"
console.log(o2.address) //硚口区
delete o2.address
console.log(o2.address) //洪山区
上述栗子中，我们给实例o2添加了address属性，所以在输出的时候会先访问自身实例的属性，首次打印结果自然是"硚口区"。
但是当我们删除了实例o2中的address属性时，从o2这个对象中找不到address这个属性，那么就会自动从o2的原型对象(o2._ proto )中去找，幸运的是从o2的原型对象中我们找到了address属性结果为"洪山区"。但是万一如果我们没有找到呢？原型对象既然作为一个对象，那么它应该也存在 proto _，原型对象的原型又是什么呢？
原型的原型
原型也是一个对象，那么我们用最原始的方式创建它，如下：
var obj = new Object()
obj.name = '祝敏'
console.log(obj.name) //祝敏
所以原型对象是通过Object构造函数生成的，结合前面分析的，实例的_ proto _指向构造函数的prototype，所以我们得到如下关系图
004.png
那么Object.prototype的原型呢？看代码我们可以发现输出null，所以查到属性的时候查到 Object.prototype 就可以停止查找了。
var obj = new Object()
console.log(Object.prototype.__proto__) //null
所以得到最后一张关系图
005.png
得到原型链的概念
简单理解原型链就是原型组成的链，实例的 _ proto _ 是一个原型对象，既然它是一个原型对象也有 _ proto _ 属性，原型 _ proto _ 又是原型的原型，我们就可以一直通过_ proto _向上找，这就是原型链。当向上找到Object的原型的时候，这条原型链就算到头了。也就是上图中蓝色的这条线。
补充
1、constructor
首先是 constructor 属性，我们看个例子：
function Person () {
}
var child = new Person()
console.log(child.constructor === Person) // true
what?前面说过实例是没有constructor的，这里为什么相等呢。因为child找不到这个属性就会往上找，child._ proto _就是原型对象Person.prototype，所以child.constructor === Person.prototype.constructor === Person。
2、只有函数有prototype，对象是没有的。所以字面量创建的对象和构造函数创建的对象最明显的区别就出来了，构造函数创建的对象可以继承构造函数prototype属性下面的属性和方法。但是函数也是有 _ proto _的，因为函数也是对象。函数的 _ proto _ 指向的是Function.prototype。也就是说普通函数是Function这个构造函数的一个实例。
function step () {
}
console.log(step.__proto__ === Function.prototype) //true
总结前人的一些经验进行汇总，如有错误或不严谨的地方，请务必给予指正！
原型链了解之后可以看看下一篇文章关于原型链实现继承
JavaScript实现继承
网友评论