通过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 相关文章推荐
编写兼容IE和FireFox的脚本
May 18 Javascript
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
jquery lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 29 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
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
kmock javascript 单元测试代码
2011/02/06 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
jquery使用hide方法隐藏指定id的元素
2015/03/30 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
python实现在字符串中查找子字符串的方法
2015/07/11 Python
浅谈Python的垃圾回收机制
2016/12/17 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
Python中index()和seek()的用法(详解)
2017/04/27 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
使用npy转image图像并保存的实例
2020/07/01 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
会计专业大学生职业生涯规划书
2014/02/11 职场文书
推普周活动总结
2014/08/28 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
干部作风建设个人剖析材料
2014/10/11 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书
vue 实现上传组件
2021/05/31 Vue.js