JavaScript中Prototype、__proto__

“__proto__”

JavaScript是一个面向对象语音，即一切皆对象。

那么怎么生成对象？在Java的世界里，对象是由类（Class）实例出来的，通俗地说，就是将事物抽象成一个模具，用这个模具（类）生产出一个个具体的实物（对象）。

可是JS中没有类这个概念，有的是“原型”，对象是由原型衍生出来的。通俗地说，在JS的世界里，“原型”并不是一个模具，而是一个具体的实物（对象）。所有对象都是由另一个对象衍生出来的，而这个被衍生的对象就是所谓的“原型对象”。

每一个对象自动生成一个属性：__proto__，这个属性是一个引用对象，其指向这个对象的“原型对象”。

Talk is cheap, show me the code! 咱们来看看代码：

var obj = {};
console.log(obj);

咱们将__proto__展开看看：是一些默认方法。

你一定会发生这个__proto__对象中也有一个__proto__对象，正如我们刚才说的，每个对象都有一个__proto__属性指向它的原型对象。我们打印一下这个__proto__中的__proto__：

console.log(obj.__proto__.__proto__); //--> null

结果是null，说明已经到了顶层原型对象。obj是用大括号{}定义的，obj的原型对象自然是JS的顶层对象。

咱们再看一端代码，加强下理解：

var parent = {
    name : "parent"
};
var child = {
    name : "child",
    __proto__ : parent
};
var subChild = {
    name : "subChild",
    __proto__ : child
}
console.log(subChild);

subChild.__proto__ --> child
child.__proto__ --> parent
parent.__proto__ --> 顶层原型对象

prototype

上面我们说到，每一个对象都包含一个__proto__，指向这个的对象的“原型”。
类似的事情是，每一个函数都包含一个prototype，这个prototype对象干什么的了？

咱们看看如下代码，用构造函数来创建一个对象（上面是用字面量的形式创建对象）。

function Foo(){};
var foo = new Foo();
console.log(foo.__proto__);

试想想，这个foo对象的__proto__会指向什么？

一个包含constructor属性的对象？看不太懂没关系，把函数Foo的prototype属性打印出来，对比一下就知道了。

function Foo(){};
var foo = new Foo();
console.log(foo.__proto__);
console.log(Foo.prototype);
console.log(foo.__proto__ === Foo.prototype);

原来，new出来的对象foo的__proto__就只指向函数Foo的prototype。
foo.__proto__ --> Foo.prototype

JS这么设计有何意义了？回忆下上面说的，在JS的世界中，对象不是根据类（模具）创建出来的，而是从原型（另一个对象）衍生出来的。

当我们执行new操作创建一个新的对象时，先不深入new操作的具体实现，但有一点我们是肯定的——就是为新对象的__proto__指向一个原型对象。

就刚才这段代码

function Foo(){};
var foo = new Foo();

foo.__proto__到底要指向谁了？你怎么不能指向Foo这个函数本身吧，虽然函数也是对象，这个有机会会详细讲。但如何foo.__proto__指向Foo固然不合适，因为Foo是一个函数，有很多逻辑代码，foo作为一个对象，继承逻辑处理没有任何意义，它要继承的是“原型对象”的属性。

所以，每个函数会自动生成一个prototype对象，由这个函数new出来的对象的__proto__就指向这个函数的prototype。
foo.__proto__ --> Foo.prototype

总结

说了这么多，感觉还是没完全说清楚，不如上一张图。我曾经参考过其他网友的图，但总觉得哪里没说清楚，所以我自己画了一张图，如果觉得我的不错，请点个赞！（老子可是费了牛劲才画出来）。

（点击可放大）

咱们就着这张图，记住如下几个事实：

1. 每个对象中都有一个_proto_属性。

JS世界中没有类（模具）的概念，对象是从另一个对象（原型）衍生出来的，所以每个对象中会有一个_proto_属性指向它的原型对象。（参考左上角的那个用字面量形式定义的对象obj，它在内存中开辟了一个空间存放对象自身的属性，同时生成一个_proto_指向它的原型——顶层原型对象。）

2. 每个函数都有一个prototype属性。

“构造函数”为何叫构造函数，因为它要构造对象。那么根据上面第一条事实，构造出来的新对象的_proto_属性指向谁了？总不能指向构造函数自身，虽然它也是个对象，但你不希望新对象继承函数的属性与方法吧。所以，在每个构造函数都会有一个prototype属性，指向一个对象作为这个构造函数构造出来的新对象的原型。

3. 函数也是对象。

每个函数都有一些通用的属性和方法，比如apply()/call()等。但这些通用的方法是如何继承的呢？函数又是怎么创建出来的呢？试想想，一切皆对象，包括函数也是对象，而且是通过构造函数构造出来的对象。那么根据上面第二条事实，每个函数也会有_proto_指向它的构造函数的prototype。而这个构造函数的函数就是Function，JS中的所有函数都是由Function构造出来的。函数的通用属性与方法就存放在Function.prototype这个原型对象上。