通过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实现ASP分页函数 HTML分页函数
Sep 22 Javascript
使用js获取QueryString的方法小结
Feb 28 Javascript
jquery 注意事项与常用语法小结
Jun 07 Javascript
Javascript 面向对象(二)封装代码
May 23 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 Javascript
JavaScript设计模式之策略模式详解
Jun 09 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
浅谈vue-props的default写不写有什么区别
Aug 09 Javascript
解决vue-loader加载不上的问题
Oct 21 Javascript
微信小程序入门之指南针
Oct 22 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
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
PHP经典面试题集锦
2015/03/19 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
sina的lightbox效果。
2007/01/09 Javascript
jQuery 使用个人心得
2009/02/26 Javascript
juqery 学习之四 筛选查找
2010/11/30 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
javascript中this关键字详解
2016/12/12 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
详细介绍Ruby中的正则表达式
2015/04/10 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
Python BS4库的安装与使用详解
2018/08/08 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
python实现贪吃蛇小游戏
2020/03/21 Python
python的re模块使用方法详解
2019/07/26 Python
Python如何实现机器人聊天
2020/09/10 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
《木笛》教学反思
2014/03/01 职场文书
项目采购员岗位职责
2014/04/15 职场文书
爱心助学感谢信
2015/01/21 职场文书
环境卫生整治简报
2015/07/20 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
如何通过一篇文章了解Python中的生成器
2022/04/02 Python
Golang并发工具Singleflight
2022/05/06 Golang