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 相关文章推荐
Prototype使用指南之enumerable.js
Jan 10 Javascript
菜鸟javascript基础资料整理3 正则
Dec 06 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
Mar 28 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 Javascript
jquery实现一个简单好用的弹出框
Sep 26 Javascript
javascript 闭包详解
Feb 15 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 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脚本的10个技巧(1)
2006/10/09 PHP
中篇:安装及配置PHP
2006/12/13 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
php解析url的三个示例
2014/01/20 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
动态刷新 dorado树的js代码
2009/06/12 Javascript
jquery弹出框的用法示例(2)
2013/08/26 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
js实现仿qq消息的弹出窗效果
2016/01/06 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
跟老齐学Python之类的细节
2014/10/13 Python
批处理与python代码混合编程的方法
2016/05/19 Python
Python实现优先级队列结构的方法详解
2016/06/02 Python
python微信公众号之关键词自动回复
2018/06/15 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
诚信承诺书模板
2014/05/26 职场文书
品牌推广活动策划方案
2014/08/19 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python
浅谈Vue的computed计算属性
2022/03/21 Vue.js