通过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 TextArea字符串长度限制代码集合
Oct 31 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
Nov 25 Javascript
js实现年月日表单三级联动
Apr 17 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
VUE实现一个分页组件的示例
Sep 13 Javascript
简单的Vue异步组件实例Demo
Dec 27 Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 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
PHP面向对象编程快速入门
2006/10/09 PHP
php日历[测试通过]
2008/03/27 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
调试代码导致IE出错的避免方法
2014/04/04 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
python实现简单的TCP代理服务器
2014/10/08 Python
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
pandas 缺失值与空值处理的实现方法
2019/10/12 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
Python批量启动多线程代码实例
2020/02/18 Python
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
电子商务应届生自我鉴定
2014/01/13 职场文书
小学生春游活动方案
2014/08/20 职场文书
党支部书记四风问题整改措施
2014/09/24 职场文书
优秀团队申报材料
2014/12/26 职场文书
2015毕业寄语大全
2015/02/26 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
辩护意见书
2015/06/04 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
Java 异步任务计算FutureTask
2022/04/28 Java/Android
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript
Django框架之路由用法
2022/06/10 Python