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', ...
随机推荐
- 剑指Offer面试题:4.从尾到头打印链表
一.题目:从尾到头打印链表 题目:输入一个链表的头结点,从尾到头反过来打印出每个结点的值. 到解决这个问题肯定要遍历链表.遍历的顺序是从头到尾的顺序,可输出的顺序却是从尾到头.也就是说第一个遍历到的结 ...
- LVS原理与使用(1)
负载均衡,无论是否真正了解过,但我相信所有跟编程打交道的读者都有听说.同时,它(负载均衡)也是被认为一个大型网站的标识性技术之一(但负载均衡的作用肯定不止这点用途).虽然网上也有不少关于LVS配置实用 ...
- struts2 标签怪事
<s:if test="4 ge 3">111</s:if><s:else>222</s:else> 结果竟然是222 难道不是 4 ...
- C语言-结构体struct-联合体union-枚举enum
结构体 在Java中,我们要表示一个复合的数据类型就会使用对象去封装.而C就有结构体. 结构体是C语言中自定义的数据类型,是一组变量的集合,有别于数组,数组仅限于同一种数据类型,而结构体可以是任何数据 ...
- iOS-几大框架的介绍
1.Objective-C之Foundation框架 概述 我们前面的章节中就一直新建Cocoa Class,那么Cocoa到底是什么,它和我们前面以及后面要讲的内容到底有什么关系呢?Objectiv ...
- PHP新的垃圾回收机制:Zend GC详解
概述 在5.2及更早版本的PHP中,没有专门的垃圾回收器GC(Garbage Collection),引擎在判断一个变量空间是否能够被释放的时候是依据这个变量的zval的refcount的值,如果re ...
- 连接第二个 insance 到 first_local_net - 每天5分钟玩转 OpenStack(83)
上一节在 first_local_net 中已经部署了 cirros-vm1,今天将再部署一个instance,并验证两个 instance 的连通性. 以同样的方式 launch instance ...
- ASP.NET MVC之国际化(十一)
前言 在项目中遇到国际化语言的问题是常有的事情,之前在做关于MVC国际化语言时,刚开始打算全部利用AngularJS来实现,但是渐渐发现对于页面Title难以去控制其语言转换,于是对于页面Tiltle ...
- 【记录】ASP.NET MVC JsonResult JsonRequestBehavior AllowGet
JS Ajax 调用代码: $.ajax({ url: "/AjaxController/GetInfoById", type: 'GET', datatype: "js ...
- ACM-东北大学程序设计竞赛-网络赛(2016.04.16)
Problem: A Time limit: 1s Mem limit: 64 MB AC/Submission: 0/0 Discuss Back Ranklist Stat ...