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 相关文章推荐
在JS中如何调用JSP中的变量
Jan 22 Javascript
jQuery中 prop() attr()使用详解
May 19 Javascript
jQuery.each使用详解
Jul 07 Javascript
javascript每日必学之继承
Feb 23 Javascript
JS中多种方式创建对象详解
Mar 22 Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 Javascript
vue 数字翻牌器动态加载数据
Apr 20 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
收音机指标测试方法及仪器
2021/03/01 无线电
国内咖啡文化
2021/03/03 咖啡文化
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
php简单操作mysql数据库的类
2015/04/16 PHP
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
React diff算法的实现示例
2018/04/20 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
Python中isnumeric()方法的使用简介
2015/05/19 Python
python查看zip包中文件及大小的方法
2015/07/09 Python
keras中的backend.clip用法
2020/05/22 Python
Python网页解析器使用实例详解
2020/05/30 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
为什么说python更适合树莓派编程
2020/07/20 Python
博柏利美国官方网站:Burberry美国
2020/11/19 全球购物
外贸实习生自荐信范文
2013/11/24 职场文书
个人委托书怎么写
2014/09/17 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
swagger如何返回map字段注释
2021/07/03 Java/Android