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 实现的数独解题算法网页实例
Oct 15 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
javascript实现修改微信分享的标题内容等
Dec 11 Javascript
jqTransform美化表单
Oct 10 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
jQuery实现两个select控件的互移操作
Dec 22 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
Javascript中parseInt的正确使用方式
Oct 17 Javascript
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 Javascript
vue中监听返回键问题
Aug 28 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
浅谈js数组splice删除某个元素爬坑
Oct 14 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程序时遇到的三个问题
2012/01/17 PHP
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
ThinkPHP之N方法实例详解
2014/06/20 PHP
smarty中常用方法实例总结
2015/08/07 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
浅谈javascript中的数据类型转换
2016/12/27 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
微信小程序使用Promise简化回调
2018/02/06 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
VUE DOM加载后执行自定义事件的方法
2018/09/07 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
关于Python中异常(Exception)的汇总
2017/01/18 Python
python实现视频分帧效果
2019/05/31 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
营销与策划个人求职信
2013/09/22 职场文书
土建资料员岗位职责
2014/01/04 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
如何使用Python实现一个简易的ORM模型
2021/05/12 Python