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实现的距离现在多长时间后的一个格式化的日期
Oct 29 Javascript
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
vue v-model表单控件绑定详解
May 17 Javascript
分析javascript原型及原型链
Mar 18 Javascript
简单通过settimeout看javascript的运行机制
May 10 Javascript
微信小程序左滑删除实现代码实例
Sep 16 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
如何删除多级目录
2006/10/09 PHP
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
PHP多进程编程实例
2014/10/15 PHP
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
js/html光标定位的实现代码
2013/09/23 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
2016/02/17 Javascript
JS简单获得节点元素的方法示例
2018/02/10 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
Python Json数据文件操作原理解析
2020/05/09 Python
Django如何批量创建Model
2020/09/01 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
应用心理学个人求职信范文
2013/12/11 职场文书
师范院校学生自荐信范文
2013/12/27 职场文书
珠宝店促销方案
2014/03/21 职场文书
雷人标语集锦
2014/06/19 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
聊一聊python常用的编程模块
2021/05/14 Python