41 JavaScript中的闭包

技术交流QQ群:1027579432,欢迎你的加入!

欢迎关注我的微信公众号:CurryCoder的程序人生

1.变量的作用域

  • 变量根据作用域的不同分为两种:全局变量和局部变量。
    • 函数内部可以全局变量。
    • 函数外部不可以使用局部变量。
    • 当函数执行完毕,本作用域内的局部变量会被销毁。

2.什么是闭包

  • 闭包是指有权访问另一个函数作用域中变量函数。简单理解就是一个作用域可以访问另外一个函数内部的局部变量。局部变量所在的函数就称为闭包函数。
  • 闭包的主要作用:延伸了变量的作用范围

3.闭包案例

  • 循环注册点击事件
      <ul class="nav">
              <li>榴莲</li>
              <li>臭豆腐</li>
              <li>鲱鱼罐头</li>
              <li>大猪蹄子</li>
          </ul>
          <script>
              // 闭包应用-点击li输出当前li的索引号
              // 方法1:利用动态添加属性的方式
              var lis = document.querySelector('.nav').querySelectorAll('li');
              // for (var i = 0; i < lis.length; i++) {
              //     lis[i].index = i;
              //     lis[i].onclick = function () {
              //         console.log(this.index);
              //     }
              // }
              // 方法2:利用闭包的方式得到当前小li的索引号
              for (var i = 0; i < lis.length; i++) {
                  // 利用for循环创建了4个立即执行函数
                  // 立即执行函数也称为小闭包,因为立即执行函数里面的任何一个函数都可以使用它的i这个变量
                  (function (i) {
                      // console.log(i);
                      lis[i].onclick = function () {
                          console.log(i);
                      }
                  })(i);
              }
          </script>
      </body>
  • 循环中的setTimeout()
      <body>
          <ul class="nav">
              <li>榴莲</li>
              <li>臭豆腐</li>
              <li>鲱鱼罐头</li>
              <li>大猪蹄子</li>
          </ul>
          <script>
              // 闭包应用-3s后,打印所有li元素的内容
              var lis = document.querySelector('.nav').querySelectorAll('li');
              for (var i = 0; i < lis.length; i++) {
                  (function (i) {
                      setTimeout(function () {
                          console.log(lis[i].innerHTML);
                      }, 3000);
                  })(i)
              }
          </script>
      </body>
  • 计算打车价格
      <script>
          // 闭包应用-计算打车价格
          // 起步价13元(3公里内),之后每多一公里增加5元。用户输入公里数可以计算打车价格。如果有拥堵情况,总价格多收取10元拥堵费
          // function fn(){};
          // fn();
          var car = (function(){
              var start = 13;
              var total = 0;
              return {
                  price: function(n){
                      if(n <= 3){
                          total = start;
                      }else{
                          total = (n - 3) * 5 + start;
                      }
                      return total;
                  },  // 正常的总价
                  yd: function(flag){
                      return flag ? total + 10 : total;
                  }  // 拥堵之后的总价
              }
          })();
          console.log( car.price(5));
          console.log( car.yd(true));        
      </script>

4.资料下载

全部评论

相关推荐

07-20 21:57
已编辑
门头沟学院 Java
点赞 评论 收藏
分享
06-13 17:33
门头沟学院 Java
顺序不记了,大致顺序是这样的,有的相同知识点写分开了1.基本数据类型2.基本数据类型和包装类型的区别3.==和equals区别4.ArrayList与LinkedList区别5.hashmap底层原理,put操作时会发生什么6.说出几种树型数据结构7.B树和B+树区别8.jvm加载类机制9.线程池核心参数10.创建线程池的几种方式11.callable与runnable区别12.线程池怎么回收线程13.redis三剑客14.布隆过滤器原理,不要背八股,说说真正使用时遇到了问题没有(我说没有,不知道该怎么回答了)15.堆的内存结构16.自己在写项目时有没有遇见过oom,如何处理,不要背八股,根据真实经验,我说不会17.redis死锁怎么办,watchdog机制如何发现是否锁过期18.如何避免redis红锁19.一个表性别与年龄如何加索引20.自己的项目的QPS怎么测的,有没有真正遇到大数量表21.说一说泛型22.springboot自动装配原理23.springmvc与springboot区别24.aop使用过嘛?动态代理与静态代理区别25.spring循环依赖怎么解决26.你说用过es,es如何分片,怎么存的数据,1000万条数据怎么写入库中27.你说用limit,那么在数据量大之后,如何优化28.rabbitmq如何批次发送,批量读取,答了延迟队列和线程池,都不对29.计网知不知道smtp协议,不知道写了对不对,完全听懵了30.springcloud知道嘛?只是了解反问1.做什么的?短信服务,信息量能到千万级2.对我的建议,基础不错,但是不要只背八股,多去实际开发中理解。面试官人不错,虽然没露脸,但是中间会引导我回答问题,不会的也只是说对我要求没那么高。面完问我在济宁生活有没有困难,最快什么时候到,让人事给我聊薪资了。下午人事打电话,问我27届的会不会跑路,还在想办法如何使我不跑路,不想扣我薪资等。之后我再联系吧,还挺想去的😭,我真不跑路哥😢附一张河科大幽默大专图,科大就是大专罢了
查看30道真题和解析
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务