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 相关文章推荐
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
JavaScript之Vue.js【入门基础】
Dec 06 Javascript
Three.js加载外部模型的教程详解
Nov 10 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
深入浅析Vue中的Prop
Jun 10 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
微信小程序中的上拉、下拉菜单功能
Mar 13 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 Javascript
微信小程序抽奖组件的使用步骤
Jan 11 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 is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
PHP无刷新上传文件实现代码
2011/09/19 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
详解JavaScript 中的批处理和缓存
2020/11/19 Javascript
Django框架多表查询实例分析
2018/07/04 Python
Python Django基础二之URL路由系统
2019/07/18 Python
django实现类似触发器的功能
2019/11/15 Python
NumPy排序的实现
2020/01/21 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
什么是索引指示器
2012/08/20 面试题
优秀的自荐信要注意哪些
2014/01/03 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
2015年幼儿教师个人工作总结
2015/05/20 职场文书
烈士陵园观后感
2015/06/08 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
Python使用pyecharts控件绘制图表
2022/06/05 Python
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis