浅谈javascript中的闭包


Posted in Javascript onMay 13, 2015

很长一段时间不理解闭包,后来了解了作用域,以及this相关问题才理解了闭包相关知识。
闭包(closure),也是面试题常客。简单点来说就是函数嵌套函数。

函数作为返回值:

function foo () {
  var a = 1;
  return function () {
   a++;
   console.log(a);
  }
}
var aaa = foo();
aaa(); //2
aaa(); //3

其实这个代码不难理解,aaa是指向foo()返回的一个新函数,但是在这个函数里面引用了a变量,所以当执行完foo函数时,变量a还存在内存中不释放。即a分别为2和3。

函数作为参数:

var a = 10;
function foo () {
console.log(a);
}
function aaa(fn) {
 var a = 100;
 fn();
}
aaa(foo);

按照我以前的理解,当执行在aaa函数里面执行fn函数,那么如果自身没有a变量,就去父级作用域找a变量,此处是100,那结果是100吗?

可惜答案不是,在这里结果是10,王福朋老师的博客讲的比较好,他说要去创建这个函数的作用域取值,而不是“父作用域”。

闭包的使用场景

因为本人还比较菜鸟,在这里取一个简单例子。当点击li的时候弹出li在ul中所处的位置即索引值。

html代码:

<ul>
  <li>001</li>
  <li>002</li>
  <li>003</li>
</ul>

js代码:

示例 1:
请看下面的代码,运行后发现,无论点击那个li,结果都是3了。

var aLi = document.getElementsByTagName('li');
for (var i = 0; i<aLi.length; i++) {
  aLi[i].onclick = function() {
   alert(i);
  }
}

因为在匿名函数里面并没有i变量,所以当for结束后,我们再去点击页面的li标签,此时i早就是3了。

示例 2:

aLi[i].onclick = (function(i){
    return function(){
      alert(i);
    }
  })(i);

这次的做法是把函数当返回值,通过自执行函数的参数,把变量i传进去,然后因为返回函数要引用这个i变量,所以当for循环结束也不会释放i变量。即在内存中保存了i变量的值。基于这样的原理,很容易在低版本ie中造成内存泄露。

示例 3:

for (var i = 0; i<aLi.length; i++) {
  (function(i){
    aLi[i].onclick = function(){
      alert(i);
    }
  })(i);
}

这个原理和上面大同小异。

小米前端闭包面试题:

function repeat (func, times, wait) {
} //这个函数能返回一个新函数,比如这样用

var repeatedFun = repeat(alert, 10, 5000)
//调用这个 repeatedFun ("hellworld")

//会alert十次 helloworld, 每次间隔5秒

我的答案:

function repeat (func, times, wait) {
  return function(str) {
    while (times >0) {
      setTimeout(function(){
        func(str);
      },wait);
      times--;
    }
  }
}

var repeatedFun = repeat(alert, 10, 100);
repeatedFun ("hellworld");

以上所述就是本文的全部内容了,希望对大家学习javascript闭包能够有所帮助。

Javascript 相关文章推荐
JavaScript 函数调用规则
Sep 14 Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 Javascript
基于JQuery的抓取博客园首页RSS的代码
Dec 01 Javascript
js实现网页抽奖实例
Aug 05 Javascript
详解Vue.js分发之作用域槽
Jun 13 Javascript
分析JS中this引发的bug
Dec 12 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
vue分页插件的使用方法
Dec 25 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 Javascript
jQuery构造函数init参数分析续
May 13 #Javascript
jQuery构造函数init参数分析
May 13 #Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
May 12 #Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 #Javascript
js实现带按钮的上下滚动效果
May 12 #Javascript
js验证上传图片的方法
May 12 #Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 #Javascript
You might like
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
学习jquery之一
2007/04/27 Javascript
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
2012/01/04 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
详细探究Python中的字典容器
2015/04/14 Python
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
python中pip的安装与使用教程
2018/08/10 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
python入门教程之基本算术运算符
2020/11/13 Python
印度服装购物网站:Limeroad
2018/09/26 全球购物
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
个人充满哲理的自我评价
2014/02/20 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
意向协议书
2015/01/27 职场文书
公积金接收函格式
2015/01/30 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS
在项目中使用redis做缓存的一些思路
2021/09/14 Redis
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python