对new functionName()定义一个函数的理解


Posted in Javascript onMay 22, 2014

比如定义一个函数的两种调用方法:

function getInfo() { 
var info = { 
message: "message" 
}; 
return info; 
}

1、var info1 = getInfo();

2、var info2 = new getInfo();

1和2有什么区别吗?info1和info2得到的值是一样的吗?

第1种很简单,用的也很多,就是执行一个函数,并接受函数的返回值并赋给info1对象;

第2种情况一般就很少见了。首先,函数也是一种对象,是对象肯定就可以实例化(实例化其实就是调用对象的构造函数对对象进行初始化),所有第2种情况就是调用getInfo函数对象的构造函数,并接收构造函数初始化的实例(一般都是this),而函数有个比较特别的地方就是,如果构造函数有显示返回值,将用该返回值替换this对象返回。所以第2中情况new getInfo就是调用构造函数(函数的构造函数就是其定义本身)并接收返回值info。

应用:

1、比如HTML定义了DOM对象:<div id="domId"></div>,js代码如下:

function $(domId) { 
var dom = document.getElementById(domId); 
return dom; 
} window.onload = function() { 
var dom1 = new $("domId"); 
var dom2 = $("domId"); 
alert(dom1 == dom2); 
}

则alert提示信息将显示true。之所以使用$做函数名,是因为 使用这个函数的时候是不是有点像jQuery的风格呢?其实jQuery的构造函数里就应用了这种风格的函数定义,不管你是用new还是直接调用函数,返回的值都是一样的。

2、定义兼容的XMLHttpRequest对象(本例摘自Javascript权威指南的第18.1节)
大家都知道不同的浏览器对异步通信支持的方式可能不一样,早期的IE是用的ActiveX的方式,下面的代码定义了一个兼容的XMLHttpRequest对象:

if (window.XMLHttpRequest === undefined) { 
window.XMLHttpRequest = function() { 
try { 
//如果可用,则使用ActiveX对象最新的版本 
return new ActiveXObject("Msxml2.XMLHTTP.6.0"); 
} catch (ex1) { 
try { 
return new ActiveXObject("Msxml2.XMLHTTP.3.0"); 
} catch (ex2) { 
throw new Error("XMLHttpRequest is not supported") 
} 
} 
} 
}

这样,就可以直接通过 var xhr = new XMLHttpRequest()定义了,而不用管是IE浏览器还是火狐浏览器。
Javascript 相关文章推荐
QQ登录简单实现代码
Mar 09 Javascript
JavaScript的变量作用域深入理解
Oct 25 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
Javascript this 关键字 详解
Oct 22 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
Bootstrap响应式侧边栏改进版
Sep 17 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 Javascript
js继承实现方法详解
Dec 16 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 Javascript
javascript中layim之查找好友查找群组
Feb 06 Javascript
教你如何使用PHP输出中文JSON字符串
May 22 #Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 #Javascript
JS常用表单验证方法总结
May 22 #Javascript
一个Action如何调用两个不同的方法
May 22 #Javascript
选择复选框按钮置灰否则按钮可用
May 22 #Javascript
JavaScript获取路径设计源码
May 22 #Javascript
javascript学习笔记--数字格式类型
May 22 #Javascript
You might like
精美漂亮的php分页类代码
2013/04/02 PHP
php的ajax简单实例
2014/02/27 PHP
php制作动态随机验证码
2015/02/12 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
javascript弹出页面回传值的方法
2015/01/28 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
详解Webpack loader 之 file-loader
2018/11/07 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
python字符串排序方法
2014/08/29 Python
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
python分析nignx访问日志脚本分享
2015/02/26 Python
Django中使用group_by的方法
2015/05/26 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
python实现静态web服务器
2019/09/03 Python
python标准库os库的函数介绍
2020/02/12 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
酒店个人求职信范文
2014/01/25 职场文书
关于毕业的中学校园广播稿
2014/01/26 职场文书
乡镇干部十八大感言
2014/02/17 职场文书
手机销售员岗位职责
2015/04/11 职场文书
企业宣传语大全
2015/07/13 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
导游词之无锡梅园
2019/11/28 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
关于python中模块和重载的问题
2021/11/02 Python