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开发中常用javaScript技术与代码
Mar 09 Javascript
javascript的数组和常用函数详解
May 09 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
laydate日历控件使用方法详解
Nov 20 Javascript
JS中Object对象的原型概念基础
Jan 29 Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
element-ui中el-upload多文件一次性上传的实现
Dec 02 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
JS实现百度搜索框
Feb 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
PHP7.3.10编译安装教程
2019/10/08 PHP
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
微信小程序--获取用户地理位置名称(无须用户授权)的方法
2019/04/29 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
彻底搞懂Python字符编码
2018/01/23 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
python flask搭建web应用教程
2019/11/19 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
文秘档案管理岗位职责
2014/03/06 职场文书
校园演讲稿汇总
2014/05/21 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
公司租车协议书
2015/01/29 职场文书
2015年行政部工作总结
2015/04/28 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
生产实习心得体会范文
2016/01/22 职场文书
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python
python 判断文件或文件夹是否存在
2022/03/18 Python