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 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
JS 判断代码全收集
Apr 28 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
浅谈express 中间件机制及实现原理
Aug 31 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 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 网上商城促销设计实例代码
2012/02/17 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
Javascript模板技术
2007/04/27 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
python定时执行指定函数的方法
2015/05/27 Python
Python获取linux主机ip的简单实现方法
2016/04/18 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
对python csv模块配置分隔符和引用符详解
2018/12/12 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
html5的新增的标签和废除的标签简要概述
2013/02/20 HTML / CSS
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
初三家长会邀请函
2014/01/18 职场文书
违反校纪校规检讨书
2014/02/15 职场文书
婚礼新人答谢词
2015/01/04 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
我的生日感言
2015/08/03 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书
JavaScript流程控制(循环)
2021/12/06 Javascript