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的语言特性分析
Apr 11 Javascript
怎么选择Javascript框架(Javascript Framework)
Nov 22 Javascript
JavaScript DOM节点添加示例
Jul 16 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
Jun 05 Javascript
解析JavaScript数组方法reduce
Dec 12 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
vue省市区三联动下拉选择组件的实现
Apr 28 Javascript
对类Vue的MVVM前端库的实现代码
Sep 07 Javascript
JavaScript惰性求值的一种实现方法示例
Jan 11 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 Javascript
javascript实现页面的实时时钟显示示例
Aug 06 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对gzip文件或者字符串解压实例参考
2008/07/25 PHP
解决File size limit exceeded 错误的方法
2013/06/14 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
php验证码实现代码(3种)
2015/09/07 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
angular.bind使用心得
2015/10/26 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
python+POP3实现批量下载邮件附件
2018/06/19 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
django使用graphql的实例
2020/09/02 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
医院门卫岗位职责
2013/12/30 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
文明城市标语
2014/06/16 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
安全生产感想
2015/08/07 职场文书
军事理论课感想
2015/08/11 职场文书
Python中json.dumps()函数的使用解析
2021/05/17 Python
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS
python游戏开发之pygame实现接球小游戏
2022/04/22 Python