javascript 混合的构造函数和原型方式,动态原型方式


Posted in Javascript onDecember 07, 2009

我们日常JS编程中最常用的方式 有下面2种:
1.混合的构造函数和原型方式 (重点)

function car (sColor,iNumbers){ // 构造函数只用来定义对象的所有非函数属性,即对象的属性 
this.color = sColor; 
this.numbers = iNumbers; 
this.dirvers = new Array ("Jone","Leon"); 
} 
car.prototype.showColor = function (){ // 原型方式只用来定义对象的所有函数属性,即对象的方法 
alert(this.color); 
} 
var car1 = new car("red"); 
var car2 = new car("yellow"); 
car1.showColor)(); 
car2.showColor)();

总结:当你创建(new)一个新的对象实例car1和car2的时候,car1和car2都继承函数对象car的所有的非函数属性;此时在car函数外面给car函数对象的原型里面生成一个showColor方法,此时car1和car2都会引用car的原型里面的showColor方式,如果把原型方法放进car函数体里面,那么此时car1和car2不是引用的关系,而是每执行一次函数,就构建一次showColor函数,如果有100个car,那么就要重复构造100个函数。所以要把非函数属性和函数属性分开来写。
2.动态原型方式 (重点)
function car (sColor,iNumbers){ // 构造函数只用来定义对象的所有非函数属性,即对象的属性 
this.color = sColor; 
this.numbers = iNumbers; 
this.dirvers = new Array ("Jone","Leon"); 
if(typeof car._initialized=="undefined"){ //此时此刻,这里的car._initialized成立,继续执行下面的函数 
car.prototype.showColor = function (){ 
alert(this.color); 
} 
} 
car._initialized = true; // 
执行到这里就停止再也不在执行第二次,因为此时此刻,car._initialized只是函数的属性,而不是函数对象的原型属性,如果是原型属性的话,new一个函数对象的实例,就会改变函数里面原型对象的属性,那么就会重复构造showColor这个函数。正因为是这个原因,当car._initialized等于undefined的时候,执行一次showColor,最后得到的car._initialized=true,这个时候改变的是函数的属性,而不是函数原型的属性,所以外部new一个对象实例根本无法改变函数的属性,所有红色部分的代码就是为了做一件事情:只执行红色代码之间的方法,并且每种方法只有一次,不会重复执行! 
} 
var car1 = new car ("red"); 
var car2 = new car ("yellow"); 
car1.showColor(); 
car2.showColor();

总结:不管是利用上面2种方式的那一种,都可以达到相同的效果!
方法1:混合的构造函数和原型方式,相当于把非函数属性和一般属性分开来写,这样new 新对象的时候,不会重复构造新函数,此时引用的知识函数对象的原型方法和函数对象的属性。但是,代码看起来没有封装起来而且,不影响任何东西。
方法2:完全利用JAVA的编程代码风格来实现JS的编程。这样的好处是让整个函数看起来像是把属性和方法都“封装”在一个函数体内,看起来更像一个“类”。(温故知新:JS中其实没有类,你要说有类,就可以把它看做一个function类),缺点是在于利用if()语句看起来不是很友好而已。
Javascript 相关文章推荐
JavaScript 10件让人费解的事情
Feb 15 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
js 获取计算后的样式写法及注意事项
Feb 25 Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
layui select 禁止点击的实现方法
Sep 05 Javascript
在vue中根据光标的显示与消失实现下拉列表
Sep 29 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 Javascript
vue 数据操作相关总结
Dec 17 Vue.js
JavaScript 常见对象类创建代码与优缺点分析
Dec 07 #Javascript
javascript prototype原型操作笔记
Dec 07 #Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
Dec 07 #Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 #Javascript
js event事件的传递与冒泡处理
Dec 06 #Javascript
IE和firefox浏览器的event事件兼容性汇总
Dec 06 #Javascript
js 操作select相关方法函数
Dec 06 #Javascript
You might like
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
php封装的page分页类完整实例
2016/10/18 PHP
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
如何利用nodejs实现命令行游戏
2020/11/24 NodeJs
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
Python pickle模块用法实例
2015/04/14 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
时尚设计师手表:The Watch Cabin
2018/10/06 全球购物
捷克移动配件网上商店:ProMobily.cz
2019/03/15 全球购物
开办饭店创业计划书
2013/12/28 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
就业协议书
2014/09/12 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
单位同意报考证明
2015/06/17 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书