对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 组件之旅(三):用 Ant 构建组件
Oct 28 Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
jquery datatable后台封装数据示例代码
Aug 07 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
JavaScript使用Range调色及透明度实例
Sep 25 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
JS正则表达式常见用法实例详解
Jun 19 Javascript
vue两组件间值传递 $router.push实现方法
May 15 Javascript
vue excel上传预览和table内容下载到excel文件中
Dec 10 Javascript
Javascript如何实现双指控制图片功能
Feb 25 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
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
php 实现进制相互转换
2016/04/07 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
javascript document.images实例
2008/05/27 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
vue实现全选和反选功能
2017/08/31 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
Python编程修改MP3文件名称的方法
2017/04/19 Python
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
廉价航班、机票和酒店:JustFly
2018/02/07 全球购物
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
青年创业培训欢迎词
2014/01/10 职场文书
敬老文明号事迹材料
2014/01/16 职场文书
结婚喜宴主持词
2014/03/14 职场文书
《火烧云》教学反思
2014/04/12 职场文书
我爱我的祖国演讲稿
2014/05/04 职场文书
写给医生的感谢信
2015/01/22 职场文书
员工离职通知函
2015/04/25 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
担保书范文
2019/07/09 职场文书
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android