详解一个小实例理解js原型和继承


Posted in Javascript onApril 24, 2019

导语1:一个构造函数的原型对象,其实就是这个构造函数的一个属性而已,属性名叫prototype,值是一个对象,对象中有一些属性和方法,所以每个构造函数的实例对象都拥有这些属性和方法的使用权。

导语2:构造函数需要用 new 操作符来调用,它本身没有任何意义,只有实例化后才有生命,当然你也可以把它当普通函数使用,那this就是指向window了(意义不大)。

导语3:对于构造函数实例化出一个对象经历了什么?

我们看下面这个例子:

详解一个小实例理解js原型和继承

这个例子充分说明了,大佬们创造出构造函数这种东西,是有特殊用处的,本身没什么意义,在实例化后瞬间有了生命。

 好了有这些准备工作后,我们开始写一个构造函数+原型用法

废话不多说直接上代码!!!

 详解一个小实例理解js原型和继承

1,这个例子中有个构造函数,名字叫GetElem,参数期望传入的是一个元素的id,可以获取这个id的元素;

2,实例化一个叫domOne的对象,它传入一个实参为:“old”;所以它可以获取这个id为old的元素

3,在构造函数的原型上定义一个方法叫:changeInner 作用是如果传入了实参就用实参来改变元素的内容

4,在构造函数的原型上定义一个方法叫:on作用是根据事件类型和对应函数干一些事情;

domOne这个实例化对象中并没有这两个方法,但是没关系,它的原型对象上拥有啊!!!所以可以直接用;

您一定会问为何不直接把方法写在构造函数中不就省事了?原因是这样的话,每实例化一个对象都要在实例化过程中创建这些方法,

如果实例化太多就消耗性能,而放在原型对象上就只需要做一次。这也是构造函数+原型优于工厂模式的方面。

 最后一张图:

 详解一个小实例理解js原型和继承

方法可以链接起来写的原因是  在每个方法中  return this (this指向的是实例对象,当然可以继续调用它可以调用的方法啦!!!)

以上所述是小编给大家介绍的js原型和继承详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
js实现的后台左侧管理菜单代码
Sep 11 Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
让div运动起来 js实现缓动效果
Jul 06 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
Nov 14 Javascript
jQuery实现轮播图源码
Oct 23 jQuery
JS正则表达式常见函数与用法小结
Apr 13 Javascript
js获取图片的base64编码并压缩
Dec 05 Javascript
微信小程序实现的一键复制功能示例
Apr 24 #Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
Apr 24 #Javascript
解决vue 单文件组件中样式加载问题
Apr 24 #Javascript
vue router 用户登陆功能的实例代码
Apr 24 #Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 #Javascript
vue.js多页面开发环境搭建过程
Apr 24 #Javascript
小程序实现订单倒计时功能
Apr 23 #Javascript
You might like
Yii2主题(Theme)用法详解
2016/07/23 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
php车辆违章查询数据示例
2016/10/14 PHP
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
python调用windows api锁定计算机示例
2014/04/17 Python
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
Python写的一个简单监控系统
2015/06/19 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
Python交互式图形编程的实现
2019/07/25 Python
django将数组传递给前台模板的方法
2019/08/06 Python
python脚本第一行如何写
2020/08/30 Python
python matlab库简单用法讲解
2020/12/31 Python
适合各种场合的美食礼品:Harry & David
2016/08/03 全球购物
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
Timberland法国官网:购买靴子、鞋子、衣服、夹克和配饰
2019/11/30 全球购物
缓刑人员的思想汇报
2014/01/11 职场文书
团委竞选演讲稿
2014/04/24 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
公司感谢信范文
2015/01/22 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
python 如何用map()函数创建多线程任务
2021/04/07 Python
分享7个 Python 实战项目练习
2022/03/03 Python
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers