对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仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
js获取图片宽高的方法
Nov 25 Javascript
javascript精确统计网站访问量实例代码
Dec 19 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
动手写一个angular版本的Message组件的方法
Dec 16 Javascript
详解如何在react中搭建d3力导向图
Jan 12 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
JS代码简洁方式之函数方法详解
Jul 28 Javascript
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 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性能测试工具xhprof的详解
2013/06/03 PHP
php使用session二维数组实例
2014/11/06 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
javascript eval函数深入认识
2009/02/21 Javascript
jquery 双色表格实现代码
2009/12/08 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
JavaScript内核之基本概念
2011/10/21 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
Python time库基本使用方法分析
2019/12/13 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
如何在Python对Excel进行读取
2020/06/04 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
环保建议书400字
2014/05/14 职场文书
2014中学教师节广播稿
2014/09/10 职场文书
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server
特别篇动画《总之就是非常可爱 ~制服~》PV公开,2022年夏季播出
2022/04/04 日漫
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js