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中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
使用简洁的jQuery方法实现隔行换色功能
Jan 02 Javascript
AngularJS基础 ng-srcset 指令简单示例
Aug 03 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
js中开关变量使用实例
Feb 24 Javascript
js中setTimeout的妙用--防止循环超时
Mar 06 Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
基于vue.js实现的分页
Mar 13 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
微信小程序实现轨迹回放的示例代码
Dec 13 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程序
2006/10/09 PHP
php 验证码(倾斜,正弦干扰线,黏贴,旋转)
2013/06/29 PHP
PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
JQuery 常用操作代码
2010/03/14 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
JavaScript之引用类型介绍
2012/08/10 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
python实现log日志的示例代码
2018/04/28 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
解决python线程卡死的问题
2019/02/18 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
北大自主招生自荐信
2013/10/19 职场文书
自荐信封面
2013/12/04 职场文书
网站开发实习生的自我评价
2013/12/11 职场文书
新学期红领巾广播稿
2014/01/14 职场文书
留学自荐信写作方法
2014/01/27 职场文书
授权委托书范文
2014/07/31 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书