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数组的扩展实现代码集合
Jun 01 Javascript
jQuery轮播图效果精简版完整示例
Sep 04 Javascript
详解用Node.js实现Restful风格webservice
Sep 29 Javascript
在一个页面实现两个zTree联动的方法
Dec 20 Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
微信小程序返回箭头跳转到指定页面实例解析
Oct 08 Javascript
javascript实现商品图片放大镜
Nov 28 Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 Javascript
基于Vue CSR的微前端实现方案实践
May 27 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 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
php mail to 配置详解
2014/01/16 PHP
js 学习笔记(三)
2009/12/29 Javascript
js 内存释放问题
2010/04/25 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
2014/05/22 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
Python类的动态修改的实例方法
2017/03/24 Python
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
关于css中margin的值和垂直外边距重叠问题
2020/10/27 HTML / CSS
澳大利亚家具和家居用品在线:BROSA
2017/11/02 全球购物
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
接口可以包含哪些成员
2012/09/30 面试题
个人银行贷款担保书
2014/04/01 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
党校学习心得体会范文
2014/09/09 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android
python基础之//、/与%的区别详解
2022/06/10 Python
VMware虚拟机安装 Windows Server 2022的详细图文教程
2022/09/23 Servers