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实现unicode和字符的互相转换
Jul 18 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
javascript 图片裁剪技巧解读
Nov 15 Javascript
深入理解javascript变量声明
Nov 20 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
js仿百度音乐全选操作
Jan 13 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 Javascript
详解React路由传参方法汇总记录
Nov 29 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 21 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构造函数实例讲解
2013/11/13 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
php计算整个目录大小的方法
2015/06/19 PHP
javascript设计模式 接口介绍
2012/07/24 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
python多线程threading.Lock锁用法实例
2014/11/01 Python
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
Pycharm和Idea支持的vim插件的方法
2020/02/21 Python
python实现拼接图片
2020/03/23 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
意大利团购网站:Groupon意大利
2016/10/11 全球购物
阿玛尼美妆英国官网:Giorgio Armani Beauty英国
2019/03/28 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
syb养殖创业计划书
2014/01/09 职场文书
幼儿园教师备课制度
2014/01/12 职场文书
教育技术职业规划范文
2014/03/04 职场文书
销售经理竞聘书
2014/03/31 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
Python+uiautomator2实现自动刷抖音视频功能
2021/04/29 Python
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA