javascript设计模式之对象工厂函数与构造函数详解


Posted in Javascript onJuly 30, 2015

下面通过文字详解加代码分析的方式给大家分享下javascript设计模式之对象工厂函数与构造函数的相关知识。

概述使用对象字面量,或者向空对象中动态地添加新成员,是最简单易用的对象创建方法。然而,除了这两种常用的对象创建方式,JavaScript还提供了其他方法创建对象。1).使用工厂函数创建对象我们可以编写一个函数,此函数的功能就是创建对象,可将其.

概述

使用对象字面量,或者向空对象中动态地添加新成员,是最简单易用的对象创建方法。
然而,除了这两种常用的对象创建方式,JavaScript还提供了其他方法创建对象。
1).使用工厂函数创建对象

我们可以编写一个函数,此函数的功能就是创建对象,可将其称为“对象工厂方法”。

//工厂函数     

 function createPerson(name, age, job) {         

 var o = new Object();         

 o.name = name;         

 o.age = age;         

 o.job = job;         

 o.sayName = function () {             

 console.info(this.name);         

 };         

 return o;      } //使用工厂函数创建对象     

 var person1 = createPerson('张三', 29, '软件工程师');     

 var person2 = createPerson('李四', 40, '医生');

2).定义对象构造函数

  a).对象构造函数首字母大写
  b).内部使用this关键字给对象添加成员
  c).使用new关键字调用对象构造函数

//定义对象“构造”函数      

function Person(name, age, job) { 

this.name = name;         

 this.age = age;          

this.job = job;          

this.sayName = function () {            
  console.info(this.name);          

};      

} //使用new调用对象构造函数创建对象     

 var p1 = new Person('张三', 29, '软件工程师');     
var p2 = new Person('李四', 40, '医生');

以普通方式调用的“构造函数”

构造函数其实也是一个函数,不同之处在于调用它时必须要加一个“new”关键字,如果不加这个关键字,则对它的调用被认为是普通函数调用。

 //作为普通函数调用的构造函数,通过this添加的属性,

//成为了window对象的属性与方法。

console.info(window.name);//张三

console.info(window.age); //29

console.info(window.job); //软件工程师

对象构造函数长得这个样:

function Person (name) {

this.name = name;

 this.say = function () {

 return "I am " + this.name;

  };

}

实际上是这样(示意):

function Person (name) {

// var this = {};

 this.name = name;

 this.say = function () {

return "I am " + this.name;

 };

    // return this;

}

构造函数完成的工作

1. 创建一个新的对象
2. 让构造函数的this引用这一新创建的对象
3. 执行构造函数中的代码,这些代码通常完成向新对象添加属性的工作
4. 向外界返回新创建的对象引用。
对象构造函数与对象工厂方法的区别

1. 对象构造函数中没有显式的对象创建代码
2. 新对象应具备的属性与方法是通过this引用添加的.
3. 对象构造函数中没有return语句
 通常会把对象构造函数的首字母设置为大写的,以区别于普通函数。
对象的constructor属性

a).使用对象工厂函数创建对象,每个对象的constructor属性引用Object()

 

var person = createPerson('张三', 29, '软件工程师');

 //使用工厂方法创建对象,
其constructor属性引用Object()函数

console.info(person1.constructor === Object); 
//true

b).使用对象构造函数创建对象,每个对象的constructor属性引用这个构造函数

var p = new Person('张三', 29, '软件工程师');

//使用对象构造函数创建对象,

//每个对象的constructor属性,引用这个构造函数

console.info(p.constructor === Person);

 //true如何避免“忘记”new?可以使用arguments.callee解决这个问题      

//了解arguments.callee的作用     

function TestArgumentsCallee()

 {          

console.info(this);          

console.info(this instanceof TestArgumentsCallee);         

 console.info(this instanceof arguments.callee);     

 };      

TestArgumentsCallee(); //window                                         
//false                                          

//false      

new TestArgumentsCallee();  

//TestArgumentsCallee              

//true                                             
  //true

于是,可以直接用arguments.callee

 //避免忘记new     

 function MyObject(value) 

{         

 if (!(this instanceof arguments.callee))
{             

 //如果调用者忘记加上new了,就加上new再调用一次             
return new MyObject(value);         

 }         

 this.prop = value;     

 }      

//测试      

var obj1 = new MyObject(100);     

 console.info(obj1.prop);//100     

 var obj2 = MyObject(200);        

console.info(obj2.prop); //200

以上内容就是javascript设计模式之对象工厂函数与构造函数详解,希望大家喜欢。

Javascript 相关文章推荐
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
vue项目持久化存储数据的实现代码
Oct 01 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
JS实现简易留言板特效
Dec 23 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
js判断浏览器类型及设备(移动页面开发)
Jul 30 #Javascript
javascript中if和switch,==和===详解
Jul 30 #Javascript
用javascript实现自动输出网页文本
Jul 30 #Javascript
理解javascript中的原型和原型链
Jul 30 #Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 #Javascript
文字垂直滚动之javascript代码
Jul 29 #Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 #Javascript
You might like
随时给自己贴的图片加文字的php代码
2007/03/08 PHP
PHP 实用代码收集
2010/01/22 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
python比较两个列表是否相等的方法
2015/07/28 Python
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
python版本单链表实现代码
2018/09/28 Python
python redis 删除key脚本的实例
2019/02/19 Python
python三引号输出方法
2019/02/27 Python
详解爬虫被封的问题
2019/04/23 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
python实现人工蜂群算法
2020/09/18 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
python实现银行账户系统
2021/02/22 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
电气个人求职信范文
2014/02/04 职场文书
绩效考核实施方案
2014/03/18 职场文书
《金子》教学反思
2014/04/13 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
学生检讨书怎么写
2014/10/09 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
2015毕业生简历自我评价
2015/03/02 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
netty 实现tomcat的示例代码
2022/06/05 Servers