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判断iframe中元素是否存在的方法
May 11 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
Nov 13 Javascript
利用JS判断用户是否上网(连接网络)
Dec 23 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
如何将php数组或者对象传递给javascript
Mar 20 Javascript
js实现密码强度检测【附示例】
Mar 30 Javascript
sencha ext js 6 快速入门(必看)
Jun 01 Javascript
Angular 2.x学习教程之结构指令详解
May 25 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
canvas绘制爱心的几种方法总结(推荐)
Oct 31 Javascript
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
webstorm中vue语法的支持详解
May 09 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
PHP通过COM使用ADODB的简单例子
2006/12/31 PHP
php 字符串替换的方法
2012/01/10 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
JavaScript Timer实现代码
2010/02/17 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
2012/06/20 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
2013/02/01 Javascript
JavaScript实现的购物车效果可以运用在好多地方
2014/05/09 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
Input文本框随着输入内容多少自动延伸的实现
2017/02/15 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
python 带时区的日期格式化操作
2020/10/23 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
医院护士的求职信范文
2013/12/26 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
百家讲坛观后感
2015/06/12 职场文书