Javascript闭包

最新推荐文章于 2024-11-12 11:19:19 发布

poki-Q

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量108

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/lycsdn/article/details/104470421

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

闭包是什么？

闭包是函数的一种使用方式。有两个函数,函数A和函数B满足以下三个条件就是闭包:

1. 在函数 A 内部直接或者间接返回一个函数 B

2. B 函数内部使用着 A 函数的私有变量(私有数据)

3. A 函数外部有一个变量接受着函数 B

function A() {

      var num = 100;  // num 函数A的私有变量

      return function B() {   // 返回函数B

        return num;   // 函数B引用函数A的私有变量

      }
 }

// A():函数A执行返回函数B。外部变量引用了函数B
var b = A(); // 函数A执行完毕，函数执行空间不会被销毁
// b接收的是函数B，此处实际是函数B执行返回num。
var res = b(); 
console.log(res);  // 输出100， 也就是函数B返回的num

// 所以闭包的一个重要的作用就是：使函数执行空间不被销毁，在函数外部可以拿到函数内部的私有变量。

闭包空间

当函数内部返回一个 **复杂数据类型**，并且在函数外部有变量接受这个 **复杂数据类型** 的时候，这个函数的执行空间不会被销毁。我们管这个不会销毁的函数A的执行空间叫做闭包空间,把函数A里面返回的函数 B, 叫做函数A的闭包函。

闭包的应用

js代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ol,ul,li{
            list-style: none;
        }

        ul>li{
            float: left;
            width: 100px;
            background-color: lightblue;
            cursor: pointer;
        }

        ol>li{
            width: 300px;
            height: 200px;
            background-color: gray;
            position: absolute;
            top: 50px;
            display: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ol>
        <li style="display: block;">1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</body>
<script>

    var uList = document.querySelectorAll("ul > li");
    var oList = document.querySelectorAll("ol > li");

    // 利用闭包写一个选项卡
    for(var i = 0; i < uList.length; i++){
        (function(i){
           uList[i].onclick = function(){
              for(var j = 0; j < uList.length; j++){
                oList[j].style.display = "none";
              } 
              oList[i].style.display = "block";
           }
        })(i);
    }
    
</script>
</html>