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 相关文章推荐
用htc组件制作windows选项卡
Jan 13 Javascript
asp 取文本框名称代码
Dec 02 Javascript
flash 得到自身url参数的代码
Nov 15 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
Jquery结合HTML5实现文件上传
Jun 25 Javascript
炫酷的js手风琴效果
Oct 13 Javascript
微信小程序 地图map详解及简单实例
Jan 10 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
Sep 18 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
JavaScript如何判断对象有某属性
Jul 03 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中运用http调用的GET和POST方法示例
2014/09/29 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
php搜索文件程序分享
2015/10/30 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
如何利用nodejs实现命令行游戏
2020/11/24 NodeJs
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
python中如何使用朴素贝叶斯算法
2017/04/06 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
Python中collections模块的基本使用教程
2018/12/07 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
python Paramiko使用示例
2020/09/21 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
母亲追悼会答谢词
2014/01/27 职场文书
售前工程师职业生涯规划
2014/03/02 职场文书
活动总结范文
2014/08/30 职场文书
同事打架检讨书
2015/05/06 职场文书
大学军训口号大全
2015/12/24 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书