闭包的理解（精简）

最新推荐文章于 2022-05-04 12:48:12 发布

crli

最新推荐文章于 2022-05-04 12:48:12 发布

阅读量776

点赞数

分类专栏： JavaScript 文章标签：闭包函数 javascript 对象全局变量

本文链接：https://blog.csdn.net/liningaa/article/details/52134942

版权

JavaScript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

一：闭包的含义：
1)在一个对象（函数）中的函数，引用了这个对象中的变量，这就叫闭包；
2)在一个对象（函数）中的函数的子函数，引用了这个对象中的变量，这也叫闭包；
3)在一个对象（函数）外的函数，引用了这个对象（函数）内的变量，着还叫闭包

二：闭包的好处
1：减少全局变量

function add() {
    var a = 0;
    return function (){
        a++;
        alert(a);
    }
}
var b = add();
b();//1
b();//2

2：减少传递给函数的参数变量

function crli(base) {
    return function(max){
        num = 0;
        for (var i = 1;i <= max; i++){
            num += i;   
        }
        return num + base;
    }
}
var sum = crli(2);
alert(sum(3));//8

3:实现封装

(function () {
    var a = 0;
    function get(){
        return a;
    }
    function set(val){
        a = val;
    }
    window.g = get;
    window.s = set;
})()
s(5);
alert(g());//5

三：经典题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<script>
    for (var i = 1; i <= 3; i++ ){
        var obj = document.getElementById(i);
        obj.onclick = function(){
            alert(i);
        }
    }
</script>
</body>
</html>

每次单击都会返回4，因为函数没有块级作用域，所以单击时候调用的i实际是全局变量

解决办法

for (var i = 1; i <= 3; i++ ){
    var obj = document.getElementById(i);
        obj.onclick = (function(id){
        return function(){
            alert(id);
        }
    })(i)
}

上面解决方法中的函数相当于预处理之后得到了3个函数

document.getElementById(1).onclick = function(){
    alert(1);
}
document.getElementById(2).onclick = function(){
    alert(2);
}
document.getElementById(3).onclick = function(){
    alert(3);
}

crli

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
闭包的理解（精简）

一：闭包的含义： 1)在一个对象（函数）中的函数，引用了这个对象中的变量，这就叫闭包； 2)在一个对象（函数）中的函数的子函数，引用了这个对象中的变量，这也叫闭包； 3）在一个对象（函数）外的函数，引用了这个对象（函数）内的变量，着还叫闭包二：闭包的好处 1：减少全局变量function add() { var a = 0; return function (){
复制链接

扫一扫

专栏目录