首页 > 代码库 > Javascript[1] - 闭包

Javascript[1] - 闭包

2024-09-02 22:26:03   218人阅读

  • 闭包：在程序语言中，所谓闭包是指语法域位于某个特殊的区域，具有持续参照（读写）位于该区间内自身范围之外的执行域上的非持久型变量值能力的段落。这些外部执行域的非持久变量神奇的保留他们在闭包最初定义（或创建）时的值。即：可以通过一个函数访问另一个函数内部变量的方式称为闭包（创建内部函数并返回）。
  • 变量作用链域：
<script>
    function outFun() {
       var num = 1;
       function inFun() {
          console.log(num);
       }
    }
</script>
  • 闭包：
<script>
    function outFun() {
       var num = 1;
       function inFun() {
          console.log(num);
       }
       return inFun;
    }
    var demo = outFun();
    demo();
</script>
  • 经典面试题：
<script>
    function outFun() {
        var a = 0;
        function inFun() {
            a ++;
            alert(a)
        }
        return inFun;
    }
    var obj = outFun();
    obj();
    obj();
    var obj1 = outFun();
    obj1();
    obj1();
</script>

//1 2 1 2

闭包优点：不产生全局变量，实现属性私有化。

缺点：闭包的数据会常驻内存，在不用的时候要删掉，否则会导致内存溢出。

  • 闭包传参：
<script>
    function Fun(x) {
        return function (y) {
            console.log(x+y);
        }
    }
    var obj = Fun(2);
    obj(3);
</script>
  • 事件传参：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            position: absolute;
            left: 0px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
<button id="btn2">左</button>
<button id="btn1">右</button>
<div id="box"></div>
<script>
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");
    var box = document.getElementById("box");
    function move(speed) {
        return function () {
            box.style.left = box.offsetLeft + speed + "px";
        }
    }
    btn1.onclick = move(5);
    btn2.onclick = move(-5);
</script>
</body>
</html>

 

Javascript[1] - 闭包


联系
我们