对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 相关文章推荐
jQuery 表单验证扩展代码(二)
Oct 20 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
JS delegate与live浅析
Dec 21 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 Javascript
React组件的三种写法总结
Jan 12 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
基于BootStrap实现简洁注册界面
Jul 20 Javascript
webpack3之loader全解析
Oct 26 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
JavaScript多种页面刷新方法小结
Apr 04 Javascript
js实现移动端吸顶效果
Jan 08 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过滤表单提交的html等危险代码
2014/11/03 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
PHP闭包函数详解
2016/02/13 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
Python对列表排序的方法实例分析
2015/05/16 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
团支书的期末学习总结自我评价
2013/11/01 职场文书
团支部推优材料
2014/05/21 职场文书
租房协议书
2014/09/12 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书
委托书范本格式
2019/04/18 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书