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 相关文章推荐
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
js预载入和JavaScript Image()对象使用介绍
Aug 28 Javascript
JS Map 和 List 的简单实现代码
Jul 08 Javascript
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
jquery定时滑出可最小化的底部提示层特效代码
Oct 02 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
React学习笔记之事件处理(二)
Jul 02 Javascript
vue组件编写之todolist组件实例详解
Jan 22 Javascript
在vue中读取本地Json文件的方法
Sep 06 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
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
中英文字符串翻转函数
2008/12/09 PHP
PHP异步调用socket实现代码
2012/01/12 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
php中try catch捕获异常实例详解
2014/11/21 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
Python实现的二维码生成小软件
2014/07/11 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
Python连接Redis的基本配置方法
2018/09/13 Python
python Tkinter版学生管理系统
2019/02/20 Python
详解用python自制微信机器人,定时发送天气预报
2019/03/25 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
YBF Beauty官网:美丽挚友,美国知名彩妆品牌
2020/11/22 全球购物
学生会竞选演讲稿学习部
2014/08/25 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
仰望星空观后感
2015/06/10 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python
浅谈Python数学建模之固定费用问题
2021/06/23 Python