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 相关文章推荐
关于图片按比例自适应缩放的js代码
Oct 30 Javascript
jquery 如何动态添加、删除class样式方法介绍
Nov 07 Javascript
让网页跳转到指定位置的jquery代码非书签
Sep 06 Javascript
jquery向上向下取整适合分页查询
Sep 06 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
基于jQuery日历插件制作日历
Mar 11 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
AngularJS 模块化详解及实例代码
Sep 14 Javascript
angular实现form验证实例代码
Jan 17 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
微信小程序—setTimeOut定时器的问题及解决
Jul 26 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 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制作图型计数器的例子
2006/10/09 PHP
让PHP开发者事半功倍的十大技巧小结
2010/04/20 PHP
PHP中使用break跳出多重循环代码实例
2015/01/21 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
javascript json2 使用方法
2010/03/16 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
jquery实现弹出层完美居中效果
2014/03/03 Javascript
JavaScript实现简单获取当前网页网址的方法
2015/11/09 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
利用原生JS实现data方法示例代码
2019/05/28 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
顺丰快递Java软件工程师面试题
2015/07/31 面试题
团日活动总结
2014/04/28 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
python缺失值的解决方法总结
2021/06/09 Python
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python