通过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 相关文章推荐
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
javascript中match函数的用法小结
Feb 08 Javascript
学习使用AngularJS文件上传控件
Feb 16 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
JavaScript两个变量交换值的实现方法
Mar 01 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
jQuery遮罩层实例讲解
May 11 jQuery
微信小程序左右滑动的实现代码
Dec 15 Javascript
Vue.js 表单控件操作小结
Mar 29 Javascript
vue实现多条件和模糊搜索功能
May 28 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中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
php中define用法实例
2015/07/30 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
php中and 和 &&出坑指南
2018/07/13 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
原生js实现分页效果
2020/09/23 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
学习python (1)
2006/10/31 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
Python之变量类型和if判断方式
2020/05/05 Python
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
网站开发实习生的自我评价
2013/12/11 职场文书
小学数学国培感言
2014/03/10 职场文书
大课间体育活动方案
2014/03/12 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
本科应届生求职信
2014/08/05 职场文书
党支部承诺书
2015/01/20 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫