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 二维数组的实现与应用
Mar 16 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
Aug 12 Javascript
最常用的12种设计模式小结
Aug 09 Javascript
基于jQuery的倒计时实现代码
May 30 Javascript
jquery实现的网页自动播放声音
Apr 30 Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 Javascript
原生JS实现图片网格式渐显、渐隐效果
Jun 05 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 Javascript
微信小程序实现图片压缩
Dec 03 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
Mar 03 Javascript
深入理解Vue的数据响应式
May 15 Vue.js
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
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
php二分查找二种实现示例
2014/03/12 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
2016/10/09 PHP
利用laravel+ajax实现文件上传功能方法示例
2017/08/13 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
PHP7 弃用功能
2021/03/09 PHP
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
JQuery实现样式设置、追加、移除与切换的方法
2015/06/11 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
js实现简易ATM功能
2020/10/27 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
在Python的Django框架中编写编译函数
2015/07/20 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
Pandas 解决dataframe的一列进行向下顺移问题
2019/12/27 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
CSS3中伪元素::before和::after的用法示例
2017/09/18 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
杭州-DOTNET笔试题集
2013/09/25 面试题
介绍一下write命令
2014/08/10 面试题
网络工程专业毕业生推荐信
2013/10/28 职场文书
自我评价范文点评
2013/12/04 职场文书
运动会100米广播稿
2015/08/19 职场文书
《从现在开始》教学反思
2016/02/16 职场文书
MySQL创建管理HASH分区
2022/04/13 MySQL