什么是闭包？变量作用域和闭包。

2024年5月4日 115次阅读 来源: PureView

变量作用域和闭包

变量作用域

当我们写 js 文档的时候经常会设置变量，变量的类型有两种：

  • 全局变量
  • 局部变量

这两种类型的变量有者不同的作用范围，全局变量的作用范围是面向整个文档的，可以称之为全局作用域，局部变量是在函数内部设置的，作用范围为当前的函数，外部不能直接引用，因此称为函数作用域。

var a=1;
function test(){
    var b=2;
    console.log(a) 
}
test()// 1
console.log(b) //error

闭包

  • 简单来说嵌套在函数里的函数以及周边的变量叫闭包
  • 闭包周边的变量在执行完函数之后不会被释放，会常驻内存
function test(){
    var a = 1;
    function test1(){
        var b = 2
    }return test1
}
var test2=test()
test2();

上面的代码就是一段闭包，函数test1被包裹在函数test中,对于test1而言，test内的所有变量都是可见的，但是反过来不行。将test1作为返回值，就可以在test外部进行读取了。

function test(){
    var a = 1;
    function test1(){
        a++
        console.log(a)
    }return test1
}
var test2=test()
test2();//2
test2();//3
test2();//4

在上面的代码中，函数test2实际上就是函数test1的闭包函数，我们让其执行三次，结果分别为2、3、4。这是因为，函数test中的局部变量一直被保存在内存中。所以闭包有个缺点，就是内存占用较大。

自执行函数

var callback=(function(){
    var a = 1;
    function test(){
        a ++;
        console.log(a)
    }
    return test;
})();
callback();2
callback();3

上面这段函数也是闭包的一种。

我们利用闭包来做一个小例子。

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script>
    var li = document.getElementsByTagName("li");
    for(i=0;i<li.length;i++){
        (function(){
            var n=i;
            li[n].onclick=function(){
                var pp = li[n].innerHTML;
                alert(pp)
            }
        })();
    }
        
    </script>
</body>

我们创建了一个列表，当我们点击列表的时候，浏览器将列表里的内容弹窗显示。

END

    原文作者：PureView
    原文地址: https://segmentfault.com/a/1190000010735095
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞