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做的扫雷小游戏
Feb 17 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 Javascript
domReady的实现案例
Nov 23 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 Javascript
jquery实现图片轮播器
May 23 jQuery
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
jQuery实现的中英文切换功能示例
Jan 11 jQuery
js实现一个页面多个倒计时的3种方法
Feb 25 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
详解vue页面首次加载缓慢原因及解决方案
Nov 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
smarty模板中拼接字符串的方法
2014/02/14 PHP
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
2016/05/20 PHP
JavaScript 密码强度判断代码
2009/09/05 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
使用百度地图实现地图网格的示例
2018/02/06 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
2018/09/03 jQuery
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
详解python做UI界面的方法
2019/02/27 Python
python处理“
2019/06/10 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
PHP如何自定义函数
2016/09/16 面试题
鸿星尔克广告词
2014/03/21 职场文书
关爱老人标语
2014/06/21 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
党的群众路线教育实践活动对照检查材料思想汇报
2014/09/19 职场文书
离职报告范文
2014/11/04 职场文书
家属答谢词
2015/01/05 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
Docker官方工具docker-registry案例演示
2022/04/13 Servers
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python