对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 使用手册(七)
Sep 23 Javascript
IE无法设置短域名下Cookie
Sep 23 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
AngularJS轻松实现双击排序的功能
Aug 30 Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
值得收藏的vuejs安装教程
Nov 21 Javascript
AngularJS $http post 传递参数数据的方法
Oct 09 Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 Javascript
vue-cropper组件实现图片切割上传
May 27 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
typecho插件编写教程(五):核心代码
2015/05/28 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
js格式化金额可选是否带千分位以及保留精度
2014/01/28 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
js省市区级联查询(插件版&amp;无插件版)
2017/03/21 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
Python学习之asyncore模块用法实例教程
2014/09/29 Python
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
教师读书活动总结
2014/05/07 职场文书
销售经理岗位职责
2015/01/31 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书