对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更改class和id的方法
Oct 10 Javascript
javascript实现的网页局布刷新效果
Dec 01 Javascript
HTML Dom与Css控制方法
Oct 25 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
bootstrap实现图片自动轮播
Dec 21 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
d3.js实现立体柱图的方法详解
Apr 28 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
Node爬取大批量文件的方法示例
Jun 28 Javascript
javascript贪吃蛇游戏设计与实现
Sep 17 Javascript
JavaScript实现雪花飘落效果
Dec 27 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伪静态写法附代码
2008/06/20 PHP
php session和cookie使用说明
2010/04/07 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
Javascript复制实例详解
2016/01/28 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
Python程序设计入门(4)模块和包
2014/06/16 Python
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
Python实现控制台进度条功能
2016/01/04 Python
Python反射的用法实例分析
2018/02/11 Python
django实现用户注册实例讲解
2019/10/30 Python
tensorflow之并行读入数据详解
2020/02/05 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
享誉全球的多元化时尚精品购物平台:Farfetch发发奇(支持中文)
2017/08/08 全球购物
介绍一下木马病毒的种类
2015/07/26 面试题
大学生村官事迹材料
2014/01/21 职场文书
学习经验演讲稿
2014/05/10 职场文书
供电工程专业求职信
2014/08/09 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
年终工作总结范文
2019/06/20 职场文书
Python面试不修改数组找出重复的数字
2022/05/20 Python