详解一个小实例理解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 数据类型转换总结笔记
Jan 17 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
浅析JavaScript原型继承的陷阱
Dec 03 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
angular2中使用第三方js库的实例
Feb 26 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
Nov 22 Javascript
webpack file-loader和url-loader的区别
Jan 15 Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 Javascript
原生JS运动实现轮播图
Jan 02 Javascript
react 路由Link配置详解
Nov 11 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
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
简单实用的网站PHP缓存类实例
2014/07/18 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
JS解析XML的实现代码
2009/11/12 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
vue mounted 调用两次的完美解决办法
2018/10/29 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
Python实现的凯撒密码算法示例
2018/04/12 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
python字典按照value排序方法
2020/12/28 Python
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
工程预算与管理应届生求职信
2013/10/06 职场文书
日本语毕业生自荐信
2014/02/01 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
企业法人授权委托书
2014/09/25 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
民主评议政风行风活动心得体会
2014/10/29 职场文书
名人传读书笔记
2015/06/26 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书
导游词之西递宏村
2019/12/10 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL