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代码
Sep 02 Javascript
IE iframe的onload方法分析小结
Jan 07 Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
使用jquery解析XML示例代码
Sep 05 Javascript
Javascript 字符串模板的简单实现
Feb 13 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
vue之a-table中实现清空选中的数据
Nov 07 Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 Javascript
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得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
解析php curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
javascript深入理解js闭包
2010/07/03 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
js实现分页功能
2017/05/24 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
python检测远程udp端口是否打开的方法
2015/03/14 Python
python使用nntp读取新闻组内容的方法
2015/05/08 Python
python实现用户登陆邮件通知的方法
2015/07/09 Python
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
python如何生成网页验证码
2018/07/28 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
安装docker-compose的两种最简方法
2019/07/30 Python
python包的导入方式总结
2021/03/02 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
体育专业个人求职信范文
2013/12/27 职场文书
小学生班会演讲稿
2014/01/09 职场文书
幼儿园招生广告
2014/03/19 职场文书
幼儿园八一建军节活动方案
2014/08/27 职场文书
甘南现象心得体会
2014/09/11 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
加强党性修养心得体会
2016/01/21 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书