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 相关文章推荐
一个cssQuery对象 javascript脚本实现代码
Jul 21 Javascript
js 实现复制到粘贴板的功能代码
May 13 Javascript
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
BootStrap智能表单demo示例详解
Jun 13 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
基于Vue实现平滑过渡的拖拽排序功能
Jun 12 Javascript
vue-router的hooks用法详解
Jun 08 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 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
星际争霸 Starcraft 秘技补丁
2020/03/14 星际争霸
简单的过滤字符串中的HTML标记
2006/12/25 PHP
PHP运行模式的深入理解
2013/06/03 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
React Router基础使用
2017/01/17 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
详解Python中expandtabs()方法的使用
2015/05/18 Python
Python实现统计单词出现的个数
2015/05/28 Python
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
Numpy的简单用法小结
2019/08/28 Python
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
家具促销活动方案
2014/02/16 职场文书
晚会主持词开场白
2014/03/17 职场文书
银行转正自我鉴定
2014/09/29 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
小学英语教学随笔
2015/08/14 职场文书
大学班干部竞选稿
2015/11/20 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang
python用海龟绘图写贪吃蛇游戏
2021/06/18 Python
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js
MySQL七种JOIN类型小结
2021/10/24 MySQL