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 事件系统
Jul 22 Javascript
juqery 学习之五 文档处理 插入
Feb 11 Javascript
使用正则表达式的格式化与高亮显示json字符串
Dec 03 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
Vue将页面导出为图片或者PDF
Aug 17 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 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
一个数据采集类
2007/02/14 PHP
php开启openssl的方法
2014/05/15 PHP
php实现购物车功能(上)
2020/07/23 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
flexigrid 参数说明
2010/11/23 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
jQuery垂直多级导航菜单代码分享
2015/08/18 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
node express使用HTML模板的方法示例
2019/08/22 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
原生js实现购物车功能
2020/09/23 Javascript
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
Python中修改字符串的四种方法
2018/11/02 Python
python实现图片九宫格分割
2021/03/07 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
基于Tensorflow一维卷积用法详解
2020/05/22 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
医院后勤自我鉴定
2013/10/13 职场文书
创业计划书模版
2014/02/05 职场文书
法院信息化建设方案
2014/05/21 职场文书
公司开业庆典策划方案
2014/06/04 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
采购员岗位职责
2015/02/03 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python