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 相关文章推荐
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
Array.prototype.slice.apply的使用方法
Mar 17 Javascript
JQUERY获取form表单值的代码
Jul 17 Javascript
javascript 伪数组实现方法
Oct 11 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
深入理解Node module模块
Mar 26 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
基于html+css+js实现简易计算器代码实例
Feb 28 Javascript
vue组件vue-esign实现电子签名
Apr 21 Vue.js
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远程调试之XDEBUG
2015/12/29 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
取得父标签
2006/11/14 Javascript
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
使用Python脚本操作MongoDB的教程
2015/04/16 Python
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
Django上线部署之IIS的配置方法
2019/08/22 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
python3 实现调用串口功能
2019/12/26 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
中医药大学市场营销专业自荐信
2013/09/29 职场文书
护士在校生自荐信
2014/02/01 职场文书
优秀实习生感言
2014/03/01 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
迎七一演讲稿
2014/09/12 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书