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 相关文章推荐
js获取事件源及触发该事件的对象
Oct 24 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
javascript中递归的两种写法
Jan 17 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
javascript实现电脑和手机版样式切换
Nov 10 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
JavaScript变速动画函数封装添加任意多个属性
Apr 03 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 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/20 PHP
PHP实现格式化文件数据大小显示的方法
2015/01/03 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
javascript 常用代码技巧大收集
2009/02/25 Javascript
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
SVG描边动画
2017/02/23 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
python安装及变量名介绍详解
2020/12/12 Python
python 模块导入问题汇总
2021/02/01 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
中专生自我鉴定范文
2013/12/19 职场文书
大四自我鉴定
2014/02/08 职场文书
演讲稿格式
2014/04/30 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
领导欢迎词范文
2015/01/26 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers