js中难以理解的原型

原型;我们先来看段简单的函数

按照javascript的说法,function定义的这个Person就是一个Object(对象),而且还是一个很特殊的对象,这个使用function定义的对象与使用new操作符生成的对象之间有一个重要的区别。这个区别就是function定义的对象有一个prototype属性,使用new生成的对象就没有这个prototype属性,我们一般称为普通对象!

我们需要理解记忆以下的逻辑顺序:

Person是一个对象,它有一个prototype的原型属性(因为所有的对象都一prototype原型!)prototype属性有自己的prototype对象,而pototype对象肯定也有自己的constuct属性,construct属性有自己的constuctor对象,神奇的事情要发生了,这最后一个constructor对象就是我们构造出来的function函数本身!

这张图片只是证明了每一个对象函数都有一个原型对象而已

再来看看网上流传最广的一张描述帮助解释原型的一张图片


怎么去理解呢?当我们新创建一个对象的时候,这个对象会自动生成一个prototype的属性,这个属性可以是一个新的对象。而原型对象中有constructor指回初始对象。当我们对这个对象进行new构造函数的时候,新构造出来的实例可以是属性,也可以是函数对象,但是这个实例中没有prototype原型属性,取而代之的是指向原型的_proto_。这意味着原型中的属性方法在new新实例中可以找到。

new去新的构造一个实例的时候new出来的新实例之间属性和方法是不能共享的,它的优点和缺点都是这一点。而当有多个实例的时候,我们把公共的属性方法用prototype原型去创建,把私有的属性方法new去创建。

原型在设计之初就是用来解决js中继承的问题的。js中没有c++和java的类,js设计之初就是借鉴了java和c++中的new方法,去构建新的实例,用prototype原型链去弥补new方法中的不足。具体的一些信息建议参考阮一峰的。他的理解很有借鉴性。

会不会很抽象?我认为挺抽象的。不过别急,我在搜索原型及原型链的时候看到一道对于我们理解原型很有帮助的一道题目,理解了这道题目,原型什么的题目都不是事啦。但是做题和理解又不一样,这里我推荐阮一峰的关于原型的理解;http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html

现在我们来看题。


待我和小伙伴们讲完这题,相信大部分小伙伴就可以理解了

首先我们看Foo.getName();这个我们只需要在上述中寻找相应的函数即可。很明显,我们找到是2;

getName();这个我们也可以直接找,找到的是4;

Foo().getName();的意思是Foo()中的getName()方法。。。小伙伴们这样就可以很快的找到答案了唉,答案就是1;

getName();这个为什么和上面的getNmae()不一样了呢?var getName是定义了一个变量,当没有调用Foo函数的时候,线程直接进行到4,而当Foo()调用的时候,getName变量在Foo()函数中输出的是1,整个线程的getName都变成了1,4被覆盖了。

new Foo.getName();其实有没有new没有影响,都是2,

最后两个,new Foo().getName();和new new Foo().getName();是构造了两个新的getName的对象,类似于prototype创建。多少个new是没有关系的,所以都是3.

抱歉,关于原型我试图去讲明白,但是网上讲的很抽象,我理解的也抽象,实在阐述不清楚。如果有能阐述清楚的希望您能指点一二。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容