对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 相关文章推荐
javascript的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
在Ubuntu系统上安装Node.JS的教程
Oct 15 Javascript
Bootstrap中CSS的使用方法
Feb 17 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
微信小程序模版渲染详解
Jan 26 Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
js实现简易计算器功能
Oct 18 Javascript
jQuery实现验证用户登录
Dec 10 jQuery
教你如何使用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 Smarty生成EXCEL文档的代码
2008/08/23 PHP
php下批量挂马和批量清马代码
2011/02/27 PHP
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
php实现加减法验证码代码
2014/02/14 PHP
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
jquery动画1.加载指示器
2012/08/24 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
详细解析Python中的变量的数据类型
2015/05/13 Python
Django中处理出错页面的方法
2015/07/15 Python
Anaconda下配置python+opencv+contribx的实例讲解
2018/08/06 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
python制作朋友圈九宫格图片
2019/11/03 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
python中xlrd模块的使用详解
2021/02/01 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
成人大专自我鉴定范文
2013/10/19 职场文书
校领导推荐信
2013/11/01 职场文书
国贸专业求职信
2014/06/28 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
小学生毕业评语
2014/12/26 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
2015年暑假生活总结
2015/07/13 职场文书
Golang 实现超大文件读取的两种方法
2021/04/27 Golang
python使用shell脚本创建kafka连接器
2022/04/29 Python