JavaScript面向对象设计二 构造函数模式


Posted in Javascript onDecember 20, 2011

我们将使用构造函数模式将工厂模式进行改写。

function Employee(name, age, job) { 
this.name = name; 
this.age = age; 
this.job = job; 
this.sayName = function () { 
alert(this.name); 
}; 
} 
var Jim = new Employee("jim", 22, "SoftWare Engineer"); 
var Sun = new Employee("Sun", 24, "Doctor"); 
Jim.sayName(); 
Sun.sayName();

在以上代码中Employee函数取代了CreateEmployee函数,Employee中的代码与CreateEmployee中的代码不同如下:
没有显示的创建对象
直接将属性和方法赋给了this对象
没有return语句
要创建Employee类的新实例,必须使用new操作符,实际会经历四个步骤:
创建一个新对象
将构造函数的作用域赋给新的对象
执行构造函数中代码
返回新对象
以上代码最后Jim和Sun中分别保存着Employee的两个不同实例,这两个实例都有一个constructor(构造函数)属性,该属性指向Employee,可以做如下测试
alert(Jim instanceof Employee); //true 
alert(Sun instanceof Employee);//true

同时这两个对象又都是Object类型的,可通过如下代码检测。
alert(Jim instanceof Object); //true 
alert(Sun instanceof Object);//true

创建自定义的构造函数意味着将来可以把它的实例标石为一种特定的类型,而这也正是构造函数模式胜过工厂模式的地方。
下面详细讲解一下构造函数:
将构造函数当做函数
构造函数与其他函数的唯一区别就在于调用它们的方式不同。但是构造函数也是函数,不存在定义构造函数的特殊语法。其实,任何函数,只有通过new来调用,那他就可以作为构造函数,例如,Employee除了以上用new方法调用外,还可以用如下方式来调用。
//作为普通函数调用 
Employee("Sun", 28, "SoftWare Engineer"); //添加到window中 
window.sayName();//Sun

//在另一个对象的作用域中调用 
var o = new Object(); 
Employee.call(o, "Sun", 28, "SoftWare Engineer"); 
o.sayName();//Sum

构造函数的问题
使用构造函数的主要问题就是都要在每个实力上重新创建一遍,以上两个对象中的sayName方法其实是不同的Function的实例,可以用如下方法证明:
alert(Jim.sayName == Sun.sayName);//false
但是创建两个完成同样任务的Function实例,所以我们对上面的函数进行改写,如下
function Employee(name, age, job) { 
this.name = name; 
this.age = age; 
this.job = job; 
this.sayName =sayName; 
} 
function sayName() { 
alert(this.name); 
}

这样就解决了两个函数做同一件事情的问题,但是新的问题又会出现了,这个在全局作用域中定义的函数,实际上只能被某个对象引用,而且最要命的问题是,如果对象需要定义很多方法,那么就需要定义很多个全局函数,所以这个自定义的引用类型,就没有任何封装性可言了.
Javascript 相关文章推荐
超棒的javascript页面顶部卷动广告效果
Dec 01 Javascript
jQuery 性能优化指南(2)
May 21 Javascript
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 Javascript
jqTransform form表单美化插件使用方法
Jul 05 Javascript
提高jQuery性能的十个诀窍
Nov 14 Javascript
快速解决FusionCharts联动的中文乱码问题
Dec 04 Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 Javascript
js获取会话框prompt的返回值的方法
Jan 10 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 Javascript
Javascript面向对象设计一 工厂模式
Dec 20 #Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 #Javascript
javascript判断iphone/android手机横竖屏模式的函数
Dec 20 #Javascript
五段实用的js高级技巧
Dec 20 #Javascript
更换select下拉菜单背景样式的实现代码
Dec 20 #Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 #Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
Dec 20 #Javascript
You might like
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
php join函数应用
2011/05/04 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
windows下更新npm和node的方法
2017/11/30 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
JS实现的缓冲运动效果示例
2018/04/30 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
使用 UniApp 实现小程序的微信登录功能
2020/06/09 Javascript
JavaScript位置参数实现原理及过程解析
2020/09/14 Javascript
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
远程研修随笔感言
2014/02/10 职场文书
网页美工求职信范文
2014/04/17 职场文书
2014国庆节标语口号
2014/09/19 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
初三毕业感言
2015/07/31 职场文书
外科护士长工作总结
2015/08/12 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
python字符串的一些常见实用操作
2022/04/06 Python
Windows Server 2019 配置远程控制以及管理方法
2022/04/28 Servers