JavaScript 学习笔记(六)


Posted in Javascript onDecember 31, 2009

一、 工厂方式
自己的理解:要创建很多个对象的实例,这些实例有相同的属性,但是有不同的属性值。这个时候就需要创个工厂函数(factory function)。
工厂函数(factory function):创建并返回特定类型的对象。
工厂函数中如果一个属性是方法的话,可以在工厂函数的外面定义对象的方法,然后通过属性指向该方法,从而可以避开每次都调用自己的属性方法,这样做使得每个对象都共享了同一个函数。
示例:

<script type="text/javascript"> 
//工厂函数外面定义对象的方法 
function ShowNameFn() { 
alert(this.Name); 
} 
//工厂方式创建对象 
function CreatBOFn(sName, iAge, bSex) { 
var BO = new Object(); 
BO.Name = sName; 
BO.Age = iAge; 
BO.Sex = bSex; 
BO.ShowName = ShowNameFn; //该属性实际上是指向函数的指针,是一个方法 
return BO; 
} 
//按钮测试调用 
function FactoryCreateFn() { 
var oPerson1 = CreatBOFn("张三", 18, true); //创建实例实际上是直接调用方法 
oPerson1.ShowName(); 
} 
</script>

总结:工厂函数这种方式定义类或对象,他在创建实例的时候就调用这个工厂函数。
二、 构造函数方式
第一步选择类名,即构造函数的名字,BO名首字母大写,看下面代码发现跟上面的工厂函数类似。
示例:
//------第二种:构造函数方式-------------------------------- 
function Car(color, money) { 
this.Color = color; 
this.Money = money; 
this.ShowMoney = function() { 
alert(this.Money); 
} 
} 
//按钮调用测试 
function NewCarFn() { 
var Car1 = new Car("红色", "23万RMB"); 
Car1.ShowMoney(); 
} 
//----------------------------------------------------------

比较上一种工厂函数方式的区别:
① 构造函数内部没有创建对象,而是使用this关键字。
② 使用new运算符调用构造函数。
三、 原型方式
利用对象的prototype属性,可以把他看成创建新对象所依赖的原型,用空构造函数来设置类名,然后所有的属性和方法都被直接赋予prototype属性。
原型方式的问题:
首先,这个构造函数没有参数,使用原型方式时,不能通过给构造函数传递参数初始化属性的值。必须在对象创建后才能改变属性的默认值。
其次,当属性指向的是对象,而不是函数时,对象却被多个实例共享的,其中一个改变将引起其他对象的改变。
示例:
//先定义一个空的构造函数 
function Car() { 
} 
//属性和方法直接赋予prototype属性 
Car.prototype.Color = "红色,"; 
Car.prototype.Money = "20万"; 
Car.prototype.Drivers = new Array("小三", "小四"); 
var Car1 = new Car(); 
Car1.Drivers.push("小五"); //实例1中给对象Drivers新增了值(实际上就是在原型里面加了多了个“小五”,所以当new第二个对象的时候读属性Drivers也出现了小五) 
alert(Car1.Drivers); 
var Car2 = new Car(); 
alert(Car2.Drivers); //实例2中,对象中的值改变了!输出“小三,小四,小五”

四、 混合的构造函数/原型方式
联合使用构造函数和原型方式,就可以像其他语言一样的创建对象。
构造函数定义对象的所有非函数属性,原型方式定义对象的函数属性(方法)。
示例:
function BOStudent(name,age) { 
this.姓名 = name; 
this.年龄 = age; 
this.课程 = new Array("语文","数学"); 
} 
BOStudent.prototype.ShowName = function() { 
alert(this.姓名); 
}; 
//点击按钮调试 
function Admixture() { 
var stu1 = new BOStudent("张三", 20); //new第一个BO 
var stu2 = new BOStudent("李四", 22); //new第二个BO 
stu1.课程.push("物理"); //给对象1 添加物理课程项 
alert(stu1.课程); 
alert(stu2.课程); 
}

混合的构造函数/原型方式是ECMAScript采用的主要方式,他具有其他方式的特性,却没有他们的副作用。
五、 动态原型方法
大多数的面向对象语言,定义类时,属性和方法都打包在一起。而上面的混合构造函数/原型方式属性和方法是分开的,有些人认为在构造函数内部找属性,在外面找方法的做法不合逻辑,因此也就产生了动态原型方法。
区别在于:赋予对象的方法的位置不同。动态原型方法是在构造函数的内部,而上面的第四种是在构造函数外部。
示例:
function BODynamicPrototype(name, age) { 
this.姓名 = name; 
this.年龄 = age; 
this.课程 = new Array("111", "222"); 
//_initialized标识判断是否已经初始化过,即是否已给原型赋予了任何方法,该方法只创建并赋值一次 
if (typeof BODynamicPrototype._initialized == "undefined") { 
BODynamicPrototype.prototype.ShowName = function() { 
alert(this.姓名); 
}; 
BODynamicPrototype._initialized = true; 
} 
} //点击按钮调试 
function DynamicPrototype() { 
var stu1 = new BODynamicPrototype("aaa", 20); //new第一个BO 
var stu2 = new BODynamicPrototype("bbb", 22); //new第二个BO 
stu1.课程.push("333"); //给对象1 添加物理课程项 
alert(stu1.课程); 
alert(stu2.课程); 
}

六、 混合工厂方式
目的是创建假构造函数,只返回另一种对象的新实例。这种方式在对象方法内部管理方面与经典方式有着相同的问题。强烈建议:除非万不得已避免使用!
Javascript 相关文章推荐
在网页里看flash的trace数据的js类
Jan 10 Javascript
JavaScript中几种常见排序算法小结
Feb 22 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
微信小程序 canvas API详解及实例代码
Oct 08 Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 Javascript
原生js实现自定义滚动条
Jan 20 Javascript
JavaScript 学习笔记(五)
Dec 31 #Javascript
JavaScript 学习笔记(四)
Dec 31 #Javascript
javascript showModalDialog模态对话框使用说明
Dec 31 #Javascript
javascript控制frame,iframe的src属性代码
Dec 31 #Javascript
让IE8支持DOM 2(不用框架!)
Dec 31 #Javascript
javascript 获取表单file全路径
Dec 31 #Javascript
JavaScript 模拟用户单击事件
Dec 31 #Javascript
You might like
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
创建配置文件 用PHP写出自己的BLOG系统 2
2010/04/12 PHP
PHP为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
jquery 简单的进度条实现代码
2010/03/11 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
Vue的自定义组件不能使用click方法的解决
2020/07/28 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
玩转python爬虫之cookie使用方法
2016/02/17 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
python中turtle库的简单使用教程
2020/11/11 Python
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
物流专业大学的自我评价
2014/01/11 职场文书
中文专业自荐书
2014/06/29 职场文书
中国梦演讲稿开场白
2014/08/28 职场文书
退学证明范本3篇
2014/10/29 职场文书
年度考核表个人总结
2015/03/06 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
无婚姻登记记录证明
2015/06/18 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书