JavaScript原型对象原理与应用分析


Posted in Javascript onDecember 27, 2018

本文实例讲述了JavaScript原型对象原理与应用。分享给大家供大家参考,具体如下:

原型对象:

每个对象都有一个参考对象,这个参考对象称之为原型对象。原型对象有自己的属性和方法。当A是B的原型对象时,那么B拥有A中的所有属性和方法。

原型对象的工作原理:

使用原型对象定义一个新的对象时,该对象不会立即拥有原型对象的属性和方法,在调用的时候本对象内部没有的属性和方法是才回去调用原型中的属性和方法。(动态分配).

原型对象的引用:

在javascript中每一个函数都定义了一个prototype属性用于引用原型对象。

function computer(){
   this.name="thinkPad 500";
   this.factory="联想";
   this.price=5000;
   this.size=17;
}
/*
*读取函数中的prototype,默认情况下为空
*/
for( pro in computer.prototype){
   document.write(computer.prototype,"<br>");
}
//没有继承原型对象中属性
var mycomputer=new computer();
for( pro in mycomputer){
   document.write(pro,":",mycomputer[pro],"<br>");
}
computer.prototype.interface="VAG";
//添加原型对象的属性
for( pro in computer.prototype){
   document.write(pro,":",computer.prototype[pro],"<br>");
}
//继承原型对象中属性
var mycomputer=new computer();
for( pro in mycomputer){
   document.write(pro,":",mycomputer[pro],"<br>");
}

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可得如下运行结果:

JavaScript原型对象原理与应用分析

原型对象的继承

继承是通过原型对象实现

<script type="text/javascript">
//定义一个工人
function worker(){
    this.name="";
    this.address="";
}
//定义一个部门经理
function manager(_dept){
    this.dept=_dept;
}
//定义继承关系
manager.prototype=new worker();
//创建计划部门经理
var jh=new manager("计划");
for(pro in jh){
    document.write(pro,":",jh[pro],"<br>");
}
//当前jh有效没有改变原型对象中的值
jh.name="计划部门经理";
jh.address="计划部";
for(pro in jh){
    document.write(pro,":",jh[pro],"<br>");
}
//原型对象中的值没有被修改
var rs=new manager('人事');
for(pro in rs){
    document.write(pro,":",rs[pro],"<br>");
}
//修改原型对象中的值,将会在继承的对象中体现,如果继承类中没有覆盖
manager.prototype.address="成都市";
//覆盖后address的值还是原来的计划
for(pro in jh){
    document.write(pro,":",jh[pro],"<br>");
}
//没有覆盖address的值是成都市
for(pro in rs){
    document.write(pro,":",rs[pro],"<br>");
}
</script>

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可得如下运行结果:

JavaScript原型对象原理与应用分析

通过原型对象可以为所有继承对象添加属性和删除属性,所有继承对象都将统一显示。

更多关于JavaScript相关内容还可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
node.js中的fs.rename方法使用说明
Dec 16 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
javascript实现控制div颜色
Jul 07 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
JS常见算法详解
Feb 28 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
angular6 填坑之sdk的方法
Dec 27 #Javascript
react+ant design实现Table的增、删、改的示例代码
Dec 27 #Javascript
React降级配置及Ant Design配置详解
Dec 27 #Javascript
详解Ant Design of React的安装和使用方法
Dec 27 #Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 #Javascript
angular 用Observable实现异步调用的方法
Dec 27 #Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 #Javascript
You might like
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
在视频前插入广告
2006/11/20 Javascript
番茄的表单验证类代码修改版
2008/07/18 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
详解Python命令行解析工具Argparse
2016/04/20 Python
python实现log日志的示例代码
2018/04/28 Python
Python的UTC时间转换讲解
2019/02/26 Python
Python实现数值积分方式
2019/11/20 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
中学生在校期间的自我评价分享
2013/11/13 职场文书
党员学习十八大感想
2014/01/17 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
行政专员岗位职责范本
2014/08/26 职场文书
九华山导游词
2015/02/03 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
Pytest之测试命名规则的使用
2021/04/16 Python
Python 如何实现文件自动去重
2021/06/02 Python
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python