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 相关文章推荐
jquery索引在使用中的一些困惑
Oct 24 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
React中使用collections时key的重要性详解
Aug 07 Javascript
vue项目部署上线遇到的问题及解决方法
Jun 10 Javascript
浅析java线程中断的办法
Jul 29 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
vue调用语音播放的方法
Sep 27 Javascript
详解ECMAScript2019/ES10新属性
Dec 06 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
原生JavaScript写出Tabs标签页的实例代码
Jul 20 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 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简单系统查询模块代码打包下载
2008/06/07 PHP
PHP添加MySQL数据记录代码
2008/06/07 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
PDO::exec讲解
2019/01/28 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
JsDom 编程小结
2011/08/09 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
2016/03/31 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
使用ionic播放轮询广告的实现方法(必看)
2017/04/24 Javascript
JS实现商品筛选功能
2020/08/19 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
微信小程序新手教程之页面打开数量限制
2019/03/03 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
python itchat实现微信自动回复的示例代码
2017/08/14 Python
Python实现Kmeans聚类算法
2020/06/10 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
python使用建议技巧分享(三)
2020/08/18 Python
python创建文本文件的简单方法
2020/08/30 Python
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
项目经理的岗位职责
2013/11/23 职场文书
优秀护士获奖感言
2014/02/20 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
给校长的建议书400字
2014/05/15 职场文书
致青春观后感
2015/06/09 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
Python中for后接else的语法使用
2021/05/18 Python