说到 prototype、__proto__ 首先就得去理解 JavaScript 语言的继承机制。在典型的面向对象的语言中，如C#，都存在类（class）的概念， 类就是对象的模板，对象就是类的实例。C# 中的 继承允许我们根据一个类来定义另一个类，这使得创建和维护应用程序变得更容易。同时也有利于重用代码和节省开发时间。在 JavaScript 是不存在 类 和 子类 概念的，全靠原型链的模式来实现继承 (后面出 class 在这基础上的语法糖)。
这里举一个简单 C# 类和继承例子，一类 People，其中包含一个 Say 方法。另外两个类 Man 和 Woman 都继承 People 这个类，这样这两个子类都拥有了父类的 Say 方法，这是一个典型的继承。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
using System;
namespace ConsoleApp
{
class Program
{
static void Main(string[] args)
{
Man man = new Man();
man.Work();
man.Say("累死爷了");
Woman woman = new Woman();
woman.Shop();
woman.Say("花钱真爽");
Console.Read();
}
}
class People
{
public People()
{
}
public void Say(string text)
{
Console.WriteLine(text);
}
}
class Man : People
{
public void Work()
{
Console.WriteLine("工作工作.....赚钱赚钱...");
}
}
class Woman : People
{
public void Shop()
{
Console.WriteLine("买买买.....");
}
}
}
|
prototype 的由来
当初 JavaScript 之父在开发 JavaScript 的时候，觉得没有必要做的很复杂，只需要做些简单操作就可以了，所以没有引入类的概念。
在 JavaScript 中也是通过 new 生成一个对象实例的，例如在 C# 中生成一个对象实例会这样写 new People()，会调用类的构造函数。在 JavaScript 简化了这个操作，new 后面跟的不是类，而是构造函数。
用 JavaScript 来实现上面 C# 例子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| var people = {
Say:function(text){
console.log(text)
}
}
function Man(){
this.Work=function(){
console.log("工作工作.....赚钱赚钱...");
}
this.Say=people.Say;
}
function Woman(){
this.Shop=function(){
console.log("买买买.....");
}
this.Say=people.Say;
}
var man = new Man();
man.Work();
man.Say("累死爷了");
var woman = new Woman();
woman.Shop();
woman.Say("花钱真爽");
|
但是用构造函数生成实例对象，有一个缺点，那就是无法共享属性和方法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| people.Say=function(){
console.log("...")
}
man.Say("累死爷了");
woman.Say("花钱真爽");
var man2=new Man();
man2.Say();
man.Say=null;
woman.Say("花钱真爽");
|
每一个实例对象，都有自己的属性和方法的副本。这不仅无法做到数据共享，也是极大的资源浪费。于是 JavaScript 之父 为了解决这个问题就在构造函数加入了个 prototype 属性。这个属性是一个对象(常称 原型对象)，把一些公用的属性和方法都放在这个对象里，一些是私有的就放在构造函数里。
实例对象被创建时候，会自动引用原型对象的属性和方法，这样实例对象属性就分为两种了，一种是构造函数里私有自己的，另一种则是来着引用 原型对象。一旦原型对象属性和方法修改后，实例的对象也会跟着变化。原型对象 不仅共享了数据，也减少了对资源的占用。
那么用 JS 来实现上面 C# 例子就可以这样写
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| var people = {
Say:function(text){
console.log(text)
}
}
function Man(){
this.Work=function(){
console.log("工作工作.....赚钱赚钱...");
}
}
Man.prototype = people;
function Woman(){
this.Shop=function(){
console.log("买买买.....");
}
}
Woman.prototype = people;
var man = new Man();
man.Work();
man.Say("累死爷了");
var woman = new Woman();
woman.Shop();
woman.Say("花钱真爽");
people.Eat=function(){
console.log("吃吃吃.....");
}
man.Eat();
woman.Eat();
|
prototype 和 __proto__ 和 [[prototype]] 关系
JavaScript 中任意对象都有一个内置属性[[prototype]]，在 ES5 之前没有标准的方法访问这个内置属性，但是大多数浏览器都支持通过 __proto__ 来访问,
prototype 和 __proto__ 关系
JavaScript 只有一种结构：对象。每个实例对象（ object ）都有一个私有属性（称之为 __proto__ ）指向它的构造函数的原型对象（ prototype ）。该原型对象也有一个自己的原型对象( __proto__ ) ，层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。几乎所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。
看文字可能会有点蒙,用上面例子来举例说明下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| var people = {
Say:function(text){
console.log(text)
}
}
function Man(){}
Man.prototype = people;
var man = new Man();
console.log(man.__proto__ === Man.prototype && man.__proto__ === people)
console.log(Man.__proto__ === Function.prototype)
console.log(Function.__proto__ === Function.prototype)
console.log(Object.__proto__ === Function.prototype)
console.log(Object.__proto__ === Function.__proto__)
console.log(Function.prototype.__proto__ === Object.prototype)
console.log(Object.prototype.__proto__ === null)
|
