JavaScript匿名函数之模仿块级作用域


Posted in Javascript onDecember 12, 2015

匿名函数

函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途。

匿名函数:就是没有函数名的函数。

函数的定义,首先简单介绍一下函数的定义,大致可分为三种方式

第一种:这也是最常规的一种

function double(x){
  return 2 * x;  
}

 第二种:这种方法使用了Function构造函数,把参数列表和函数体都作为字符串,很不方便,不建议使用。

var double = new Function('x', 'return 2 * x;');

 第三种:

var double = function(x) { return 2* x; }

 注意“=”右边的函数就是一个匿名函数,创造完毕函数后,又将该函数赋给了变量square。

JavaScript中是没有块级作用域概念的。也就是说,在块级语句中定义的变量,实际上是在包含函数中(外部函数)而非语句中创建的。

function outputNumber(count){ 
  for(var i=0;i<1000;i++){ 
    alert(i); 
  } 
  alert(i);  //count 
}

该函数在java、C#等语言中,变量i只会在for循环语句中有定义,循环结束,i也就被销毁了。但在JavaScript中,变量i是定义在outputNumber()活动对象中的,因此在它定义开始,就可以在函数内部访问它。即使重新声明同一个变量,也不会改变它的值。

function outputNumber(count){ 
  for(var i=0;i<1000;i++){ 
    alert(i); 
  } 
  var i;   //重新声明变量 
  alert(i);  //count 
}

匿名函数可以用来模仿块级作用域并避免这个问题,用作块级作用域(也称私有作用域)的匿名函数的语法如下:

(function(){ 
   //这是块级作用域 
})()

以上代码定义变调用了一个匿名函数,将函数声明包含在一个小括号里面,表示它是个函数表达式。紧跟其后的另一对小括号会立即调用这个函数。
无论什么时候,只要临时需要一些变量,就可以用私用作用域,例如:

function outputNumber(count){ 
  (function(){ 
  for(var i=0;i<1000;i++){ 
    alert(i); 
  })(); 
  alert(i);  //导致一个错误 
}

这样,我们在for循环外部插入了一个私有作用域。在匿名函数中定义的任何变量,都会在执行结束时被销毁。

这种技术经常在全局作用域中被用在函数外部,从而限制向全局作用域中添加过多的变量和函数。

一般来说,我们应该尽量减少向全局作用域中添加变量和函数。

这种做法可以减少闭包占用内存的问题,因为没有指向匿名函数的引用,只要函数执行完毕,就可以立即销毁其作用域链。

Javascript 相关文章推荐
javascript中删除指定数组中指定的元素的代码
Feb 12 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
基于Javascript倒计时效果
Dec 22 Javascript
canvas绘制环形进度条
Feb 23 Javascript
浅谈Vuex的状态管理(全家桶)
Nov 04 Javascript
对Angular中单向数据流的深入理解
Mar 31 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
vue iview多张图片大图预览、缩放翻转
Jul 13 Javascript
实例讲解React 组件
Jul 07 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
Aug 14 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
Feb 24 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 #Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
Dec 11 #Javascript
jQuery入门之层次选择器实例简析
Dec 11 #Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 #Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 #Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 #Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 #Javascript
You might like
PHP性能优化 产生高度优化代码
2011/07/22 PHP
PHPAnalysis中文分词类详解
2014/06/13 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
php+jQuery实现的三级导航栏下拉菜单显示效果
2017/08/10 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
33种Javascript 表格排序控件收集
2009/12/03 Javascript
javascript 函数参数限制说明
2010/11/19 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
python之import机制详解
2014/07/03 Python
Python中operator模块的操作符使用示例总结
2016/06/28 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
HTML5 Geolocation API的正确使用方法
2018/12/04 HTML / CSS
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
小学见习报告
2014/10/31 职场文书
税务会计岗位职责
2015/04/02 职场文书
对公司的意见和建议
2015/06/04 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript