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是怎么继承的介绍
Jan 05 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
通过jquery 获取URL参数并进行转码
Aug 18 Javascript
再JavaScript的jQuery库中编写动画效果的指南
Aug 13 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
php基于redis处理session的方法
Mar 14 Javascript
详解vue-cli中配置sass
Jun 21 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 Javascript
js的对象与函数详解
Jan 21 Javascript
vue多页面项目中路由使用history模式的方法
Sep 23 Javascript
JS数据类型判断的几种常用方法
Jul 07 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无限遍历目录示例
2014/02/21 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
jquery简单体验
2007/01/10 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
2016/08/23 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
如何为你的JavaScript代码日志着色详解
2019/04/08 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
Python根据成绩分析系统浅析
2019/02/11 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
在python中使用nohup命令说明
2020/04/16 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
哈弗商学院毕业生求职信
2014/02/26 职场文书
大学生见习总结报告
2015/06/24 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript