对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 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
jquery实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
基于jQuery选择器的整理集合
Apr 26 Javascript
js判断输入是否为数字的具体实例
Aug 03 Javascript
Javascript事件实例详解
Nov 06 Javascript
JS:window.onload的使用介绍
Nov 13 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 Javascript
JS动态加载脚本并执行回调操作
Aug 24 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
Nov 09 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内核探索:变量存储与类型使用说明
2014/01/30 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
ie下动态加态js文件的方法
2011/09/13 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
JavaScript中的数学运算介绍
2014/12/29 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
浅谈js多维数组和hash数组定义和使用
2016/07/27 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
vue 实现通过手机发送短信验证码注册功能
2018/04/19 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
2018/11/30 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
python批量生成本地ip地址的方法
2015/03/23 Python
Python中的with...as用法介绍
2015/05/28 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
Tensorflow 实现释放内存
2020/02/03 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
事业单位辞职信范文
2014/01/19 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
Python List remove()实例用法详解
2021/08/02 Python
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android