通过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.ui.draggable中文文档
Nov 24 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 Javascript
JQuery实现左右滚动菜单特效
Sep 28 Javascript
BootStrap 弹出层代码
Feb 09 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
详解vue父子组件间传值(props)
Jun 29 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
vue watch关于对象内的属性监听
Apr 22 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
vue实现数据控制视图的原理解析
Jan 07 Javascript
vue随机验证码组件的封装实现
Feb 19 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下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
2015/09/17 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
Python贪心算法实例小结
2018/04/22 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
Pyqt5实现英文学习词典
2019/06/24 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
详解Python多线程下的list
2020/07/03 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
最新英语专业学生求职信范文
2013/09/21 职场文书
学生周末长期请假条
2014/02/15 职场文书
促销活动总结范文
2014/04/30 职场文书
学校交通安全责任书
2014/08/25 职场文书
php引用传递
2021/04/01 PHP
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android