对javascript prototype的一点初步理解

项目组由印度高端引入了一个脚本框架。当中用到了prototype来实现一些功能。
今天找了几篇关于javascript的prototype的文章读了下,有了点初步的理解,而后在纸上画了个关系图归纳了一下本身的理解,最后发现和[1]文最后的附图不谋而合。javascript

来看看[1]文最后的附图:html

听说这图来自ECMA Script的标准。java

我的对这图的一些理解,CF就是function的定义(能够类比为java中的class的定义),当中定义了p1和p2两个属性,当中有一个prototype对象(javascript内置定义的对象),指向的CFp是一个对象的实例。注意这里CF的prototype和CFp的关系是实线的,表明explicit prototype property。程序员

而下面的cf1,cf2 ...则是CF的实例化,每一个实例里的q1,q2就是CF定义中的p1,p2的实例化。框架

而cf1们和CFp的虚线关系是什么回事?ide

这实际上就是每一个CF的实例(cf1, cf2...)中,都有一个__proto__对象,它直接指向的是CF的prototype对象,所以是间接指向CFp对象。函数

图中的关系写成伪代码大概是这样:this

function CFp()
{
this.xxx = function(){...};
}

function CF()
{
this.P1 = "p1";
this.P2 = "p2";
}

CF.prototype = new CFp();//图中的实线关系:explicit prototype property

var cf1 = new CF();
var cf2 = new CF();
...

cf1.xxx(); //这里就能够经过cf1的__proto__引用到CF的prototype对象从而调用到CFp的xxx方法

从这里能够看出,javascript的prototype的确有点静态(static)的意思,由于对于每一个函数(类比java中的类)的定义,都有一个惟一的prototype对象。idea

而随着层次的增长,prototype会造成一个prototype chain,这个,能够说就是javascript实现继承效果的基础吧?spa

可是,对这个图还有一个疑问就是,左上角CF引出的虚线又是表明什么关系呢??

参考文献:

[1] Javascript – How Prototypal Inheritance really works

[2] Javascript继承机制的设计思想

[3] Web程序员应该知道的Javascript prototype原理

相关文章
相关标签/搜索