通过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 相关文章推荐
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
Javascript 实现计算器时间功能详解及实例(二)
Jan 08 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
Jul 04 Javascript
微信小程序实现联动选择器
Feb 15 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
javascript代码实现简易计算器
Jan 25 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中的一些数组排序方法分享
2012/07/20 PHP
PHP抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
为你总结一些php系统类函数
2015/10/21 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
javascript 禁止复制网页
2009/06/11 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
原生JS与JQ获取元素的区别详解
2020/02/13 Javascript
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
python网页请求urllib2模块简单封装代码
2014/02/07 Python
从零学python系列之教你如何根据图片生成字符画
2014/05/23 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
Python3.4学习笔记之 idle 清屏扩展插件用法分析
2019/03/01 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
python+pygame实现坦克大战
2019/09/10 Python
香港通票:Hong Kong Pass
2019/02/26 全球购物
牵手50香港:专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
群众路线学习笔记范文
2014/11/06 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
学校党员干部承诺书
2015/05/04 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
教学工作总结范文5篇
2019/08/19 职场文书
js实现模拟购物商城案例
2021/05/18 Javascript
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python