js中难以理解的原型

作者: 往前走莫回头_2cd6 | 来源:发表于2018-05-28 19:18 被阅读0次

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

按照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.

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

相关文章

  • js中难以理解的原型

    原型;我们先来看段简单的函数 按照javascript的说法,function定义的这个Person就是一个Obj...

  • 原型与新版的类-class

    首先来理解原型原型 === 共用属性可以先看看方姐的几篇文章:什么是JS原型链JS 中 proto 和 proto...

  • JS 原型中的this理解

    前面讲过了,在全局作用域下声明的函数或者变量,默认是window这个对象的属性了,前面再议函数时,说过,上下文这个...

  • 理解JS中的原型

    动态语言和静态语言有很大的不同,比如在C++中定义类时,并不分配内存,而在动态语言中定义类时,却会分配内存。 比如...

  • 廖雪峰JS小记

    (function(){})() 原型,原型链 浅谈Js原型的理解JS 原型与原型链终极详解 对象 对象:一种无序...

  • js new 运行机制

    js手札--js中new到底做了些啥JS核心系列:理解 new 的运行机制深入理解 Javascript 运行机制及原型

  • 原型

    一:你是如何理解js 中的原型的 1.原型是什么? 我们js中 所有的的函数 包括原生的,和自定的 都默认有一个 ...

  • JS中函数原型的理解

    函数原型 函数有一个默认的prototype属性, 默认值是只有一个属性constructor的对象函数只是有一个...

  • JS原型

    最近一直在理解JS的原型------《你不知道的JS》--------《JS设计模式》 里面都讲JS的原型运作方式...

  • 前端资料

    ES6新数据类型 Symbol . js变量提升函数提升 js this js 原型及原型链理解 new做了什么 ...

网友评论

    本文标题:js中难以理解的原型

    本文链接:https://www.haomeiwen.com/subject/srrlrftx.html