之前有在自己的文章中谈到对象,而说到对象我们就不可避免的要扯到原型,并且原型也是我们必须得理解到位的一个点,那接下来我们就来聊一聊js的原型吧。

JS中一切皆为对象,那么原型也是一种对象。所以它有对象的特性,无非也是一系列无序键值对的集合,接着我们就来具体看看吧

function person(name,age)
{
this.name=name;
this.age=age;
}
var a=typeof person.prototype//object
var b=typeof person.prototype.constructor//function
var c=person.prototype.constructor==person//true

我们可以看到我们创建了一个构造函数person,通过prototype找到了原型对象,我们可以看到以下几点

  • 用typeof可以看到原型确实是一个对象
  • 这个对象有一个constructor属性,属性值是function
  • 这个function就等于构造函数person

此处我们首先可以明确了构造函数和原型对象的关系了吧

接着我们再来看看原型和构造函数创建的对象的关系

function person(name,age)
{
this.name=name;
this.age=age;
}
var pengl=new person("pengl",100);
var flag=person.prototype.constructor==pengl.constructor;//true

我们依然可以看到新建对象的构造函数就是原型对象的构造函数。

本质:原型对象中的原型两字是对谁的原型,实际上是对于新建的这些对象的原型,是这些对象中那些不变的,共有的东西,比如构造函数,各个对象的区别只是在于通过构造函数新建该对象时,传入的参数不同。而像构造函数或者一些其他建立在原型上的方法和属性都是属于原型级别的,只是新建的对象作为它的具体实例可以用而已。

我们可以从这样一个角度来理解

function person(name,age)
{
this.name=name;
this.age=age;
this.func=objFunc;
function objFunc (argument) {
alert("我是属于新建对象的方法")
}
}
var pengl=new person("pengl",100);
pengl.func();

另一段代码

function person(name,age)
{
this.name=name;
this.age=age;
}
person.prototype.func=function (argument) {
alert("我是属于新建对象原型上的方法")
}
var pengl=new person("pengl",100);
pengl.func();

第一段和第二段的区别就是是否把func方法创建在构造函数中,第一段就是直接在新建对象的级别上创建了一个方法,第二段是在新建对象的原型上创建的方法。从内存的角度看,对于第一段每创建一个对象,就要同时再创建一个func方法,而第二段是,无论创建多少个对象,都只需要一个func方法,这个方法是所有对象所共有的。

最后我们就要引出原型链了

从原型链的链字我们就可以猜到大概是什么意思,比如我们使用一个方法,先从该对象上找,如果没有那么就从该对象的原型上找,如果该原型没有,就从该原型的原型上找,以此类推。如果最后都没找到,则返回undefined

上面例子中的原型链:

pengL->person.prototype->object.prototype->null


至此原型就到此为止啦,我们最后进行一下总结吧

  • 原型是对象
  • 原型包含了新建对象的各种共有的方法和属性
  • 使用对象的方法或属性流程是:先从该对象找,没有则从它的原型上找,再没有,就从原型的原型上找,以此类推
PS:如果以上表述有问题,欢迎大家留言指正。

JS进阶之原型的更多相关文章

  1. 2. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...

  2. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践 经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无 从 ...

  3. JS 进阶知识点及常考面试题

    将会学习到一些原理相关的知识,不会解释涉及到的知识点的作用及用法,如果大家对于这些内容还不怎么熟悉,推荐先去学习相关的知识点内容再来学习原理知识. 手写 call.apply 及 bind 函数 涉及 ...

  4. js中的原型、继承的一些想法

    最近看到一个别人写的js类库,突然对js中的原型及继承产生了一些想法,之前也看过其中的一些内容,但是总不是很清晰,这几天利用空闲时间,对这块理解了一下,感觉还是有不通之处,思路上没那么条理,仅作为分享 ...

  5. 【 D3.js 进阶系列 】 进阶总结

    进阶系列的文章从去年10月开始写的,晃眼又是4个多月了,想在年前总结一下. 首先恭祝大家新年快乐.今年是羊年吧.前段时间和朋友聊天,聊到十二生肖里为什么没猫,我张口就道:不是因为十二生肖开会的时候猫迟 ...

  6. 基于原生JS封装数组原型上的sort方法

    基于原生JS封装数组原型上的sort方法 最近学习了数组的原型上内置方法的封装,加强了用原生JS封装方法的能力,也进一步理解数组方法封装的过程,实现的功能.虽然没有深入底层,了解源码.以下解法都是基于 ...

  7. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  8. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  9. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

随机推荐

  1. Modern OpenGL用Shader拾取VBO内单一图元的思路和实现(2)

    Modern OpenGL用Shader拾取VBO内单一图元的思路和实现(2) 上一篇里介绍了Color-Coded Picking的思路和最基本的实现.在处理GL_POINTS时已经没有问题,但是处 ...

  2. 免安裝、免設定的 Hadoop 開發環境 - cloudera 的 QuickStart VM

    cloudera 的 QuickStart VM,為一種免安裝.免設定 Linux 及 Hadoop,已幫你建好 CDH 5.x.Hadoop.Eclipse 的一個虛擬機環境.下載後解壓縮,可直接以 ...

  3. CentOS RDO方式快速安装OpenStack

    一.了解RDO RDO是什么? RDO是红帽Red Hat Enterprise Linux OpenStack Platform的社区版,类似RHEL和Fedora,RHEV和oVirt这样的关系. ...

  4. Java Thread 的 run() 与 start() 的区别

    Java Thread 的使用 Java Thread 的 run() 与 start() 的区别 Java Thread 的 sleep() 和 wait() 的区别             1. ...

  5. JavaEE:JavaEE技术组成

    Java平台版本: JavaSE:Java Platform Standard Edition,标准版,用来开发桌面应用系统: JavaEE:Java Plateform Enterprise Edi ...

  6. 使用paramiko如何连接服务器?

    本文和大家分享的是python开发中使用paramiko连接服务器的方法和步骤,希望通过本文的,对大家学习和使用paramiko有所帮助. ssh连接步骤 1.ssh server建立server p ...

  7. 实战MEF(5):导出元数据

    如何理解元数 我们可以把元数据理解为随类型一起导出的附加信息.有时候我们会考虑,把元数据随类型一并导出,增加一些说明,使得我们在导入的时候,可以多一些筛选条件. 默认的类型导出带有元数据吗 上面的内容 ...

  8. herbnate session.createSQLQuery(sql) 和 session.createQuery(sql)使用

    public class DistributeDao implements Serializable{ private SessionFactory sessionFactory; public Se ...

  9. hdu 2222 Keywords Search(AC自动机)

    /* 啥也不说了,直接套模板... */ 1 #include<iostream> #include<map> #include<string> #include& ...

  10. 窥探Swift之协议(Protocol)和委托代理(Delegate)回调的使用

    协议与委托代理回调在之前的博客中也是经常提到和用到的在<Objective-C中的委托(代理)模式>和<iOS开发之窥探UICollectionViewController(四) - ...