对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的6个Tab选项卡插件
Sep 03 Javascript
jquery插件开发之实现md5插件
Mar 17 Javascript
JavaScript设计模式之策略模式实例
Oct 10 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 Javascript
Javascript常用小技巧汇总
Jun 24 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
Jul 18 Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
Vue如何实现验证码输入交互
Dec 07 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简单静态页生成过程
2008/03/27 PHP
php setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
web server使用php生成web页面的三种方法总结
2013/10/28 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
javascript的函数
2007/01/31 Javascript
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
JS 数字转换研究总结
2013/12/26 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
jQuery动态产生select option下拉列表
2017/03/15 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
jQuery+koa2实现简单的Ajax请求的示例
2018/03/06 jQuery
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
ES5新增数组的实现方法
2020/05/12 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
Python中表示字符串的三种方法
2017/09/06 Python
Python模拟登录的多种方法(四种)
2018/06/01 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
详细分析Python collections工具库
2020/07/16 Python
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
linux面试题参考答案(3)
2012/09/13 面试题
竞选宣传委员演讲稿
2014/05/24 职场文书
四风剖析查摆对照检查材料思想汇报
2014/09/24 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
Python机器学习之基础概述
2021/05/19 Python