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 相关文章推荐
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
javascript重复绑定事件造成的后果说明
Mar 02 Javascript
js如何获取file控件的完整路径具体实现代码
May 15 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
原生js实现节日时间倒计时功能
Jan 18 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
VUEJS 2.0 子组件访问/调用父组件的实例
Feb 10 Javascript
vue项目如何刷新当前页面的方法
May 18 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
vue组件的路由高亮问题解决方法
May 11 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
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
2017/08/15 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
使用python在本地电脑上快速处理数据
2017/06/22 Python
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
Python计算IV值的示例讲解
2020/02/28 Python
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
医药个人求职信范文
2014/01/29 职场文书
司马光教学反思
2014/02/01 职场文书
蓝颜请假条
2014/04/11 职场文书
实习推荐信
2014/05/10 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers
vue的项目如何打包上线
2022/04/13 Vue.js