js之闭包详解

最新推荐文章于 2024-12-18 09:28:51 发布

Tt-wW

最新推荐文章于 2024-12-18 09:28:51 发布

阅读量121

点赞数

分类专栏： js基础文章标签：闭包 js

本文链接：https://blog.youkuaiyun.com/weixin_44773271/article/details/96624268

版权

js基础专栏收录该内容

16 篇文章

订阅专栏

闭包的概念:闭包就是能够读取其他函数内部变量的函数
局部变量是在函数中,函数使用结束后,局部变量就会被自动的释放
闭包后,里面的局部变量的使用作用域链就会被延长
然后，还有一个，闭包的时候，里面的函数优先访问外部作用域举个栗子：
```
var x=20
function foo(){
alert(x)
}
function fn(){
var x=10
foo()
}
fn()//20
```
闭包的模式:函数模式的闭包,对象模式的闭包

 函数模式的闭包:在一个函数中有一个函数
    function f1() {
      var num=10;
      //函数的声明
      function f2() {
        console.log(num);
      }
      //函数调用
      f2();
    }
    f1();

 对象模式的闭包:函数中有一个对象
    function f3() {
      var num=10;
      var obj={
        age:num
      };
      console.log(obj.age);//10
    }
    f3();

闭包的优点:缓存数据,延长作用域链


<script>
 //普通的函数
 function f1() {
   var num = 10;
   num++;
   return num;
 }
 console.log(f1());//11
 console.log(f1());//11
 console.log(f1());//11


 //函数模式的闭包
 function f2() {
   var num = 10;
   return function () {
     num++;
     return num;
   }
 }
 var ff = f2();
 //连续调用它的返回值，var num = 10 ；只在上一代码执行了一次，没有多次执行
 console.log(ff());//11  
 console.log(ff());//12
 console.log(ff());//13
</script>

如果想要缓存数据,就把这个数据放在外层的函数和里层的函数的中间位置

 <script>
    //普通方式产生3个不同的随机数
    function showRandom() {
      var num=parseInt(Math.random()*10+1);
      console.log(num);
    }
    showRandom();
    showRandom();
    showRandom();
//闭包的方式,产生三个随机数,但是都是相同的，因为两函数之间，数据被保存了，只执行一次，但输出了3次
function f1() {
  var num=parseInt(Math.random()*10+1);
  return function () {
    console.log(num);
  }
}
var ff=f1();
ff();
ff();
ff();

闭包的缺点:由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
案例：给每个图片点赞
用普通的方式注册事件：每个图片的value值是同一个变量，导致不管点哪个图片都是在上一次点击的图片的value值的基础上加1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    ul {
      list-style-type: none;
    }
li {
  float: left;
  margin-left: 10px;
}

img {
  width: 200px;
  height: 180px;
}

input {
  margin-left: 30%;
}


<ul>
  <li><img src="images/1.jpg" alt=""><br/><input type="button" value="赞(1)"></li>
  <li><img src="images/2.jpg" alt=""><br/><input type="button" value="赞(1)"></li>
  <li><img src="images/3.jpg" alt=""><br/><input type="button" value="赞(1)"></li>
  <li><img src="images/4.jpg" alt=""><br/><input type="button" value="赞(1)"></li>
</ul>

  var btnObjs=my$("input");
  var value=1;
  //循环遍历每个按钮
  for(var i=0;i<btnObjs.length;i++){
    //为每个按钮注册点击事件
    btnObjs[i].οnclick=function () {
     console.log("哈哈");
      this.value="赞("+(value++)+")";
    };
  }

用闭包的方式：
循环遍历按钮注册事件，把闭包函数的返回值给了onclick
也就是说btnObjs[i].οnclick=getValue();相当于
btnObjs[i].οnclick= function () {
this.value=“赞(”+(value++)+")";
};
每一次点击都执行了一次getValue内的匿名函数，他的valve值存在各自的闭包函数中，缓存了数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    ul {
      list-style-type: none;
    }
li {
  float: left;
  margin-left: 10px;
}

img {
  width: 200px;
  height: 180px;
}

input {
  margin-left: 30%;
}

<ul>
  <li><img src="images/1.jpg" alt=""><br/><input type="button" value="赞(1)"></li>
  <li><img src="images/2.jpg" alt=""><br/><input type="button" value="赞(1)"></li>
  <li><img src="images/3.jpg" alt=""><br/><input type="button" value="赞(1)"></li>
  <li><img src="images/4.jpg" alt=""><br/><input type="button" value="赞(1)"></li>
</ul>
<script>
  function getValue() {
    var value=2;
    return function () {
      this.value="赞("+(value++)+")";
    }
  }
  var btnObjs=document.getElementsByTagName("input");
  for(var i=0;i<btnObjs.length;i++){
    btnObjs[i].οnclick=getValue();//每一次点击都执行了一次getValue内的匿名函数
  }
</script>
</body>
</html>