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 读取和设置文档元素的样式属性
Apr 14 Javascript
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 Javascript
Angular排序实例详解
Jun 28 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 Javascript
详解如何用webpack4从零开始构建react开发环境
Jan 27 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
Javascript Worker子线程代码实例
Feb 20 Javascript
antd配置config-overrides.js文件的操作
Oct 31 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 Curl多线程原理实例详解
2013/11/06 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
php无限极分类实现方法分析
2019/07/04 PHP
PHP实现爬虫爬取图片代码实例
2021/03/03 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
js电信网通双线自动选择技巧
2008/11/18 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
你必须知道的Javascript知识点之"单线程事件驱动"的使用
2013/04/23 Javascript
js charAt的使用示例
2014/02/18 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
小程序从手动埋点到自动埋点的实现方法
2019/01/24 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
vue动态设置页面title的方法实例
2020/08/23 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
理解Python中函数的参数
2015/04/27 Python
Python中for循环和while循环的基本使用方法
2015/08/21 Python
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
使用python实现tcp自动重连
2017/07/02 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
python实现随机加减法生成器
2020/02/24 Python
Django更新models数据库结构步骤
2020/04/01 Python
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
工厂门卫的岗位职责
2014/07/27 职场文书
教师求职简历自我评价
2015/03/10 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
MySQL数据库 任意ip连接方法
2022/05/20 MySQL