对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 相关文章推荐
跨浏览器的设置innerHTML方法
Sep 18 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
May 15 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
Node调试工具JSHint的安装及配置教程
May 27 Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
基于JavaScript实现带缩略图的轮播效果
Jan 12 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
vue2.0多条件搜索组件使用详解
Mar 26 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
p5.js入门教程之键盘交互
Mar 19 Javascript
Nest.js 授权验证的方法示例
Feb 22 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
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
《PHP编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
php array_unique之后json_encode需要注意
2011/01/02 PHP
php文件下载处理方法分析
2015/04/22 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
常用的几段javascript代码分享
2014/03/25 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
js获取form的方法
2015/05/06 Javascript
学习JavaScript设计模式(接口)
2015/11/26 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
Node学习记录之cluster模块
2017/05/31 Javascript
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
js的对象与函数详解
2019/01/21 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
linux 下selenium chrome使用详解
2020/04/02 Python
python名片管理系统开发
2020/06/18 Python
Python实现钉钉/企业微信自动打卡的示例代码
2021/02/02 Python
日本最新流行服饰网购:Nissen
2016/07/24 全球购物
捷克玩具商店:Bambule
2019/02/23 全球购物
戴森英国官网:Dyson英国
2019/05/07 全球购物
中国旅游网站:途牛旅游网
2019/09/29 全球购物
运动会通讯稿100字
2014/01/31 职场文书
干部鉴定材料
2014/05/18 职场文书
先进党员事迹材料
2014/12/24 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
认真学习保证书
2015/02/26 职场文书
总经理年会致辞
2015/07/29 职场文书
新员工入职感想
2015/08/07 职场文书