详解一个小实例理解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 相关文章推荐
js实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 Javascript
转换字符串为json对象的方法详解
Nov 29 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
jquery得到iframe src属性值的方法
Sep 25 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 Javascript
解决layui动态加载复选框无法选中的问题
Sep 20 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
微信小程序选择图片控件
Jan 19 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
php strcmp使用说明
2010/04/22 PHP
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
讲解JavaScript中for...in语句的使用方法
2015/06/03 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
基于node实现websocket协议
2016/04/25 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
前后端如何实现登录token拦截校验详解
2018/09/03 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
Python中用Spark模块的使用教程
2015/04/13 Python
python实现的系统实用log类实例
2015/06/30 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
HTML5和CSS3实例教程总结(推荐)
2016/07/18 HTML / CSS
Intersport西班牙:在线体育商店
2019/11/06 全球购物
个人租房协议书
2014/04/09 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
800字作文之大雪
2019/12/04 职场文书
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android