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 相关文章推荐
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 Javascript
javascript 在firebug调试时用console.log的方法
May 10 Javascript
javascript中的缓动效果实现程序
Dec 29 Javascript
BootStrap 弹出层代码
Feb 09 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 Javascript
JS实现简单表格排序操作示例
Oct 07 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
iview table高度动态设置方法
Mar 14 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 Javascript
Vue实现简单的跑马灯
May 25 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
PHP 数组实例说明
2008/08/18 PHP
PHP+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
php定界符
2014/06/19 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
教师实习的自我鉴定
2013/10/26 职场文书
专业实习自我鉴定
2013/10/29 职场文书
行政助理岗位职责
2013/11/10 职场文书
园艺师求职信
2014/04/27 职场文书
个人德育工作总结
2015/03/05 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
2015团员个人年度总结
2015/11/24 职场文书
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python