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 相关文章推荐
js Array对象的扩展函数代码
Apr 24 Javascript
使用js在页面中绘制表格核心代码
Sep 16 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 Javascript
前端MVVM框架解析之双向绑定
Jan 24 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 Javascript
Vue退出登录时清空缓存的实现
Nov 12 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 Javascript
前端 javascript 实现文件下载的示例
Nov 24 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 学习提高路线分享
2011/10/23 PHP
PHP面向对象概念
2011/11/06 PHP
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
jQuery中trigger()方法用法实例
2015/01/19 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
python定义具名元组实例操作
2021/02/28 Python
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
经理秘书岗位职责
2013/11/14 职场文书
班长自荐书范文
2014/02/11 职场文书
《大作家的小老师》教学反思
2014/04/16 职场文书
小学教师师德演讲稿
2014/05/06 职场文书