理解JS中的原型和原型链

1.原型
JavaScript 是一门面向对象的语言。殊不知，JavaScript的世界中的对象，追根溯源来自于一个 null。在 ECMAScript 5 中，创建对象，一般有三种方法：
对象字面量：var point = {x:0 , y:0} ;
new 和构造函数：var a = new Array() ;
Object.create()：var o1 = Object.create({x:1 , y:2})

1.1概念

绝大部分 JavaScript 对象（null 除外）都和另一个对象相关联，即原型，指向该原型对象的内部指针则是proto。每一个对象都从原型继承属性。

• 通过对象字面量创建的对象都有同一个原型对象，可以通过 proto 获取原型对象。
• 通过new 和构造函数创建的对象的原型就是构造函数的 prototype 属性的值，简单地说，通过 new Array()创建的对象的原型就是 Array.prototype。而 Array.prototype则是继承自 Object.prototype。
• 通过Object.create()方法来创建对象，传入的参数为原型对象。

没有原型的对象为数不多，Object.prototype 就是其中之一，它不继承任何属性，所有的内置构造函数都具有一个继承自 Object.prototype 的原型。

1.2 proto、prototype和constructor属性
原型对象prototype：有一个默认的constructor属性，用于记录实例是由哪个构造函数创建；指向该构造函数的原型对象。
constructor：原型对象中的属性，指向该原型对象的构造函数
属性__proto__：是一个对象，它有两个属性，constructor和__proto__；

实例原型与构造函数的关系图：

function Person(name, age){
  this.name = name;
  this.age = age;
}
let person = new Person('xiao hong', 18);

可以得到：

person._proto_ === Person.prototype;
Person.prototype.constructor === Person;

• Object：
  Object是一个函数对象，Object的原型就是一个Object对象，它里面存在着一些对象的方法和属性，例如最常见的toString方法。
• 新建对象：
  用new Object或者{}建的对象是普通对象，它没有prototype属性，只有__proto__属性，它指向Object.prototype。
• Array：
  Array也是一个函数对象，它的原型就是Array.prototype，它里面存在着一些数组的方法和属性，例如常见的push，pop等方法。
• Function：
  Function也是一个函数对象，但它有点特殊，它的原型就是一个function空函数。
• 自定义函数：
  它的原型就是你给它指定的那个东西。如果你不指定，那它的原型就是一个Object.prototype。

原型对象的作用，是用来存放实例中共有的那部份属性、方法，可以大大减少内存消耗。

2.原型链

2.1概念
在JavaScript 中，每个对象都有一个指向它的原型（prototype）对象的内部链接。这个原型对象又有自己的原型，直到某个对象的原型为 null 为止（也就是不再有原型指向），组成这条链的最后一环。这种一级一级的链结构就称为原型链（prototype chain）。

可以用以下三句话来理解原型链：
每个对象都拥有一个原型对象: newObj的原型是foo.prototype。
对象的原型可能也是继承其他原型对象的: foo.prototype也有它的原型Object.prototype。
一层一层的，以此类推，这种关系就是原型链。

原型链基本思路（图解）：

2.2 原型链的终点: Object.prototype
Object.prototype是原型链的终点，所有对象都是从它继承了方法和属性。Object.prototype没有原型对象
下面是两个验证例子:
字符串原型链的终点：Object.prototype

let test = '由String函数构造出来的'
let stringPrototype = Object.getPrototypeOf(test) // 字符串的原型
stringPrototype === String.prototype // true 字符串的原型是String对象
Object.getPrototypeOf(stringPrototype) === Object.prototype // true String对象的原型是Object对象

函数原型链的终点:Object.prototype

let test = function () { }
let fnPrototype = Object.getPrototypeOf(test)
fnPrototype === Function.prototype // true test的原型是Function.prototype
Object.getPrototypeOf(Function.prototype) === Object.prototype // true

2.3 属性查找
当查找一个对象的属性时，JavaScript 会向上遍历原型链，直到找到给定名称的属性为止，到查找到达原型链的顶部 - 也就是 Object.prototype - 但是仍然没有找到指定的属性，就会返回 undefined.属性在查找的时候是先查找自身的属性，如果没有再查找原型，再没有，再往上走，一直插到Object的原型上，所以在某种层面上说，用 for in语句遍历属性的时候，效率也是个问题。

总结：

• 当你new一个构造函数的时候，创建一个函数实例，那么 『 函数实例.proto === 该构造函数.prototype』
• 所有的函数都是由Function构造出来的，那么 『被构造出来的其他函数.proto === Function.prototype』
• 所有的构造函数的原型对象都是由Object构造出来的，那么 『所有的构造函数.prototype.proto === Object.prototype』