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 Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
Mar 17 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
vue ssr 指南详读
Jun 29 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
JavaScript判断对象和数组的两种方法
May 31 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
微信小程序使用echarts获取数据并生成折线图
Oct 16 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 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
德生PL660的电路分析和打磨
2021/03/02 无线电
PHP数组及条件,循环语句学习
2012/11/11 PHP
php curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
19个Android常用工具类汇总
2014/12/30 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
php数据访问之增删改查操作
2016/05/09 PHP
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
2017/06/09 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
javaScript checkbox 全选/反选及批量删除
2010/04/28 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
jQuery学习笔记之创建DOM元素
2015/01/19 Javascript
JavaScript学习心得之概述
2015/01/20 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
python re正则表达式模块(Regular Expression)
2014/07/16 Python
用实例解释Python中的继承和多态的概念
2015/04/27 Python
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
django1.8使用表单上传文件的实现方法
2016/11/04 Python
python实现FTP服务器服务的方法
2017/04/11 Python
Python数据结构之单链表详解
2017/09/12 Python
Python程序运行原理图文解析
2018/02/10 Python
python中报错"json.decoder.JSONDecodeError: Expecting value:"的解决
2019/04/29 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
pytorch 数据处理:定义自己的数据集合实例
2019/12/31 Python
is_file和file_exists效率比较
2021/03/14 PHP
退休感言
2014/01/28 职场文书
小学教师评语大全
2014/04/23 职场文书
创文明城市标语
2014/06/16 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书