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 相关文章推荐
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
javascript实现回到顶部特效
May 06 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 Javascript
微信小程序全局变量功能与用法详解
Jan 22 Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 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从FLV文件获取视频预览图的方法
2015/03/12 PHP
php简单获取复选框值的方法
2016/05/11 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
jquery easyui使用心得
2014/07/07 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
VUE中使用Vue-resource完成交互
2017/07/21 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
python实现用于测试网站访问速率的方法
2015/05/26 Python
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
Python 下载及安装详细步骤
2019/11/04 Python
opencv 查找连通区域 最大面积实例
2020/06/04 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
2014新年寄语
2014/01/20 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
校园广播站开场白
2015/06/01 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
教师素质教育心得体会
2016/01/19 职场文书
《刷子李》教学反思
2016/02/20 职场文书
2019各种承诺书范文
2019/06/24 职场文书
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python