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 相关文章推荐
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
jquery隔行换色效果实现方法
Jan 15 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
May 26 Javascript
js模拟实现烟花特效
Mar 10 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 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简单备份与还原MySql的方法
2016/05/09 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
javascript json2 使用方法
2010/03/16 Javascript
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
JS判断日期格式是否合法的简单实例
2016/07/11 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
python在Windows下安装setuptools(easy_install工具)步骤详解
2016/07/01 Python
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
Django web框架使用url path name详解
2019/04/29 Python
学Python 3的理由和必要性
2019/11/19 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
大学生涯自我鉴定
2014/01/16 职场文书
转预备党员政审材料
2014/02/06 职场文书
小学生家长评语大全
2014/02/10 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
跳槽求职信范文
2014/05/26 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
工作自我推荐信范文
2015/03/25 职场文书
行政司机岗位职责
2015/04/10 职场文书
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python