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 相关文章推荐
jquery实现简单易懂的图片展示小例子
Nov 21 Javascript
JS弹出层单纯的绝对定位居中示例代码
Feb 18 Javascript
js与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
Jan 05 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
浅析vue深复制
Jan 29 Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 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
虫族 Zerg 热键控制
2020/03/14 星际争霸
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
zf框架的Filter过滤器使用示例
2014/03/13 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
php字符集转换
2017/01/23 PHP
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
JavaScript实现点击文字切换登录窗口的方法
2015/05/11 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
Python算法应用实战之栈详解
2017/02/04 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
Python使用进程Process模块管理资源
2020/03/05 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
企业管理毕业生求职信范文
2014/03/07 职场文书
新品发布会主持词
2014/04/02 职场文书
实习协议书范本
2014/04/22 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
校长四风对照检查材料
2014/09/27 职场文书
授权收款委托书范本
2014/10/10 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
2015年信息技术教研组工作总结
2015/07/22 职场文书
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android