JS进阶之原型
之前有在自己的文章中谈到对象,而说到对象我们就不可避免的要扯到原型,并且原型也是我们必须得理解到位的一个点,那接下来我们就来聊一聊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进阶之原型的更多相关文章
- 2. web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...
- web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践 经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无 从 ...
- JS 进阶知识点及常考面试题
将会学习到一些原理相关的知识,不会解释涉及到的知识点的作用及用法,如果大家对于这些内容还不怎么熟悉,推荐先去学习相关的知识点内容再来学习原理知识. 手写 call.apply 及 bind 函数 涉及 ...
- js中的原型、继承的一些想法
最近看到一个别人写的js类库,突然对js中的原型及继承产生了一些想法,之前也看过其中的一些内容,但是总不是很清晰,这几天利用空闲时间,对这块理解了一下,感觉还是有不通之处,思路上没那么条理,仅作为分享 ...
- 【 D3.js 进阶系列 】 进阶总结
进阶系列的文章从去年10月开始写的,晃眼又是4个多月了,想在年前总结一下. 首先恭祝大家新年快乐.今年是羊年吧.前段时间和朋友聊天,聊到十二生肖里为什么没猫,我张口就道:不是因为十二生肖开会的时候猫迟 ...
- 基于原生JS封装数组原型上的sort方法
基于原生JS封装数组原型上的sort方法 最近学习了数组的原型上内置方法的封装,加强了用原生JS封装方法的能力,也进一步理解数组方法封装的过程,实现的功能.虽然没有深入底层,了解源码.以下解法都是基于 ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- js进阶---12-12、jquery事件委托怎么使用
js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...
- js进阶---12-10、jquery绑定事件和解绑事件是什么
js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...
随机推荐
- 在.NET中使用反射实现简易插件机制
本篇是我学习反射的一个应用小场景而做的学习笔记,主要是一个小的总结,并对各个步骤的记录,以便将来回顾. 一.基础框架-敏捷基础版本 这里假定我们要开发一个记事本,选择Windows Form技术开发, ...
- 《HiWind企业快速开发框架实战》(1)框架的工作原理
<HiWind企业快速开发框架实战>(1)框架的工作原理 1.HiWind架构 HiWind的基本架构如下: 持久层部分:同时为框架本身的业务服务,也为开发人员的自定义业务服务. 逻辑层: ...
- Module-Zero之启动模板
返回<Module Zero学习目录> 概览介绍 社交登录 基于Token的认证 单元测试 概览介绍 使用ABP和Module-Zero开始一个新的项目最简单的方式通过ABP官网的模板页面 ...
- angularjs 2.0 快速案例(1)
前言 上一节我们已经把环境给搭建起来了,现在我们通过一个快速案例把angular 2.0 初步了解一下,后续我们会深入每一个细节,这个案例主要是一个[英雄(Hero)]列表的展示,创建,编辑.这个案例 ...
- Echarts使用
Echarts使用 |版权声明:此文为本人原创,望尊重原创 前言: 和朋友聊天的过程中,朋友提到了Echarts.我当时不知道那个是用来做什么的.回到家我就百度了,开始自己看文档学习.本文是自 ...
- jQuery2.0.3源码分析系列之(29) 窗口尺寸
.height() .innerHeight() .innerWidth() .outerHeight() .outerWidth() .width() 基础回顾 一般的,在获取浏览器窗口的大小和位置 ...
- PHP浅复制与深复制
原文链接:http://www.orlion.ga/731/ php用clone复制对象有一个问题,下面用代码来说明问题: class Foo{ public $bar; public $name; ...
- T-SQL:毕业生出门需知系列(二)
第2课 检索数据 2.1 SELECT 语句 用途:从一个或多个表中检索数据信息 关键字:作为SQL组成部分的保留字.关键字不能用作表或列的名字. 为了使用SELECT检索表数据,必须至少给出两条信息 ...
- IOS开发之自动布局显示网络请求内容
在上一篇博客中详细的介绍了IOS开发中的相对布局和绝对布局,随着手机屏幕尺寸的改变,在App开发中为了适应不同尺寸的手机屏幕,用自动布局来完成我们想要实现的功能和效果显得尤为重要.本人更喜欢使用相对布 ...
- (转)使用minicpan创建本地CPAN
在临时的办公场所网络不畅,有时不能下载cpan上的软件包,所有只能自建一个cpan. 这里使用了工具'minicpan',简单地说:就是把互联网上的CPAN搬到自己的电脑里,它的最初想法来自Randa ...