JavaScript闭包-闭包定义与应用

一、闭包定义

一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

(1)作为一个函数变量的一个引用,当函数返回时,其处于激活状态。

(2)一个闭包就是当一个函数返回时,一个没有释放资源的栈区。

二、闭包应用

看了闭包的定义,也许您还觉得云里雾里,下面我们通过一个示例子闭包的应用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript闭包</title>
</head>
<body>

<script type="text/javascript">   
    function init() {   
        var arrays = document.getElementsByTagName("p");   
        for( var i=1; i<=arrays.length; i++ ) {   
            arrays[i].onclick = function() {   
                alert(i);   
            }   
        }   
    }   
</script>   
</head>   
<body onload="init();">   
    <p>产品一</p>
    <p>产品二</p>
    <p>产品三</p>
    <p>产品四</p>
    <p>产品五</p>
</body>
</html>

上述代码,运行效果是,不管点击任何一个P元素,输出的结果都是5。
如何实现点击产品一 输出1、点击产品二 输出2、点击产品三 输出3 以此类推?

方案1 将变量保存在每个P元素对象上

function init() {   
    var arrays = document.getElementsByTagName("p");   
    for( var i=1; i<=arrays.length; i++ ) {   
        arrays[i-1].i = i;   
        arrays[i-1].onclick = function() {   
            alert(this.i);   
        }
    }   
}  

方案2 使用闭包,以参数的方式传递

function init() {   
    var arrays = document.getElementsByTagName("p");   
    for( var i=1; i<=arrays.length; i++ ) {   
        (function(arg){     
            arrays[i-1].onclick = function() {     
                alert(arg);   
            };   
        })(i);
    }   
}   

方案3 使用闭包,返回一个函数作为响应事件(与方案2有细微差别)

function init() {   
    var arrays = document.getElementsByTagName("p");   
    for( var i=1; i<=arrays.length; i++ ) {   
        (function(arg){     
            arrays[i-1].onclick = function() {     
                return function(){
                    alert(arg)
                };   
            };   
        })(i);
    }   
}

方案4 使用闭包,以调用时局部变量

function init() {   
    var arrays = document.getElementsByTagName("p");   
    for( var i=1; i<=arrays.length; i++ ) {   
        (function(){   
            var temp = i;  
            arrays[i-1].onclick = function() {     
                alert(temp);   
            };   
        })();
    }   
} 

方案5 使用匿名函数保存在函数自身

function init() {   
    var arrays = document.getElementsByTagName("p");   
    for( var i=1; i<=arrays.length; i++ ){
        (arrays[i-1].onclick = function() {   
            //arguments.callee 表示函数对象自身的引用
            alert(arguments.callee.i);   
        }).i = i;   
    }   
}

方案6 使用Function实现,实际上是产生一个闭包

function init() {   
    var arrays = document.getElementsByTagName("p");   
    for( var i=1; i<=arrays.length; i++ ) {   
        arrays[i-1].onclick = new Function("alert(" + i + ");");
    }   
}

方案7 使用Function (与6有细微差别一个new 一个没)

function init() {   
    var arrays = document.getElementsByTagName("p");   
    for( var i=1; i<=arrays.length; i++ ) {   
        arrays[i-1].onclick = Function("alert(" + i + ");");
    }   
}
上一篇:asp.net core 中灵活的配置方式


下一篇:【小工匠聊Modbus】03-主站与从站