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 DOM 学习第五章 表单简介
Feb 19 Javascript
JS中表单的使用小结
Jan 11 Javascript
纯js实现遮罩层效果原理分析
May 27 Javascript
js简单实现点击左右运动的方法
Apr 10 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 Javascript
vue项目开发中setTimeout等定时器的管理问题
Sep 13 Javascript
layui type2 通过url给iframe子页面传值的例子
Sep 06 Javascript
vue实现文件上传读取及下载功能
Nov 17 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获取网页内容方法总结
2008/12/04 PHP
详解YII关联查询
2016/01/10 PHP
php无限级分类实现方法分析
2016/10/19 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
javascript开发中因空格引发的错误
2010/11/08 Javascript
详谈 Jquery Ajax异步处理Json数据.
2011/09/09 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
js实现内置计时器
2019/12/16 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
Python中函数参数调用方式分析
2018/08/09 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
Django密码存储策略分析
2020/01/09 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
python 读取串口数据的示例
2020/11/09 Python
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
医学生自荐信
2013/12/03 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
雷人标语集锦
2014/06/19 职场文书
单位授权委托书范本
2014/09/26 职场文书
新教师2015年度工作总结
2015/07/22 职场文书
单位提档介绍信
2015/10/22 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书
Go语言基础函数基本用法及示例详解
2021/11/17 Golang
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android