第20篇 js高级知识---深入原型链

前面把js作用域和词法分析都说了下，今天把原型链说下，写这个文章费了点时间，因为这个东西有点抽象，想用语言表达出来不是很容易，我想写的文章不是简单的是官方的API的copy，而是对自己的知识探索和总结的过程，以及在这个过程碰到的问题都一一写出来，我想大多数人应该也有这个疑惑，然后带着疑惑去找答案，当你把这个疑惑解决之后，才觉得很有成就感。下面不多说了，开始说说什么是原型链。要想了解原型链，还是要从简单的开始，什么是原型？首先看下代码：

function funcA() {
    this.show = function() {}
}
console.log(funcA.prototype);

由这个图可以看出funcA的原型是一个对象，他的名字也是funcA,有一个constructor属性指向funcA,同时有一个__proto__指向Object.prototype(这个是怎么得到？可以看下上面的__proto__下面的constructor属性指向是Object，说明他是Object的原型).funcA原型大概写成：

funcA.prototype={
 
constructor:funcA,
 
__proto__:Object.prototype
 
}

PS:这里的__proto__从哪里冒出来的？在js中，每个对象都有一个名为__proto__的内部隐藏属性，指向于它所对应的原型对象(chrome、firefox中名称为__proto__，并且可以被访问到)，而普通的对象没有prototype属性，只有__proto__属性。由上面的结果可以得到下面的这张图

现在我们对原型有了一个大概的了解，反正他就是这么一个对象,有几个不同寻常的属性，继续深入，当我们利用funcA创建对象的时候，这个又会发生什么？

function funcA() {
    this.show = function() {}
}
console.log(funcA.prototype);
var a = new funcA();
console.log(a);
console.log(a.__proto__);
console.log(a.__proto__ === funcA.prototype);
console.log(a.__proto__.constructor === funcA);

运行结果如下：

对上面的这个结果进行分析，a是funcA创建出来的对象，他有funcA里面的方法，同时他也有一个__proto__，可以用代码表示成:

var a={
 
show:function(){..…},
 
__proto__:funcA.prototype
 
}

同理，我们可以得到下面这张图：

总结下上面的过程，从表象上看，funcA在创建对象的时候，这个对象a,把funcA里面的方法“复制过来”，然后产生了一个__proto__属性指向它的原型。

其实new创建对象，分为三步

、
创建了一个空对象a={};

2、
将这个空对象的__proto__成员指向了funcA函数对象prototype成员对象

3、将funcA函数对象的this指针替换成a，然后再调用funcA函数，于是我们就给a对象赋值了一个新
的方法成员。

具体的实现代码可以表示如下：

var a ={};
a.__proto__=funcA.prototype;
funcA.call(a);
 
下面我们用代码来验证：
function funcA() {
    this.show = function() {}
}
console.log(funcA.prototype);
 
var b=new funcA();//new 来构建
 
var a ={};//define 手动定义
a.__proto__=funcA.prototype;
funcA.call(a);
console.log(a);
console.log(b);

实现结果如下 ，可以看到a和b的内部方法完全一个，唯一的区别是a来自于Object的prototype,b来自于funcA的prototype(导致输出的名字是不一样)。

现在这个可以对上面的几个过程做一个总结，什么是原型? Js所有的函数都有一个prototype，其实质就是对一个对象的引用，称之为原型（还是有点难理解，但先作为js的一种机制去理解，至于为什么，后面再往深入去探讨）。在构造新的对象的普通对象的时候会产生一个__proto__属性指向它。

继续向下挖：

好了，现在把js的原型和对象的产生理解清楚了，下面的事情就简单了，下面揭开上面图形中的Object的神秘面纱:funcA.prototype.__proto__指向的Object是一个什么东西？它的来源又是什么？我们在控制台上面输出当前的这个值结果如下：

根据上面的经验，我们可以推测出__proto__指向的应该是一个函数的原型，也就是说xxx.prototype=funcA.prototype.__proto__,这个xxx同时应该是当前这个Object的constrcutor,好了下面看看猜想的对不对。

上面的红色框框的是输出的结果，由这个我们可以说我们说的是对的。同理既然Object是一个对象，那他的prototype和__proto__又是什么呢？

由上面的内容可以看出，最终的原型是一个null，即说明 产生Object.prototype这个对象的“母体”的原型是null，总结上面的结果，可以总结到下面这张图上面：

好了，对于原型算是讨论差不多了，下面再说说比较特殊的Function，上点代码

var foo=new Function("var str='c';console.log(str);");
foo();
console.log(foo);
console.log(foo.prototype);
console.log(foo.__proto__);
// 

运行结果如下：

由上面的结果可知，由Function产生的对象还是一个函数对象，foo.__proto__是一个空函数对象，foo.prototype是一个Object的实例对象。由上面可以推断出来，foo.__proto__===Function.prototype;为true推出Function.prototype=function(){}(是一个空函数),既然Fuction,prototype是一个函数对象，那它的原型是什么呢？即查看Function.prototype.prototype=？这个值是多少呢？

由此可见，这个function(){}没有原型，他应该是原型的终结了，即全部函数的__proto__就都是function(){},即是Function.prototype,即所有的函数都是Function的一个实例对象，这也就解释了，js中一切皆对象的这句话。

再思考：我们已经找到函数的根了，那Function.prototype对象的根在哪里？Function.prototype已经是到了原型的终结了，那它又是怎么来的呢？我们再看看Function.prototype.__proto__=?这个到底是什么

从这个结果我们看到,Function.prototype.__proto__是一个Object的实例对象，从上面分析原型的时候我们都已经知道，这个“object”最终的__proto__的指向是null。到目前为止我们心里虽然有很多的疑问，但觉得一切变得明朗起来，函数对象和普通对象是相通的，最终的指向都是一个null.总结一下，如下图：

上图是我们分析后所有的元素的关系，这个看起来清楚了许多，所有的对象的__proto__元素的终点都是null，如果撇开null元素，即所有的普通对象的基对象都是Object(是Object函数的原型），包括Object的类型的普通对象;同理，所有的函数的__proto__都是function(){}(Function.prototype),当然也包含Function本身。看完这些是不是有一种从无中生一（null对象)，一生二，二生万物的感觉？

可能有人也注意到了右正解的红色的Function,他也是他自己产生的，先不要急， 为了更好的说明上面的这个图我们再看下面的代码说明下：

function funcA() {}
function funcB() {}
console.log(funcA.__proto__);
console.log(funcB.__proto__);
console.log(funcA.__proto__ === funcB.__proto__);
console.log(funcA.__proto__ === funcB.__proto__ && funcB.__proto__ === Number.__proto__ && Number.__proto__ === Function.__proto__);
console.log(Function.prototype == Function.__proto__);

运行结果如下：

上面的运行结果也证明我的们想法，Function是一个特殊的对象，他的实例来源也来自于他自己，因为他的原型是一切函数的源头，他本身也是一个函数，所以就不奇怪Function.prototype===Function.__proto__是成立的。同理，一切函数对象的根源也都是一样的，所以下面的等式都成立了

function funcA() {}
function funcB() {}

funcA.__proto__ === funcB.__proto__ ;
funcB.__proto__ === Number.__proto__ ;
Number.__proto__ === Function.__proto__;
Function.__proto__===Function.prototype
Number.__proto__ === Function.prototype;  // true
Boolean.__proto__ === Function.prototype; // true
String.__proto__ === Function.prototype ; // true
Object.__proto__ === Function.prototype;  // true
Function.__proto__ === Function.prototype; // true
Array.__proto__ === Function.prototype ;  // true
RegExp.__proto__ === Function.prototype;  // true
Error.__proto__ === Function.prototype;   // true
Date.__proto__ === Function.prototype;    // true

说了这么多还没有讲到原型链，呵呵，上面如果都理解了，那么原型链这个东西就so easy了，不多说还是用代码说话：

 var a={};
 a.__proto__.value="a";
 a.show=function(){
     console.log(this.value);
 }
 a.show();

这段代码运行的结果是输出一个字母”a”,但是我们看到a的对象中没有value的这个字段，但同样也能输出,因为在它的__proto__上面有一个value属性，js在寻找属性的时候会沿着__proto__的去寻找，这个就是我们要说的原型链。原理很简单：如果在当前对象中找不到当前属性或者方法（value),那么就会沿着原型链开始找，一直遍历完整个的原型链，一旦找到，就返回第一个找到的属性获得方法，如果没有，就返回undefined。

说了这么多，原型链到底有什么作用?也许很多人会说，可以用来继承，不过没错，但是我们还是要了解，为什么他可以继承，为什么 funcA.prototype=new funcB();这个就可以实现了所谓的继承。下面还是看代码：

function funcA() {
    this.show = function(str) {
        console.log(str);
    }
}
function funcB() {
    this.read = function() {
    }
}
var a = new funcA();
funcB.prototype = a;
a.show("a");
var b=new funcB();
b.show("b");

运行的结果如下：

这个是很常用的写法，可以看到b是可以调用funcA的方法的，这个是为什么呢，下面我们画一个原型的示意图

看到上面的图应该就明白了，因为funcB的原型是a,所以导致b.__proto__=a,所以b就能够沿着原型链访问a中的方法，这样就实现了继承----原型链继承，又称为原型继承。

当前这种继承的方法可以不用这么写，原理清楚了，那就改下也没有什么，看一段简单粗暴的原型继承：

function funcA() {
    this.show = function(str) {
        console.log(str);
    }
}
function funcB() {
    this.read = function() {}
}
var a = new funcA();
var b = new funcB();
b.__proto__ = a;
a.show("a");
b.show("b");

这样和上面的输出的结果是一个的，但是这样的话只有对象b继承了a中的方法，但是再产生的funcB的新对象，却没有a中的方法：

如：

var c=new funcB();
c.show("c");//报错

当然实现的方法很多，下讲会讲说下js的三种继承方式，如果篇幅不大，会连着js的this的一起写出来。下面在写一个个实现方法，供参考，原因在上面：

function funcA() {
    this.show = function(str) {
        console.log(str);
    }
}
function funcB() {
    this.read = function() {}
}
var a = new funcA();
var b = new funcB();
 funcA.call(b);//use call
a.show("a");
b.show("b");

写于2015.11.14