无为清净楼资源网

浅谈javascript中的闭包
网络编程 2024/11/20 佚名
3 2
无为清净楼资源网 Design By www.qnjia.com

很长一段时间不理解闭包，后来了解了作用域，以及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,闭包
无为清净楼资源网 Design By www.qnjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
www.qnjia.com 无为清净楼资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接