通过javascript的匿名函数来分析几段简单有趣的代码

简介:
 今天在园子里闲逛,看到wsxjr(很邪恶地联想到“我是下贱人”,晕)写的 Javascript匿名函数的一种应用:封装 一文,想起自己很久以前学习javascript的经历,也曾经碰到过几个由匿名函数造成的困扰(其中一个就是由 闭包 引起的),下面就整理几段简单代码讨论一下,让我们大家一起进步。 
1、简单形式的封装调用
  1. var userName = function() { return "jeff wong" } ();  
  2. alert(userName);  
上面的代码确实简单,我们可以逐步分解成下面的写法:
  1. var anonymousFunc = function() { return "jeff wong" }; //匿名函数  
  2. var name = anonymousFunc(); //执行该函数 返回人名  
  3. alert(name);  
2、new 一下Function的形式(大写Function)
  1. var a = new Object();  
  2. var b = new Function();  
  3. //alert(typeof (a)); //object  
  4. //alert(typeof (b)); //function  
  5. alert(a); //[object Object]  
  6. alert(b); //匿名函数  
  7. //alert(a == b); //false  
  8. //alert(a === b); //false  
正如你所看到的那样,我们new一个Object,变量a弹出的是[object Object],而new一个Function(注意,是大写Function),b在弹出的时候,生成了匿名函数。 既然b是匿名函数,函数当然可以执行,我们可以继续试试下面的代码验证自己的猜测:
  1. alert(b()); //undefined  
  2. alert(a()); //脚本错误 提示“缺少函数”  
3、new 一下function也大有乾坤(小写function)
(1)、简单的空函数
  1. var func = new function() { };  
  2. alert(typeof (func)); //object  
  3. alert(func); //[object Object]  
  4. //alert(func()); //脚本错误 func不是函数  
其实上面的代码也就等价于下面的写法:
  1. function anonymousClass() { } //匿名类  
  2. var instance = new anonymousClass();  
  3. alert(typeof (instance));//object  
  4. alert(instance); //[object Object]  
(2)、函数带个返回值的,也不是很难理解
  1. var func = new function() { return "jeff wong" };  
  2. alert(typeof (func));  
  3. alert(func);  
  4. //alert(func()); //脚本错误 缺少函数  
其实上面的代码也就等价于下面的写法:
  1. function anonymousClass() { return "jeff wong"; } //匿名类  
  2. var instance = new anonymousClass();  
  3. alert(typeof (instance));//object  
  4. alert(instance); //[object Object]  

(3)、还是函数带个返回值的,写法稍微有点不同

下面的代码请注意和(2)中的区分一下,因为接下来要重点讨论的就是那一点点的不同书写形式:

  1. var func = new function() { return new String("jeff wong"); };  
  2. alert(typeof (func)); //object 意料之中  
  3. alert(func); //这里?!  
  4. //alert(func()); //脚本错误 缺少函数  
上面代码的等价形式依然简单:
  1. function anonymousClass() { return new String("jeff wong"); }  
  2. var instance = new anonymousClass();  
  3. alert(typeof (instance));  
  4. 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所分配的值。

  最后,留个思考题,大家看看下面的代码返回什么结果:

  1. var func = new function() { var str = new String("jeff wong"); return str; };//再换种写法  
  2. //alert(typeof (func)); //object 意料之中  
  3. alert(func); //猜一下这里应该是什么结果? 








本文转自JeffWong博客园博客,原文链接:http://www.cnblogs.com/jeffwongishandsome/archive/2010/06/27/1766207.html,如需转载请自行联系原作者
目录
相关文章
|
17小时前
|
JavaScript 前端开发 测试技术
编写JavaScript模块化代码主要涉及将代码分割成不同的文件或模块,每个模块负责处理特定的功能或任务
【5月更文挑战第10天】编写JavaScript模块化代码最佳实践:使用ES6模块或CommonJS(Node.js),组织逻辑相关模块,避免全局变量,封装细节。利用命名空间和目录结构,借助Webpack处理浏览器环境的模块。编写文档和注释,编写单元测试以确保代码质量。通过这些方法提升代码的可读性和可维护性。
7 3
|
4天前
|
数据采集 JavaScript 数据可视化
Node.js爬虫在租房信息监测与分析中的应用
Node.js爬虫在租房信息监测与分析中的应用
|
10天前
|
JavaScript 前端开发 开发工具
【JavaScript 与 TypeScript 技术专栏】TypeScript 如何提升 JavaScript 代码的可读性与可维护性
【4月更文挑战第30天】TypeScript 提升 JavaScript 代码的可读性和可维护性,主要通过静态类型系统、增强代码组织、智能提示与错误检测、文档化和在大型项目中的优势。静态类型减少误解,类和接口提供结构,智能提示提高编码效率,类型注解充当内置文档。在大型项目中,TypeScript 降低理解差异,平滑迁移现有 JavaScript 项目,助力提高开发效率和项目质量。
|
17天前
|
JavaScript 前端开发 算法
< JavaScript小技巧:如何优雅的用【一行代码 】实现Js中的常用功能 >
在开发中,采用简洁的语法和结构,遵循一致的命名规范,具有良好的代码组织和注释,能很好的提高代码的质量。可读性:易于阅读和理解。清晰的命名、简洁的语法和良好的代码结构可以使代码的意图更加明确,降低理解代码的难度,提高代码的可读性。可维护性:易于维护。当代码逻辑清晰、结构简洁时,开发者可以更快速地定位和修复bug,进行功能扩展或修改。同时,可读性高的代码也有助于后续的代码重构和优化。可扩展性:更具有扩展性和灵活性。清晰的代码结构和简洁的代码风格使得添加新功能、修改现有功能或扩展代码更加容易。
< JavaScript小技巧:如何优雅的用【一行代码 】实现Js中的常用功能 >
|
17天前
|
前端开发 JavaScript 容器
JavaScript、CSS像素动画特效代码
此示例创建一个带有像素粒子的容器,每隔300毫秒就会动态添加一个新的像素粒子,然后通过CSS的关键帧动画(`@keyframes`)使它们产生上升和逐渐消失的动画效果。你可以根据需要修改像素粒子的颜色、大小、动画效果和创建速度。
14 0
|
24天前
|
JavaScript
js校验统一社会信用代码
js校验统一社会信用代码
27 0
|
27天前
|
监控 前端开发 JavaScript
如何在浏览器中使用javaScript进行代码调试
【4月更文挑战第11天】在浏览器中调试JavaScript是前端开发的关键技能。使用开发者工具(可通过F12、右键检查或菜单栏访问),遵循以下步骤:1) 打开Sources标签页查看所有脚本;2) 设置断点在需要暂停的代码行;3) 刷新页面触发断点;4) 利用调试工具如Scopes、Watch、Call Stack等检查代码状态;5) 使用Console辅助调试;6) 利用其他工具如Network、Performance和Memory进行性能分析。确保使用最新工具,保持代码清晰,以提升调试效率。
50 4
|
28天前
|
JavaScript 前端开发 API
框架分析(3)-Vue.js
框架分析(3)-Vue.js
|
1月前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
1月前
|
小程序 开发者
微信小程序“Error: xxx.js 已被代码依赖分析忽略,无法被其他模块引用”报错?
微信小程序“Error: xxx.js 已被代码依赖分析忽略,无法被其他模块引用”报错?