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 相关文章推荐
jquery 模式对话框终极版实现代码
Sep 28 Javascript
Jquery实现带动画效果的经典二级导航菜单
Mar 22 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
bootstrap3中container与container_fluid外层容器的区别讲解
Dec 04 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
微信小程序webview 脚手架使用详解
Jul 22 Javascript
vue中实现弹出层动画效果的示例代码
Sep 25 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
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
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
解析左右值无限分类的实现算法
2013/06/20 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
潜说js对象和数组
2011/05/25 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
100行代码实现一个vue分页组功能
2018/11/06 Javascript
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
Python3基础之函数用法
2014/08/13 Python
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
基于python的字节编译详解
2017/09/20 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
对python中的高效迭代器函数详解
2018/10/18 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
Python操作excel的方法总结(xlrd、xlwt、openpyxl)
2019/09/02 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
中专生职业生涯规划书范文
2014/01/10 职场文书
素质教育标语
2014/06/27 职场文书
群众路线个人整改措施
2014/10/24 职场文书
教师培训简讯
2015/07/20 职场文书