通过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 相关文章推荐
Dom 结点创建 基础知识
Oct 01 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
js省市区级联查询(插件版&无插件版)
Mar 21 Javascript
用原生JS实现简单的多选框功能
Jun 12 Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
js保留两位小数方法总结
Jan 31 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 Javascript
让你30分钟快速掌握vue3教程
Oct 26 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中经典方法实现判断多维数组是否为空
2011/10/23 PHP
PHP判断图片格式的七种方法小结
2013/06/03 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
3种php生成唯一id的方法
2015/11/23 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
javascript算法学习(直接插入排序)
2011/04/12 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
jquery实现多行文字图片滚动效果示例代码
2014/10/10 Javascript
js实现编辑div节点名称的方法
2014/12/17 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
python进阶教程之异常处理
2014/08/30 Python
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
Pycharm github配置实现过程图解
2020/10/13 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
集团薪酬管理制度
2014/01/13 职场文书
运动会入场词50字
2014/02/20 职场文书
创先争优承诺书范文
2014/03/31 职场文书
大三学习计划书范文
2014/05/02 职场文书
活动总结报告格式
2014/05/09 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
大学生简历求职信
2014/06/24 职场文书