类的 prototype 属性和__proto__属性

前段时间接触到了 prototype 属性和proto属性，查了很多资料都理解不了他们的真正含义及用法，都像是在死记。不明白这个属性到底是干嘛的，为什么会有这个属性。后来看到阮一峰的一篇“Javascript继承机制的设计思想”分章才恍然大悟。

一、从古代说起

要理解Javascript的设计思想，必须从它的诞生说起。
1994年，网景公司（Netscape）发布了Navigator浏览器0.9版。这是历史上第一个比较成熟的网络浏览器，轰动一时。但是，这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。比如，如果网页上有一栏"用户名"要求填写，浏览器就无法判断访问者是否真的填写了，只有让服务器端判断。如果没有填写，服务器端就返回错误，要求用户重新填写，这太浪费时间和服务器资源了。
因此，网景公司急需一种网页脚本语言，使得浏览器可以与网页互动。工程师Brendan Eich负责开发这种新语言。他觉得，没必要设计得很复杂，这种语言只要能够完成一些简单操作就够了，比如判断用户有没有填写表单。
1994年正是面向对象编程（object-oriented programming）最兴盛的时期，C++是当时最流行的语言，而Java语言的1.0版即将于第二年推出，Sun公司正在大肆造势。
Brendan Eich无疑受到了影响，Javascript里面所有的数据类型都是对象（object），这一点与Java非常相似。但是，他随即就遇到了一个难题，到底要不要设计"继承"机制呢？

二、Brendan Eich的选择

如果真的是一种简易的脚本语言，其实不需要有"继承"机制。但是，Javascript里面都是对象，必须有一种机制，将所有对象联系起来。所以，Brendan Eich最后还是设计了"继承"。

但是，他不打算引入"类"（class）的概念，因为一旦有了"类"，Javascript就是一种完整的面向对象编程语言了，这好像有点太正式了，而且增加了初学者的入门难度。

他考虑到，C++和Java语言都使用new命令，生成实例。
C++的写法是：

ClassName *object = new ClassName(param);

Java的写法是：

Foo foo = new Foo();

因此，他就把new命令引入了Javascript，用来从原型对象生成一个实例对象。但是，Javascript没有"类"，怎么来表示原型对象呢？
这时，他想到C++和Java使用new命令时，都会调用"类"的构造函数（constructor）。他就做了一个简化的设计，在Javascript语言中，new命令后面跟的不是类，而是构造函数。
举例来说，现在有一个叫做DOG的构造函数，表示狗对象的原型。

function DOG(name){
　　　　this.name = name;
　　}

对这个构造函数使用new，就会生成一个狗对象的实例。

　var dogA = new DOG('大毛');
　　alert(dogA.name); // 大毛

三、new运算符的缺点
用构造函数生成实例对象，有一个缺点，那就是无法共享属性和方法。

比如，在DOG对象的构造函数中，设置一个实例对象的共有属性species。

function DOG(name){
　　　　this.name = name;
　　　　this.species = '犬科';
　　}

然后，生成两个实例对象：

var dogA = new DOG('大毛');
var dogB = new DOG('二毛');

这两个对象的species属性是独立的，修改其中一个，不会影响到另一个。

dogA.species = '猫科';
　　alert(dogB.species); // 显示"犬科"，不受dogA的影响

每一个实例对象，都有自己的属性和方法的副本。这不仅无法做到数据共享，也是极大的资源浪费。

四、prototype属性的引入

考虑到这一点，Brendan Eich决定为构造函数设置一个prototype属性。
这个属性包含一个对象（以下简称"prototype对象"），所有实例对象需要共享的属性和方法，都放在这个对象里面；那些不需要共享的属性和方法，就放在构造函数里面。
实例对象一旦创建，将自动引用prototype对象的属性和方法。也就是说，实例对象的属性和方法，分成两种，一种是本地的，另一种是引用的。
还是以DOG构造函数为例，现在用prototype属性进行改写：

function DOG(name){
　　this.name = name;
}
　　DOG.prototype = { species : '犬科' };
　　var dogA = new DOG('大毛');
　　var dogB = new DOG('二毛');
　　alert(dogA.species); // 犬科
　　alert(dogB.species); // 犬科

现在，species属性放在prototype对象里，是两个实例对象共享的。只要修改了prototype对象，就会同时影响到两个实例对象。

DOG.prototype.species = '猫科';
alert(dogA.species); // 猫科
alert(dogB.species); // 猫科

五、总结

由于所有的实例对象共享同一个prototype对象，那么从外界看起来，prototype对象就好像是实例对象的原型，而实例对象则好像"继承"了prototype对象一样。
现在在让我们来复习一下构造函数

function Person(name, age, job) {
 this.name = name;
 this.age = age;
 this.job = job;
}
var person1 = new Person('张三', 20, '老师');
var person2 = new Person('李四', 22, '会计');

上面的例子中 person1 和 person2 都是 Person 的实例。这两个实例都有一个 constructor （构造函数）属性，该属性（是一个指针）指向 Person。 即：

console.log(person1.constructor == Person); //true
 console.log(person2.constructor == Person); //true

我们要记住两个概念（构造函数，实例）：
person1 和 person2 都是 构造函数 Person 的实例
我们要记住：实例的构造函数属性（constructor）指向构造函数。

什么是原型链？

JavaScript 中的对象，有一个特殊的 [[prototype]] 属性, 其实就是对于其他对象的引用（委托）。当我们在获取一个对象的属性时，就会顺着protp属性往上在构造函数的prototype找，找到了就停止，没找到继续往上到Object.prototype找，再没找到就到null了，自然也找不到就只能返回undifined，这种链式的引用就是原型链，通过原型链实现继承还是很方便的。
参照原型链关系示意图，查看如下结论
1、每个函数都有一个原型属性 prototype 对象。 eg.函数A就有一个原型属性prototype，A.prototype

2. 每个原型对象都有一个 constructor 属性指向关联的构造函数。如：原型对象a有一个constructor属性指向构造函数A。a.constructor ==A//true
   3、原型链顶层：Object.proto == null

原型链关系示意图

var A = function() {};var a = new A();console.log(a.__proto__); 
 // A {};  实例对象a的原型是构造器A的原型对象console.log(a.__proto__.__proto__); 
 // Object {} 构造器A的原型是function Object的原型对象console.log(a.__proto__.__proto__.__proto__);  // null
a.__proto__ === A.prototype//true

对象的隐式原型的值为其对应构造函数的显式原型的值

image.png

看完这张图，我再来解释下什么是原型链吧。其实原型链就是多个对象通过 proto 的方式连接了起来。为什么 obj 可以访问到 valueOf 函数，就是因为 obj 通过原型链找到了 valueOf 函数。

对于这一小节的知识点，总结起来就是以下几点：
Function引擎创建的，觉得不需要给它prototype属性
Object也是引擎创建的
Object 是所有对象的爸爸，所有对象都可以通过 proto 找到它
Function 是所有函数的爸爸，所有函数都可以通过 proto 找到它
函数的 prototype 是一个对象
对象的 proto 属性指向原型， proto 将对象和原型连接起来组成了原型链