通过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 相关文章推荐
javascript 二维数组的实现与应用
Mar 16 Javascript
js工具方法弹出蒙版
May 08 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
Javascript获取随机数的实现方法
Jun 22 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
微信小程序 聊天室简单实现
Apr 19 Javascript
vue里面父组件修改子组件样式的方法
Feb 03 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
vue项目中仿element-ui弹框效果的实例代码
Apr 22 Javascript
Vue中图片Src使用变量的方法
Oct 30 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
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
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
destoon数据库表说明汇总
2014/07/15 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
JS 控制小数位数的实现代码
2011/08/02 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
2016/05/25 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
Python常用模块函数代码汇总解析
2020/08/31 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
Stylenanda中文站:韩国一线网络服装品牌
2016/12/22 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
幼儿教师考核制度
2014/01/25 职场文书
面试后感谢信
2014/02/01 职场文书
村干部培训班主持词
2014/03/28 职场文书
家具商场的活动方案
2014/08/16 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
学校通报表扬范文
2015/05/04 职场文书
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技