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中对于DOM的加强
Apr 11 Javascript
JS通过相同的name进行表格求和代码
Aug 18 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 Javascript
JavaScript生成福利彩票双色球号码
May 15 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
js+canvas实现动态吃豆人效果
Mar 22 Javascript
浅谈vue 单文件探索
Sep 05 Javascript
微信小程序webview 脚手架使用详解
Jul 22 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 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
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
jQuery学习笔记之Helloworld
2010/12/22 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
node.js入门学习之url模块
2017/02/25 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
2020/06/19 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
利用node.js开发cli的完整步骤
2020/12/29 Javascript
python爬虫爬取淘宝商品信息
2018/02/23 Python
pandas重新生成索引的方法
2018/11/06 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
Python 面向对象部分知识点小结
2020/03/09 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
电气技术员岗位职责
2013/11/19 职场文书
个人求职简历中英文自我评价
2013/12/16 职场文书
财政局长自荐信范文
2013/12/22 职场文书
农村婚礼证婚词
2014/01/10 职场文书
社区包粽子活动方案
2014/01/21 职场文书
个人培训自我鉴定
2014/03/28 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
写给女朋友的检讨书
2015/05/06 职场文书