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 相关文章推荐
短信提示使用 特效
Jan 19 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
JavaScript中的函数模式详解
Feb 11 Javascript
jQuery实现数秒后自动提交form的方法
Mar 05 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 Javascript
JavaScript函数表达式详解及实例
May 05 Javascript
VUE2实现事件驱动弹窗示例
Oct 21 Javascript
详解小程序缓存插件(mrc)
Aug 17 Javascript
vue实现一拉到底的滑动验证
Jul 25 Javascript
vue+ESLint 配置保存 自动格式化代码
Mar 17 Javascript
基于Web Audio API实现音频可视化效果
Jun 12 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实现把数组按指定的个数分隔
2014/02/17 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
vue组件学习教程
2017/09/09 Javascript
JS库之Waypoints的用法详解
2017/09/13 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
react 生命周期实例分析
2020/05/18 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
Python splitlines使用技巧
2008/09/06 Python
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
岗位聘任书范文
2014/03/29 职场文书
安全生产工作汇报
2014/10/28 职场文书
优秀团队申报材料
2014/12/26 职场文书
思想政治表现评语
2015/01/04 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书
pandas进行数据输入和输出的方法详解
2022/03/23 Python