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 相关文章推荐
JavaScript 事件参考手册
Dec 24 Javascript
jquery如何实现锚点链接之间的平滑滚动
Dec 02 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 Javascript
Vue实现背景更换颜色操作
Jul 17 Javascript
解决vue项目 build之后资源文件找不到的问题
Sep 12 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 变量类型的强制转换
2009/10/23 PHP
《PHP编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
js中时间格式化的几种方法
2018/07/22 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
CSS3中伪元素::before和::after的用法示例
2017/09/18 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
美国电视购物:QVC
2017/02/06 全球购物
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
一份软件工程师的面试试题
2016/02/01 面试题
车间组长岗位职责
2013/12/20 职场文书
经典促销广告词大全
2014/03/19 职场文书
感恩教育活动总结
2014/05/05 职场文书
法院授权委托书格式
2014/09/28 职场文书
物业工程部经理岗位职责
2015/04/09 职场文书
清明节主题班会
2015/08/14 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android