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 相关文章推荐
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
AngularJS语法详解
Jan 23 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 Javascript
详解http访问解析流程原理
Oct 18 Javascript
使用post方法实现json往返传输数据的方法
Mar 30 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
基于MySQL分区性能的详细介绍
2013/05/02 PHP
php中header设置常见文件类型的content-type
2015/06/23 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
php接口隔离原则实例分析
2019/11/11 PHP
JS代码放在head和body中的区别分析
2011/12/01 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
ant design vue中表格指定格式渲染方式
2020/10/28 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
[01:04:08]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第一场 12.16
2020/12/18 DOTA
Python中类的继承代码实例
2014/10/28 Python
线程和进程的区别及Python代码实例
2015/02/04 Python
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
Python字符串转换成浮点数函数分享
2015/07/24 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
正隆泰信息技术有限公司上机题
2012/06/14 面试题
新闻系毕业生推荐信
2013/11/16 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
委托书的写法
2014/09/16 职场文书
离婚财产分配协议书
2014/10/21 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书
Win11 引入 Windows 365 云操作系统,适应疫情期间混合办公模式:启动时直接登录、模
2022/04/06 数码科技