prototype详解及prototype、new之间的关系

1.prototype解释

在JavaScript中，prototype对象是实现面向对象的一个重要机制。
每个函数就是一个对象（Function），函数对象都有一个子对象 prototype对象，类是以函数的形式来定义的。prototype表示该函数的原型，也表示一个类的成员的集合。
在通过new创建一个类的实例对象的时候，prototype对象的成员都成为实例化对象的成员。
1、该对象被类所引用，只有函数对象才可引用；
2、在new实例化后，其成员被实例化，实例对象方可调用。
同时，函数是一个对象，函数对象若直接声明成员，不用被实例化即可调用。

上面两点很重要，第一点(该对象被类所引用，只有函数对象才可引用)：只有当一个对象被定义为函数对象时，才拥有对prototype对象引用的prototype属性，这点必须知道，因为这牵涉到了new一个对象的过程中js引擎要完成对prototype进行一系列操作，而普通的js对象由于并不能被new，即使拥有prototype也是无意义的；第二点在我之前的文章中已讨论过（改变this的引用，为实例对象直接定义成员属性），所以若直接在函数对象中声明成员，无法被实例对象访问。

2.prototype作用

上面说了prototype的一些定义，那么prototype有什么作用。上一段落中其中解释了prototype的作用，“通过new创建一个类的实例对象时，prototype对象的成员都成为实例化对象的成员”，意思就是我们可以为new创建的实例对象动态添加成员变量，而无需在函数对象中定义所有的属性和方法。如下代码：

function animal(){

}

animal.prototype.name = "animal";
animal.prototype.move = function(){

alert("i can move");
}

var animalObj = new animal();
alert(animalObj.name);
animalObj.move();

运行结果：





通过new创建一个函数对象的实例对象时，该函数对象的prototype原型对象的成员都能被实例对象访问。之前在我的前一篇文章中《js中this关键字探讨》就模拟了一下new一个对象的过程，但是当时我们并没有涉及到prototype对象，那么涉及到了prototype对象，这个过程又到底是怎么实现的呢？

3.new过程中对prototype对象的操作

一个函数对象被new实例化成为实例对象时，可以分解为以下三步（用上面的animal对象作为例子）：

第一步：定义animalObj = {}；
第二步：animalObj .__proto__ = animal.prototype；
第三步：animal.call(animalObj );

OK，这里需要解释一下__proto__：每个对象都在其内部初始化一个属性，就是__proto__，当访问一个对象属性时，如果内部不存在这，就会去__proto__里找，__proto__又会有自己的__proto__，于是一直找下去，这就是原型链的概念。

当访问animalObj 的name和move属性时，animalObj并没有这些属性，就会去__proto__中找，在第二步中，__proto__指向了animal.prototype,所以animal.prototype定义了name和move属性，所以就可以访问这些属性。那么到底怎么验证我们对于__proto__的结论呢？

按照标准__proto__不对外公开，是个私有属性，但chrome的引擎将其暴露出来成一个共有的属性，可对外访问和设置，IE不能直接访问，如下：

alert(animalObj.__proto__ === animal.prototype);

运行结果：



总结：当一个函数对象被被new为一个实例对象时，函数对象的prototype对象中的属性并没有直接成为实例对象的成员属性，而是成为实例对象的__proto__对象中的属性，而函数对象中的成员（需要使用this关键字）会被改变引用直接成为实例对象的成员属性

4.prototype扩展：实现js对象的继承

上面说到，当访问一个对象的成员属性时，如果对象本身没有该属性时，会去它的__proto__对象中找，如果找不到，继续找__proto__的__proto__对象中的属性，一直往下找。可以利用这一特性，实现类似于java中的继承，如下代码：

// 动物"类"（构造函数）
function animal(){

}

animal.prototype.name = "animal";
animal.prototype.move = function(){

alert("i can move");
}

// 定义一个cat对象，继承animal中的成员
function cat(){

}

//prototype实现继承
cat.prototype = new animal();

// 为cat.prototype增加成员
cat.prototype.detail = "I am a cat , I am also an animal";

// cat的实例对象，访问成员属性
var c = new cat();
alert(c.detail);
alert(c.name);
c.move();

运行结果：







过程拆分：
1.var a = new animal(); 得出a.__proto__ = animal.prototype
2.cat.prototype = a，cat.prototype.__proto__ = a.__proto__
3.var c = new cat(),得出c.__proto__ = cat.prototype,所以c.__proto__.__proto__ = animal.prototype;

所以，当访问c的detail时，本身找不到该属性，会找__proto__(即cat.prototype)中是否有该属性，找到了该属性，同理，访问name和move属性时，会继续往下遍历__proto__中是否有该属性。

这也就是原型链的实现原理。本质上prototype只是一个假象，在实现原型链中只起到辅助作用，只是在new的时候有价值，原型链的本质，其实在于__proto__