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 相关文章推荐
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
js中自定义方法实现停留几秒sleep
Jul 11 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
js闭包学习心得总结
Apr 17 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
基于javascript实现贪吃蛇小游戏
Nov 25 Javascript
利用JS如何获取form表单数据
Dec 19 Javascript
vue微信分享插件使用方法详解
Feb 18 Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 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 随机排序广告的实现代码
2011/05/09 PHP
基于PHP字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
php中使用sftp教程
2015/03/30 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
php根据一个给定范围和步进生成数组的方法
2015/06/19 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
深入解析contentWindow, contentDocument
2013/07/04 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
python打开windows应用程序的实例
2019/06/28 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
春风行动实施方案
2014/03/28 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
工厂见习报告范文
2014/10/31 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
创建文明城市倡议书
2015/04/28 职场文书
2015年林业工作总结
2015/05/14 职场文书
2015年防汛工作总结
2015/05/15 职场文书
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫