JS的闭包是个啥?

所谓的闭包按照个人通俗易懂的说发可以解释为函数内返回一个函数就像下头的这种写法

function demo(){
    var foo = '我要闭包了'
    function cPackage(){
        return foo
    }
    return cPackage
}
alert(demo()())
//如上的写法就是闭包了。

对于闭包的用法在这里举一个小小的简单的例子 比如 要制作一个tab切换你咋个操作?es6->let?

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0
        }
        ul{
            list-style: none;
            overflow: hidden;
            padding: 80px;
        }
        ul>li{
            float: left;
            width: 80px;
            cursor: pointer;
            text-align: center;
        }
        ul>li+li{
            border-left: 1px solid #888
        }
        .tab{
            width: 100px;
            height: 100px;
            border:1px solid #888;
            display: none;
            margin-left: 80px; 
        }
    </style>
</head>
<body>
    <ul>
        <li>T1</li>
        <li>T2</li>
        <li>T3</li>
    </ul>
        <div class="tab">我是tab1</div>
    <div class="tab">我是tab2</div>
    <div class="tab">我是tab3</div>
    <script type="text/javascript">
            var liEle = document.querySelectorAll('li')
            for (var i = 0 ; i < liEle.length ; i++) {
                liEle[i].onclick = function(){
                    var flag = i
                    return function(){
                        tabEle = document.querySelectorAll(".tab")
                        for (var i = 0; i < tabEle.length; i++) {
                            tabEle[i].style.display = "none"
                        }
                        tabEle[flag].style.display = "block"
                    }
                }()
            }
        </script>
</body>
</html>
<!--以上就是一个典型的闭包应用-->

~ 关于闭包的各种好处,这里在下就不列举了。但请善用闭包。

标签: none

添加新评论