浅析JS原型与原型链

一、原型

原型的出现，就是为了解决构造函数只能添加属性而不能添加方法的缺点。通过构造函数可以动态地给对象添加属性，但是却不能添加方法，其实是有点不合理的。

原型对象：在声明了一个函数之后，浏览器会自动按照一定的规则创建一个对象，这个对象就叫做原型对象。这个原型对象其实是储存在了内存当中。

二、prototype

构造函数：通俗的一句话说，就是你在script标签里面声明的那个函数。

prototype是每一个函数自带的成员。即然每一个函数都有，构造函数也是函数，那么构造函数也有这个属性，这个属性指向的是这个构造函数。这个 prototype 属性可以由函数名来访问。我们发现， prototype 的空间是和函数有关联的并且可以向里面存储一些东西，重点： 在函数的 prototype 里面存储的内容，不是给函数使用的，是给函数的每一个实例化对象使用的。那实例化对象怎么使用呢？

三、proto

每一个对象都天生自带一个成员，叫做 proto(前后都有两个下划线，这里显示不出来)，是一个对象空间。即然每一个对象都有，实例化对象也是对象，那么每一个实例化对象也有这个成员。这个 proto 对象空间是给每一个对象使用的。

当你访问一个对象中的成员的时候，如果这个对象自己本身有这个成员，那么就会直接给你结果，如果没有，就会去 proto 这个对象空间里面找，里面有的话就给你结果。

那么这个 proto 又指向哪里呢？

这个对象是由哪个构造函数 new 出来的那么这个对象的 proto 就指向这个构造函数的 prototype。

var p = new Person()
console.log(p.__proto__ === Person.prototype) // true

我们发现实例化对象的 proto 和所属的构造函数的 prototype 是同一个对象空间。我们可以通过构造函数名称来向 prototype 中添加成员，对象在访问的时候自己没有，可以自动去自己的 proto 中查找，那么我们之前构造函数的缺点就可以解决了。

我们可以把函数放在构造函数的 prototype 中实例化对象访问的时候，自己没有，就会自动去 proto 中找。

Person.prototype.sayHi = function () {
	console.log('hello Person')
}
p.sayHi()

p 自己没有 sayHi 方法，就会去自己的 proto 中查找p.proto 就是 Person.prototype我们又向 Person.prototype 中添加了 sayHi 方法所以 p.sayHi 就可以执行了。

到这里，当我们实例化多个对象的时候，每个对象里面都没有方法。都是去所属的构造函数的 protottype 中查找，每一个对象使用的函数，其实都是同一个函数，这就弥补了构造函数的缺点。

console.log('hello')
var q = new Person()
console.log(p.sayHi === q.sayHi)

p是 Person 的一个实例,q 也是 Person 的一个实例，也就是说 p.proto 和 q.proto 指向的都是 Person.prototype。当 p去调用 sayHi 方法的时候是去 Person.prototype 中找，当 q去调用 sayHi 方法的时候也是去 Person.prototype 中找。那么两个实例化对象就是找到的同一个方法。

结论：当我们写构造函数的时候，属性我们直接写在构造函数体内，方法我们写在原型上。

四、原型链

我们说构造函数的 prototype 是一个对象，每一个对象都天生自带一个 proto 属性。那么构造函数的 prototype 里面的 proto 属性又指向哪里呢？

每一个对象都有一个自己所属的构造函数比如： 数组、函数

var arr = []
var arr1 = new Array()

var fn = function () {}
var fun = new Function()

创造一个数组我们就说数组所属的构造函数就是 Array。创造一个函数我们就说函数所属的构造函数就是 Function。

对象的 proto 里面也有一个成员叫做 constructor。这个属性就是指向当前这个对象所属的构造函数。

当一个对象我们不知道准确的是谁构造的时候，我们就把它看成 Object 的实例化对象，也就是说，我们的构造函数的 prototype 的 proto 指向的是 Object.prototype。那么 Object.prototype 也是个对象，那它的 proto 又指向谁呢？因为 Object 是 js 中的顶级构造函数，js中万物皆对象，所以 Object.prototype 就到顶了，Object.prototype 的 proto 就是 null。

访问原则：
我们之前说过，访问一个对象的成员的时候，自己没有就会去 proto 中找，如果 proto 里面没有就再去 proto__的__proto 里面找。找到 Object.prototype 里面都没有，就会返回 undefiend。

到这里，我们就会觉得，如果是赋值的话，那么也会按照原型链的规则来但是： 并不是！并不是！并不是！ 重要的事情说三遍。赋值的时候，就是直接给对象自己本身赋值，如果原先有就是修改原先没有就是添加不会和 proto 有关系。

总结：
当我想完成一个功能的时候先看看内置构造函数有没有能给我提供一个完成功能对象的能力。如果没有，就自己写一个构造函数，能创造出一个完成功能的对象，然后再用我们写的构造函数 new 一个对象出来，帮助我们完成功能就行了。

五、案例

function SuperType(){//定义一个构造函数
	this.property = true;
}

SuperType.prototype.getSuperValue = function(){//在构造函数中添加一个方法
	return this.property();
}

function SubType(){//定义第二个构造函数
	this.subproperty = false;
}

SubType.prototype = new SuperType();//继承SuperType

SubType.prototype.getSubValue = function(){//在构造函数中添加一个方法
	return this.subproperty;
}

var instance = new SubTyper();

alert(instance.getSuperValue());//true

以上代码定义了两个类型：SuperType和SubType。每个类型分别有一个属性和一个方法。它们的主要区别是SubType继承了SuperType，而继承是通过SuperType的实例。原来存在于SuperType的实例中的所有属性和方法，现在也存在于SubType.prototype中了。

最后结果是：instance指向SubType的原型，SubType的原型又指向SuperType的原型。
详情参考《JavaScript高级程序设计》P163