之前有在自己的文章中谈到对象,而说到对象我们就不可避免的要扯到原型,并且原型也是我们必须得理解到位的一个点,那接下来我们就来聊一聊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. [Voice communications] 声音的滤波

    本系列文章主要是介绍 Web Audio API 的相关知识,以及 web语音通信 中会遇到的一些问题,阐述可能存在错误,还请多多斧正! 通过设备获取音频流会不可避免的渗入一些杂音,这些杂音可能来自你 ...

  2. 探索c#之一致性Hash详解

    阅读目录: 使用场景 算法原理 虚拟节点 代码示例 使用场景 以Redis为例,当系统需要缓存的内容超过单机内存大小时,例如要缓存100G数据,单机内存仅有16G时.这时候就需要考虑进行缓存数据分片, ...

  3. ASP.NET MVC学前篇之请求流程

    ASP.NET MVC学前篇之请求流程 请求流程描述 对于请求的流程,文章的重点是讲HttpApplication和HttpModule之间的关系,以及一个简单的示例实现.(HttpModule又是M ...

  4. [备忘]检索 COM 类工厂中 CLSID 为 {91493441-5A91-11CF-8700-00AA0060263B} 的组件时失败解决方法

    检索 COM 类工厂中 CLSID 为 {91493441-5A91-11CF-8700-00AA0060263B} 的组件时失败,原因是出现以下错误: 80070005 在CSDN上总是有网友问这个 ...

  5. Java邮件发送与接收原理

    一. 邮件开发涉及到的一些基本概念 1.1.邮件服务器和电子邮箱 要在Internet上提供电子邮件功能,必须有专门的电子邮件服务器.例如现在Internet很多提供邮件服务的厂商:sina.sohu ...

  6. [Hadoop大数据]——Hive部署入门教程

    Hive是为了解决hadoop中mapreduce编写困难,提供给熟悉sql的人使用的.只要你对SQL有一定的了解,就能通过Hive写出mapreduce的程序,而不需要去学习hadoop中的api. ...

  7. 数据库基础,表及SQL语句

    数据库基础及T-SQL语句 字符类型: int 整型 float 小数 double 小数 varchar(20) 字符串 bit 布尔型数据 datetime 日期时间类型 text 长文本 (以下 ...

  8. fir.im Weekly - TouchBar 从入门到开发

    自从 Macbook Pro 发布重大更新, TouchBar 一直是开发者的重点关注对象.除了NSTouchBar官方文档,速度快者如 @毫无存在感的Cee,分享了一篇 NSTouchBar 的入门 ...

  9. 手写原生ajax

    关于手写原生ajax重要不重要,各位道友自己揣摩吧, 本着学习才能进步,分享大家共同受益,自己也在自己博客里写一下 function createXMLHTTPRequest() { //1.创建XM ...

  10. session和cookie的区别

    cookie机制和session机制的区别     具体来说cookie机制采用的是在客户端保持状态的方案,而session机制采用的是在服务器端保持状态的方案.     同时我们也看到,由于才服务器 ...