javascript深入了解匿名函数和闭包
- 1、匿名函数
- 2、闭包
- 3、举例
- 4、注意
1、匿名函数
函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途。匿名函数:就是没有函数名的函数。
1.1 函数的定义,首先简单介绍一下函数的定义,大致可分为三种方式
第一种:这也是最常规的一种
function double(x){return 2 * x; }
第二种:这种方法使用了Function构造函数,把参数列表和函数体都作为字符串,很不方便,不建议使用。
var double = new Function('x', 'return 2 * x;');
第三种:
var double = function(x) { return 2* x; }
注意“=”右边的函数就是一个匿名函数,创造完毕函数后,又将该函数赋给了变量square。
1.2 匿名函数的创建
第一种方式:就是上面所讲的定义square函数,这也是最常用的方式之一。
第二种方式:
(function(x, y){alert(x + y); })(2, 3);
这里创建了一个匿名函数(在第一个括号内),第二个括号用于调用该匿名函数,并传入参数。
2、闭包
闭包的英文单词是closure,这是JavaScript中非常重要的一部分知识,因为使用闭包可以大大减少我们的代码量,使我们的代码看上去更加清晰等等,总之功能十分强大。
闭包的含义:闭包说白了就是函数的嵌套,内层的函数可以使用外层函数的所有变量,即使外层函数已经执行完毕(这点涉及JavaScript作用域链)。
示例一
function checkClosure(){var str = 'rain-man';setTimeout(function(){ alert(str); } //这是一个匿名函数, 2000); } checkClosure();
这个例子看上去十分的简单,仔细分析下它的执行过程还是有许多知识点的:checkClosure函数的执行是瞬间的(也许用时只是0.00001毫秒),在checkClosure的函数体内创建了一个变量str,在checkClosure执行完毕之后str并没有被释放,这是因为setTimeout内的匿名函数存在这对str的引用。待到2秒后函数体内的匿名函数被执行完毕,str才被释放。
示例二,优化代码
function forTimeout(x, y){alert(x + y); } function delay(x , y , time){setTimeout('forTimeout(' + x + ',' + y + ')' , time); } /*** 上面的delay函数十分难以阅读,也不容易编写,但如果使用闭包就可以让代码更加清晰* function delay(x , y , time){* setTimeout(* function(){* forTimeout(x , y) * } * , time); * }*/
3、举例
匿名函数最大的用途是创建闭包(这是JavaScript语言的特性之一),并且还可以构建命名空间,以减少全局变量的使用。
示例三:
var oEvent = {}; (function(){ var addEvent = function(){ /*代码的实现省略了*/ };function removeEvent(){}oEvent.addEvent = addEvent;oEvent.removeEvent = removeEvent; })();
在这段代码中函数addEvent和removeEvent都是局部变量,但我们可以通过全局变量oEvent使用它,这就大大减少了全局变量的使用,增强了网页的安全性。 我们要想使用此段代码:oEvent.addEvent(document.getElementById('box') , 'click' , function(){});
示例四:
var rainman = (function(x , y){return x + y; })(2 , 3); /*** 也可以写成下面的形式,因为第一个括号只是帮助我们阅读,但是不推荐使用下面这种书写格式。* var rainman = function(x , y){* return x + y;* }(2 , 3);*/
在这里我们创建了一个变量rainman,并通过直接调用匿名函数初始化为5,这种小技巧有时十分实用。
示例五:
var outer = null;(function(){var one = 1;function inner (){one += 1;alert(one);}outer = inner; })();outer(); //2 outer(); //3 outer(); //4
这段代码中的变量one是一个局部变量(因为它被定义在一个函数之内),因此外部是不可以访问的。但是这里我们创建了inner函数,inner函数是可以访问变量one的;又将全局变量outer引用了inner,所以三次调用outer会弹出递增的结果。
4、注意
4.1 闭包允许内层函数引用父函数中的变量,但是该变量是最终值
示例六:
/*** <body>* <ul>* <li>one</li>* <li>two</li>* <li>three</li>* <li>one</li>* </ul>*/var lists = document.getElementsByTagName('li'); for(var i = 0 , len = lists.length ; i < len ; i++){lists[ i ].onmouseover = function(){alert(i); }; }
你会发现当鼠标移过每一个<li&rt;元素时,总是弹出4,而不是我们期待的元素下标。这是为什么呢?注意事项里已经讲了(最终值)。显然这种解释过于简单,当mouseover事件调用监听函数时,首先在匿名函数( function(){ alert(i); })内部查找是否定义了 i,结果是没有定义;因此它会向上查找,查找结果是已经定义了,并且i的值是4(循环后的i值);所以,最终每次弹出的都是4。
解决方法一:
var lists = document.getElementsByTagName('li'); for(var i = 0 , len = lists.length ; i < len ; i++){(function(index){lists[ index ].onmouseover = function(){alert(index); }; })(i); }
解决方法二:
var lists = document.getElementsByTagName('li'); for(var i = 0, len = lists.length; i < len; i++){lists[ i ].$$index = i; //通过在Dom元素上绑定$$index属性记录下标lists[ i ].onmouseover = function(){alert(this.$$index); }; }
解决方法三:
function eventListener(list, index){list.onmouseover = function(){alert(index);}; } var lists = document.getElementsByTagName('li'); for(var i = 0 , len = lists.length ; i < len ; i++){eventListener(lists[ i ] , i); }
4.2 内存泄露
使用闭包十分容易造成浏览器的内存泄露,严重情况下会是浏览器挂死,感兴趣的的话可以参考:http://www.cnblogs.com/rainman/archive/2009/03/07/1405624.html。
转载于:http://www.cnblogs.com/rainman/archive/2009/05/04/1448899.html
javascript深入了解匿名函数和闭包相关推荐
- JavaScript 匿名函数与闭包
匿名函数与闭包 匿名函数 闭包 概念 相关知识点 闭包中的this 循环函数中的匿名函数和闭包 循环函数中的匿名函数 循环函数中的闭包 模仿块级作用域 私有变量 静态私有变量 匿名函数 没有函数名的函 ...
- javascript进阶课程--第三章--匿名函数和闭包
javascript进阶课程--第三章--匿名函数和闭包 一.总结 二.学习要点 掌握匿名函数和闭包的应用 三.匿名函数和闭包 匿名函数 没有函数名字的函数 单独的匿名函数是无法运行和调用的 可以把匿 ...
- JavaScript匿名函数和闭包
概述 在JavaScript前端开发中,函数与对其状态即词法环境(lexical environment)的引用共同构成闭包(closure).也就是说,闭包可以让你从内部函数访问外部函数作用域.在J ...
- php的匿名函数和闭包函数
php的匿名函数和闭包函数 tags: 匿名函数 闭包函数 php闭包函数 php匿名函数 function use 引言:匿名函数和闭包函数都不是特别高深的知识,但是很多刚入门的朋友却总是很困惑,因 ...
- Javascript进阶:匿名函数详解
匿名函数:意如其名,就是没有名字的函数. function (arg1,arg2){..... } 匿名函数的普遍用法: 1.赋值给变量: var func=function(arg1,arg2){. ...
- js 匿名函数和闭包
匿名函数和闭包 转https://www.cnblogs.com/xiaowie/p/10277483.html 填写了注释 匿名函数就是没有名字的函数,闭包是可访问一个函数作用域里变量的函数.声明: ...
- 深入理解Java Lambda表达式,匿名函数,闭包
前言 对于Lambda表达式一直是知其然不知其所以然,为了搞清楚什么是Lambda表达式,以及Lambda表达式的用法和作用,本文应运而生当做学习笔记分享出来,欢迎指正交流. 什么是Lambda 让我 ...
- go语言中利用匿名函数和闭包实现文件名修改
package mainimport ("fmt""strings" )//利用匿名函数和闭包实现文件后缀修改 func makeSuffix(suffix s ...
- Scala 高阶函数(作为值的函数、匿名函数、闭包、柯里化)+隐式转换和隐式参数...
Scala高级特性 1. 学习目标 1.1. 目标一:深入理解高阶函数 1.2. 目标二:深入理解隐式转换 2. 高阶函数 2.1. 概念 Scala混合了面向对象和函数式的特 ...
最新文章
- 如何部署云服务器,保证应用高可用性,永不停机
- 年末福利,C/S应用升级更新完整解决方案放送
- yum源失效,yum命令报错404
- python围绕点旋转
- 程序员们有福了:独立于GUI的Java应用框架 Reflex 诞生了!
- ielts speaking questions
- Centos7.0上搭建LAMP平台安装discuz后无法访问
- lepus mysql 慢查询_天兔 -Lepus 慢查询分析平台配置
- bakaxl启动器怎么导入整合包_bakaxl启动器加皮肤光影mod
- SecureCRT配置
- android 九宫格封装,Android 九宫格布局
- html第八章制作花样链接卡,利用flex布局横向滚动制作滑动选项卡以及内容滑块...
- Kubernetes 1.13 版本发布:Kubeadm简化群集管理、容器存储接口(CSI)和CoreDNS作为默认DNS现已普遍可用
- 扑捉和捕捉的区别照相_3种摄影中捕捉动作的基本方法
- 最受互联网争抢的web前端工程师
- 语义分割之原图与mask的可视化
- centos7 关闭防火墙的指令_Centos7.3防火墙配置
- Unity插件Odin入门
- kotlin的Viewpage2+Fragment的简单使用(setUserVisibleHint方法过时)
- [扩展阅读] EasyGUI 学习文档【超详细中文版】
热门文章
- 【程序报错】Caused by: java.sql.SQLException: Incorrect string value: '\xE9\x99\x90\xE6\x97\xB6...'
- 利用idrac安装操作系统(dell r730)
- CentOS7 Docker搭建私有镜像仓库
- 微软WP8.1:用户最期盼的十个升级要点(转载自远景论坛)
- Ubuntu不能打开设置(Setting)的解决办法
- 为什么你不应该用mongodb【转】
- 最完整的检测模型评估指标mAP计算指南(附代码)在这里!
- 十进制转换为八进制或十六进制
- 磁盘管理删除受保护的“恢复分区”、或合并磁盘发现中间有恢复分区无法合并,怎么办?方法如下
- 【STM32学习】(29)STM32实现595驱动三个数码管(标准库和HAL库实现)