对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 相关文章推荐
jQuery提交表单ajax查询实例代码
Oct 07 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
JavaScript中setAttribute用法介绍
Jul 20 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
Sep 14 Javascript
详解AngularJS实现表单验证
Dec 10 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
js创建对象的方法汇总
Jan 07 Javascript
Vue2.0实现组件数据的双向绑定问题
Mar 06 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 Javascript
vue实现可移动的悬浮按钮
Mar 04 Vue.js
教你如何使用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 取得瑞年与平年的天数的代码
2009/08/10 PHP
PHP中使用数组实现堆栈数据结构的代码
2012/02/05 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
jquery中:input和input的区别分析
2011/07/13 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
js实现时间日期校验
2020/05/26 Javascript
python使用scrapy解析js示例
2014/01/23 Python
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
简单说明Python中的装饰器的用法
2015/04/24 Python
Python字符串格式化的方法(两种)
2017/09/19 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
flask框架中的cookie和session使用
2021/01/31 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
浅析python连接数据库的重要事项
2021/02/22 Python
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
销售文员的岗位职责
2013/11/20 职场文书
全国道德模范事迹
2014/02/01 职场文书
关于期中考试的反思
2014/02/02 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
元旦晚会主持词
2014/03/24 职场文书
初中物理教学反思
2016/02/19 职场文书