通过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 相关文章推荐
List the Stored Procedures in a SQL Server database
Jun 20 Javascript
javascript 贪吃蛇实现代码
Nov 22 Javascript
JS 自动安装exe程序
Nov 30 Javascript
JavaScript 字符串与数组转换函数[不用split与join]
Dec 13 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
Jun 23 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
vue构建动态表单的方法示例
Sep 22 Javascript
Vue中的vue-resource示例详解
Nov 02 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
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
PHP MySql增删改查的简单实例
2016/06/21 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
js日期联动示例
2014/05/02 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
jQuery内部原理和实现方式浅析
2015/02/03 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
nginx配置React静态页面的方法教程
2017/11/03 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
举例讲解Python中的算数运算符的用法
2015/05/13 Python
Python中字典的基本知识初步介绍
2015/05/21 Python
python清除字符串里非字母字符的方法
2015/07/02 Python
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
名词解释型面试题(主要是网络)
2013/12/27 面试题
会计出纳员的自我评价
2014/01/15 职场文书
入党介绍人评语
2014/05/06 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android
python实现简单的聊天小程序
2021/07/07 Python
python高温预警数据获取实例
2022/07/23 Python