您的位置：首页 > Web前端 > JavaScript

JavaScript中的_proto_与prototype的关系

2015-09-10 11:42 423 查看

注：本文整理自网络，有修改，原文链接请参考文章末尾。

这里我先借鉴一张图(可以读完再来看这张图)：



function能够调用的prototype一般被定义为“对象原型的引用”，有的人也说是"实例"（一开始我以Java的理念理解，真是把我搞醉了）。我对于prototype的理解就是“爸爸”，也就是对象的模子。当我们对prototype添加属性的时候"模子"会改变它的形状，以后用这个模子造出来的实例（varx=newX;）就会是按照模子来做的，所以说他的实例就会拥有prototype的属性。如果我们用"X.prototype="的形式就会改变它的模子也就是换一个“爸爸”，所以这样做不会是一点点改变了，而是替换（就是找继父）。所以说在执行这句话的时候，就会改变X的生出来的孩子的属性。

__proto__在我的理解里是“影子”或者说父类的属性视图。用"varX=function(){}或者functionX(){}varx=newX();"的时候x中的__proto__属性会指向X.prototype.这是原型链中最恒等的，不管prototype改变还是__proto__改变，这条链始终是要相等。


//原文的例子，有些许错误。在他的例子上有些许改进。

functionFoo()
{

}

Foo.__proto__.test="__proto__testpropertyfound";//通过__proto__扩展
Foo.__proto__.addextend=function(){alert("Fooaddextendby__proto__");}
alert(Function.prototype.test);//可以访问，这里为什么对象的是Function.prototype呢？相信Foo.__proto__是儿子，而爸爸是谁呢？Function.prototype

varfoo=newFoo;
foo.__proto__.lab="abc";
alert(foo.__proto__===Foo.prototype);<spanstyle="font-family:Arial,Helvetica,sans-serif;font-size:12px;background-color:rgb(255,255,255);"> </span>

上面这段代码对Foo的__proto__进行添加（其实对Foo.__proto__的改变按道理说是对应Function.prototype.test，foo的__proto__是对应Foo的prototype，这条关系永远的恒等的），而__proto__是特殊的影子或者视图（就像Oracle数据库），你修改它是会影响到Function的prototype的，如果你在上面代码后面添加：

for(varxinfoo.__proto__){
alert(x);
}
for(varyinFoo.prototype){
alert(Foo.prototype.lab);
}
alert(foo.lab);

是可以访问到lab(中文翻译：实验)这个属性的。所以说，就这一单来说__proto__类似于数据库中的视图，这是很奇特的就像儿子反过来会影响爸爸（多好的一家人）。

而理解constructor的时候可以把prototype看做是一个实例，就如Foo的prototype（实例）的构造函数不就是指向函数本身吗！也就是说Foo.prototype.constructor的与foo.constructor的是一样的。而Foo.constructor是Function(这里可以解释为构造Foo的构造函数不就是newFunction())这里其实对于prototype的理解我也不能很好的去统一，大家只能自己意会了（分开理解会更加清楚）。

总之，我认为（以我学习几天的JavaScript的立场）来说，Foo.prototype就是就是其new出来的实例的__proto__的"爸爸"或者说"真身"，而foo.__proto__的则是类的“影子”或者是“视图”（特殊的），当爸爸改变的时候生出来的儿子当然不同，但是儿子改变是爸爸也会变化（只能自己理解，我真说不清楚了）。而constructor就是构造对象的属性了，注意是对象（JavaScript中一切皆对象，所以function本身也是对象，也会有constructor的，所有产生function的都是大Function（通过
newFunction();的方式可以看到））.小foo的构造当然是大Foo，大Foo的实例(prototype)的constructor当然也是大Foo.所以才会有Foo的prototype的constructor指向他本身的说法。完毕！

如果上面这篇看懂了，就可以接着看下面这篇：

这里讨论下对象的内部原型(__proto__)和构造器的原型（prototype）的关系。

一、所有构造器/函数的__proto__都指向Function.prototype，它是一个空函数（Emptyfunction）
JavaScript中有内置(build-in)构造器/对象共计12个（ES5中新加了JSON），这里列举了可访问的8个构造器。剩下如Global不能直接访问，Arguments仅在函数调用时由JS引擎创建，Math，JSON是以对象形式存在的，无需new。它们的__proto__是Object.prototype。如下

上面说的“所有构造器/函数”当然包括自定义的。如下

这说明什么呢？

所有的构造器都来自于Function.prototype，甚至包括根构造器Object及Function自身。所有构造器都继承了Function.prototype的属性及方法。如length、call、apply、bind（ES5）。



Function.prototype也是唯一一个typeofXXX.prototype为“function”的prototype。其它的构造器的prototype都是一个对象。如下

　　

噢，上面还提到它是一个空的函数，alert(Function.prototype)下看看。



知道了所有构造器（含内置及自定义）的__proto__都是Function.prototype，那Function.prototype的__proto__是谁呢？



相信都听说过JavaScript中函数也是一等公民，那从哪能体现呢？如下

这说明所有的构造器也都是一个普通JS对象，可以给构造器添加/删除属性等。同时它也继承了Object.prototype上的所有方法：toString、valueOf、hasOwnProperty等。



最后Object.prototype的__proto__是谁？

已经到顶了，为null。



二、所有对象的__proto__都指向其构造器的prototype
上面测试了所有内置构造器及自定义构造器的__proto__，下面再看看所有这些构造器的实例对象的__proto__指向谁？



先看看JavaScript引擎内置构造器

再看看自定义的构造器，这里定义了一个Person

p是Person的实例对象，p的内部原型总是指向其构造器Person的prototype。



每个对象都有一个constructor属性，可以获取它的构造器，因此以下打印结果也是恒等的

上面的Person没有给其原型添加属性或方法，这里给其原型添加一个getName方法

可以看到p.__proto__与Person.prototype，p.constructor.prototype都是恒等的，即都指向同一个对象。



如果换一种方式设置原型，结果就有些不同了

这里直接重写了Person.prototype（注意：上一个示例是修改原型）。输出结果可以看出p.__proto__仍然指向的是Person.prototype，而不是p.constructor.prototype。

这也很好理解，给Person.prototype赋值的是一个对象直接量{getName:function(){}}，使用对象直接量方式定义的对象其构造器（constructor）指向的是根构造器Object，Object.prototype是一个空对象{}，{}自然与{getName:function(){}}不等。如下

上面代码中用到的__proto__目前在IE6/7/8/9中都不支持。IE9中可以使用Object.getPrototypeOf(ES5)获取对象的内部原型。

原文链接：

1、我所理解的JavaScript的_proto_和prototype

2、JavaScript中_proto_与prototype的关系
相关内容：
1、JavaScript实现继承机制--通过原型链
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航