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中实现块作用域的方法
Apr 01 Javascript
js选取多个或单个元素的实现代码(用class)
Aug 22 Javascript
Javascript学习指南
Dec 01 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 Javascript
JavaScript实现简单动态表格
Dec 02 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/12/06 PHP
Cakephp 执行主要流程
2010/03/24 PHP
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
JS中的多态实例详解
2017/10/15 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
Django的session中对于用户验证的支持
2015/07/23 Python
解决pandas中读取中文名称的csv文件报错的问题
2018/07/04 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
Python是如何进行类型转换的
2013/06/09 面试题
大学生物业管理求职信
2013/10/24 职场文书
大三预备党员入党思想汇报
2014/01/08 职场文书
大学新生欢迎词
2014/01/10 职场文书
《动手做做看》教学反思
2014/04/09 职场文书
保密工作责任书
2014/04/16 职场文书
研究生导师推荐信
2015/03/25 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
java版 联机五子棋游戏
2022/05/04 Java/Android