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 相关文章推荐
JS的IE和Firefox兼容性集锦
Dec 11 Javascript
javascript 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
使用javascript插入样式
Mar 14 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
Aug 05 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
angularjs的单选框+ng-repeat的实现方法
Sep 12 Javascript
记录一次完整的react hooks实践
Mar 11 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 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中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
php 地区分类排序算法
2013/07/01 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
JS往数组中添加项性能分析
2015/02/25 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
Python logging模块学习笔记
2014/05/24 Python
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
Python闭包思想与用法浅析
2018/12/27 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
大学生职业生涯规划范文
2014/01/22 职场文书
青年教师典范事迹材料
2014/01/31 职场文书
募捐倡议书
2014/04/14 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
六五普法宣传标语
2014/10/06 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
2019年入党思想汇报
2019/03/25 职场文书
SQL CASE 表达式的具体使用
2022/03/21 SQL Server
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers