对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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
react中使用css的7中方式(最全总结)
Feb 11 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
Vue中computed及watch区别实例解析
Aug 01 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操作数组相关函数
2011/02/03 PHP
PHP服务器页面间跳转实现方法
2012/08/02 PHP
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
Js点击弹出下拉菜单效果实例
2013/08/12 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
Python入门篇之函数
2014/10/20 Python
python实现马耳可夫链算法实例分析
2015/05/20 Python
详解Python中的type()方法的使用
2015/05/21 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
python 写一个水果忍者游戏
2021/01/13 Python
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
造价工程师个人求职信
2013/09/21 职场文书
办公室驾驶员岗位职责
2013/11/15 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
售后服务质量承诺书
2015/04/29 职场文书
升学宴家长致辞
2015/07/27 职场文书
2016春节放假通知范文
2015/08/18 职场文书