通过javascript的匿名函数来分析几段简单有趣的代码


Posted in Javascript onJune 29, 2010

1、简单形式的封装调用

var userName = function() { return "jeff wong" } (); 
alert(userName);

上面的代码确实简单,我们可以逐步分解成下面的写法:

var anonymousFunc = function() { return "jeff wong" }; //匿名函数 
var name = anonymousFunc(); //执行该函数 返回人名 
alert(name);

2、new 一下Function的形式(大写Function)
var a = new Object(); 
var b = new Function(); 
//alert(typeof (a)); //object 
//alert(typeof (b)); //function 
alert(a); //[object Object] 
alert(b); //匿名函数 
//alert(a == b); //false 
//alert(a === b); //false

正如你所看到的那样,我们new一个Object,变量a弹出的是[object Object],而new一个Function(注意,是大写Function),b在弹出的时候,生成了匿名函数。 既然b是匿名函数,函数当然可以执行,我们可以继续试试下面的代码验证自己的猜测:

alert(b()); //undefined 
alert(a()); //脚本错误 提示“缺少函数”

3、new 一下function也大有乾坤(小写function)
(1)、简单的空函数

var func = new function() { }; 
alert(typeof (func)); //object 
alert(func); //[object Object] 
//alert(func()); //脚本错误 func不是函数

其实上面的代码也就等价于下面的写法:

function anonymousClass() { } //匿名类 
var instance = new anonymousClass(); 
alert(typeof (instance));//object 
alert(instance); //[object Object] [code] 
(2)、函数带个返回值的,也不是很难理解 
[code] 
var func = new function() { return "jeff wong" }; 
alert(typeof (func)); 
alert(func); 
//alert(func()); //脚本错误 缺少函数

其实上面的代码也就等价于下面的写法:

function anonymousClass() { return "jeff wong"; } //匿名类 
var instance = new anonymousClass(); 
alert(typeof (instance));//object 
alert(instance); //[object Object]

(3)、还是函数带个返回值的,写法稍微有点不同

下面的代码请注意和(2)中的区分一下,因为接下来要重点讨论的就是那一点点的不同书写形式:

var func = new function() { return new String("jeff wong"); }; 
alert(typeof (func)); //object 意料之中 
alert(func); //这里?! 
//alert(func()); //脚本错误 缺少函数

上面代码的等价形式依然简单:

function anonymousClass() { return new String("jeff wong"); } 
var instance = new anonymousClass(); 
alert(typeof (instance)); 
alert(instance);

已经运行看到结果了吗?没错,第三种写法我们在弹出func或者instance的时候,都出人意料地得到了一段字符串"jeff wong"。细心比较(2)和(3)中的代码,除了return处的写法稍有不同之外,两处代码几乎完全一致,所以我们推断,毫无疑问,是new String的形式让我们的函数产生了意想不到的效果。 为什么会这样呢?

原来,在javascript中,只要在new表达式之后的constructor返回(return)一个原始类型(无return时其实是return原始类型undefined,如(1)),比如第(2)种写法,那么就返回new创建的匿名对象;而如果new表达式之后的constructor返回一个引用对象,比如对象(Object),函数(function)及数组(Array)等等,那么返回的该引用对象就将覆盖new创建的匿名对象。现在再来分析(3)中的写法,由于new String会构造一个字符串引用对象,它就覆盖了new所创建的匿名对象,而new String的所指向引用值是“jeff wong”,所以弹出的必然是当前new String所分配的值。

最后,留个思考题,大家看看下面的代码返回什么结果:

var func = new function() { var str = new String("jeff wong"); return str; };//再换种写法 
//alert(typeof (func)); //object 意料之中 
alert(func); //猜一下这里应该是什么结果?

作者:Jeff Wong
Javascript 相关文章推荐
jQuery中:password选择器用法实例
Jan 03 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
May 12 Javascript
深入浅析javascript中的作用域(推荐)
Jul 19 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 Javascript
Vue Router的懒加载路径的解决方法
Jun 21 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
vue 取出v-for循环中的index值实例
Nov 09 Javascript
jQuery实现消息弹出框效果
Dec 10 jQuery
vue实现日历表格(element-ui)
Sep 24 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 #Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 #Javascript
javascript hasFocus使用实例
Jun 29 #Javascript
jquery photoFrame 图片边框美化显示插件
Jun 28 #Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
Jun 28 #Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 #Javascript
Jquery ui css framework
Jun 28 #Javascript
You might like
文章推荐系统(三)
2006/10/09 PHP
PHP下几种删除目录的方法总结
2007/08/19 PHP
Discuz 模板引擎的封装类代码
2008/07/18 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
php生成HTML文件的类方法
2019/10/11 PHP
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
js为数字添加逗号并格式化数字的代码
2013/08/23 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Django中的forms组件实例详解
2018/11/08 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
儿科主治医生个人求职信
2013/09/23 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
中队活动总结
2014/08/27 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
昆虫记读书笔记
2015/06/26 职场文书
客户答谢会致辞
2015/07/30 职场文书
结婚十年感言
2015/07/31 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书
python实现自定义日志的具体方法
2021/05/28 Python
logback如何自定义日志存储
2021/08/30 Java/Android