通过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 相关文章推荐
js window.event对象详尽解析
Feb 17 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
js中将String转换为number以便比较
Jul 08 Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
详解Angular2响应式表单
Jun 14 Javascript
基于node.js之调试器详解
Aug 22 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
vue配置接口域名方法总结
May 12 Javascript
详解JavaScript 事件流
Sep 02 Javascript
原生JS封装vue Tab切换效果
Apr 28 Vue.js
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
上海无线电三厂简史修改版
2021/03/01 无线电
php xml常用函数的集合(比较详细)
2013/06/06 PHP
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
Javascript 构造函数 实例分析
2008/11/26 Javascript
childNodes.length与children.length的区别
2009/05/14 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
在Python中使用Neo4j数据库的教程
2015/04/16 Python
python中安装Scrapy模块依赖包汇总
2017/07/02 Python
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
python如何从键盘获取输入实例
2020/06/18 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
高级Java程序员面试题
2016/06/23 面试题
职称自我鉴定
2013/10/15 职场文书
高中英语教学反思
2014/02/04 职场文书
幼儿园教学随笔感言
2014/02/23 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
2014年信用社工作总结
2014/11/25 职场文书
兴趣班停课通知
2015/04/24 职场文书
Android自定义双向滑动控件
2022/04/19 Java/Android