后端转前端之原型链

我认为后端转前端的难点有这么几个,CSS样式,闭包,原型链.
这是我目前看过来对于后端童鞋比如说我,基本没有概念和使用经历的地方.昨天前天基本上研究了2天原型链,终于弄懂大概是什么样子了.这次博客我就概括总结一下原型链.当然我现在只是知其然,不知其所以然.大家如果对于prototype,__proto__是什么还不太清楚的同学,我这里就不多赘述了,以防误人子弟.大家自行去网上看看原型链究竟是啥吧.
首先我概括了这么几条规律结合下面的代码有脉络的梳理一下

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

以这三行代码为例画一个原型链.
原型链是一条链,将节点通过线来连起来.所以我们得明确有几个节点.foo,obj是对象实例,Foo Object是函数,Foo.prototype,Object.prototype是函数原型,还有一个隐藏的节点Function和Function.prototype.
Function就是创建Foo函数,Object函数的Function函数,所以如果要讲此前的6个节点串联起来,还需要Function和Function.prototype来作为中转.
所以现在是这样的

OK,这是我们的8个节点,那么现在开始把他们串起来.
首先函数和函数原型之间的联系其一我们一眼就能看出来.

其二则是Object.prototype通过constructor指向的就是Object.

同理,Function.prototype和Function,Foo.prototype和Foo之间的联系就可以补全了.

下面是我从王福鹏老师的博客中抄的一句话
每个对象都有一个__proto__属性，指向创建该对象的函数的prototype。
ok,那我们据此可以知道obj和Object.prototype之间是存在一条线的.

那么问题来了,Object函数,Foo函数也是对象,Object函数,Foo函数是由谁创造的?Function函数.
每个对象都有一个__proto__属性，指向创建该对象的函数的prototype。
我们再思考一下,现在这句话是不是就应该这么说了?
Object函数的__proto__属性,指向Function函数的prototype.
OK,那我们将这条线补上
Function函数的__proto__属性,跟上面2个函数一样,也是指向的Function函数的prototype.OK,那我们补上关系.

刚才讨论完函数是对象,那么现在要讨论的是Foo.prototype,Function.prototype也是对象,那他们的__proto__属性指向哪里呢?还是这句话
每个对象都有一个__proto__属性，指向创建该对象的函数的prototype。
他们其实是跟obj对象一样,都是被Object函数创建的.
ok,那我们把关系补上
不对,先别急, Object.prototype指向哪?
它指向null,那我们再加上这个关系,就大功告成了.

那么至此,原型链就画完了.虽然有点丑,但是我背原型链的思路就是这么来的.
那么总结一下对象是点,对象之间的大连接方式是__proto__,小连接方式是prototype和constructor.