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 错误处理的几种方法
Jun 13 Javascript
为指定元素增加样式的js代码
Dec 09 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
JS分页控件 可用于无刷新分页
Jul 23 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
详解如何写出一个利于扩展的vue路由配置
May 16 Javascript
vue iview多张图片大图预览、缩放翻转
Jul 13 Javascript
js实现简易计算器功能
Oct 18 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 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采集时被封ip的解决方法
2010/08/29 PHP
PHP学习笔记之二 php入门知识
2011/01/12 PHP
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
js 浮动层菜单收藏
2009/01/16 Javascript
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
Vue如何实现响应式系统
2018/07/11 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
使用Python绘制图表大全总结
2017/02/11 Python
Python制作豆瓣图片的爬虫
2017/12/28 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
python读取几个G的csv文件方法
2019/01/07 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
电子狗项圈:eDog Australia
2019/12/04 全球购物
酒店服务实习自我鉴定
2013/09/22 职场文书
教师专业理论水平的自我评价分享
2013/11/09 职场文书
工作表扬信的范文
2014/01/10 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
2015年推普周活动总结
2015/03/27 职场文书
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python