闭包的原理，利于闭包解决作用域的原理

最新推荐文章于 2025-02-17 13:46:33 发布

沒有反方向的钟

最新推荐文章于 2025-02-17 13:46:33 发布

阅读量482

点赞数 2

分类专栏： js基础文章标签： javascript

本文链接：https://blog.youkuaiyun.com/Jueyue15/article/details/120141757

版权

js基础专栏收录该内容

4 篇文章

订阅专栏

闭包是JavaScript中的重要概念，它允许函数访问并操作外部作用域的变量。闭包的形成是因为内部函数对上级作用域的引用。闭包的作用包括保护私有变量、保存函数状态以及实现方法私有化。常见应用场景有返回函数、函数作为参数、IIFE和循环赋值。然而，过度使用闭包可能导致内存泄漏。面试中常考的闭包问题如for循环与闭包的交互，解决方法包括使用自执行函数、let关键字创建块级作用域等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

闭包是什么`

权威指南高级程序设计

在 JS 忍者秘籍(P90)中对闭包的定义：闭包允许函数访问并操作函数外部的变量。《js高级程序设计》红宝书上对于闭包的定义：闭包是指有权访问另外一个函数作用域中的变量的函数。 MDN 对闭包的定义为：闭包是指那些能够访问自由变量的函数。这里的自由变量是外部函数作用域中的变量。

概述上面的话，闭包是指有权访问另一个函数作用域中变量的函数

形成闭包的原因

内部的函数存在外部作用域的引用就会导致闭包。从上面介绍的上级作用域的概念中其实就有闭包的例子 return f就是一个表现形式。

var a = 0
function foo(){
    var b =14
    function fo(){
        console.log(a, b)
    }
    fo()
    return fo
}
foo()

这里的子函数 fo 内存就存在外部作用域的引用 a, b，所以这就会产生闭包

闭包的作用

保护函数的私有变量不受外部的干扰。形成不销毁的栈内存。
保存，把一些函数内的值保存下来。闭包可以实现方法和属性的私有化

闭包经典使用场景

return 回一个函数

var n = 10
function fn(){
    var n =20
    function f() {
       n++;
       console.log(n)
     }
    return f
}

var x = fn()
x() // 21
x() //22;

这里的 return f, f()就是一个闭包，存在上级作用域的引用。

函数作为参数

var a = '林一一'
function foo(){
    var a = 'foo'
    function fo(){
        console.log(a)
    }
    return fo
}

function f(p){
    var a = 'f'
    p()
}
f(foo())
/* 输出
*   foo
/

使用 return fo 返回回来，fo() 就是闭包，f(foo()) 执行的参数就是函数 fo，因为 fo() 中的 a 的上级作用域就是函数foo()，所以输出就是foo

1. IIFE（自执行函数）

ar n = '林一一';
(function p(){
    console.log(n)
})()
/* 输出
*   林一一
/

同样也是产生了闭包p()，存在 window下的引用 n。

1. 循环赋值

for(var i = 0; i<10; i++){
  (function(j){
       setTimeout(function(){
        console.log(j)
    }, 1000) 
  })(i)
}
//去掉闭包后

因为存在闭包的原因上面能依次输出1~10，***闭包形成了10个互不干扰的私有作用域***。（去掉闭包后；）将外层的自执行函数去掉后就不存在外部作用域的引用了，输出的结果就是连续的
10。为什么会连续输出10，因为 JS 是单线程的遇到异步的代码不会先执行(会入栈)，等到同步的代码执行完 i++ 到
10时，异步代码才开始执行此时的 i=10 输出的都是 10。

使用回调函数就是在使用闭包

window.name = '林一一'
setTimeout(function timeHandler(){
  console.log(window.name);
}, 100)

使用闭包需要注意什么

容易导致内存泄漏。闭包会携带包含其它的函数作用域，因此会比其他函数占用更多的内存。过度使用闭包会导致内存占用过多，所以要谨慎使用闭包。

经典面试题

for 循环和闭包(号称必刷题)

var data = [];

for (var i = 0; i < 3; i++) {
  data[i] = function () {
    console.log(i);
  };
}

data[0]();
data[1]();
data[2]()
/* 输出
    3
    3
    3
/

这里的 i 是全局下的 i，共用一个作用域，当函数被执行的时候这时的 i=3，导致输出的结构都是3。

使用闭包改善上面的写法达到预期效果，写法1：自执行函数和闭包用自执行函数 ,闭包；

var data = [];

for (var i = 0; i < 3; i++) {
    (function(j){
      setTimeout( data[j] = function () {
        console.log(j);
      }, 0)
    })(i)
}

data[0]();
data[1]();
data[2]()

写法2：使用 let

let 会形成块级作用域；

var data = [];

for (let i = 0; i < 3; i++) {
  data[i] = function () {
    console.log(i);
  };
}

data[0]();
data[1]();
data[2]()

利用闭包解决作用域问题的几种方法

作用域产生的问题

先举个事件绑定的栗子吧!

for(var i=0; i<10; i++) {
   $('#ul').bind('click', function() {
    console.log(i)
   })
}

运行结果是：输出10个10
为什么是10个10呢？
因为在for循环中，最终i的值是9，但是根据for循环的原理，在循环到i为9之后，会执行i++，之后再去判断i<10，此时已不满足条件，所以终止循环，最终i值为10。所以会输出10个10。

再说说普通事件

for(var i=0; i<10; i++) {
     document.getElementById('ul').onclick = function() {
        console.log(i)
     }
}

运行结果是：输出1个10
在循环中，普通的事件绑定是会被覆盖，所以其实ul只绑定了一个事件，也就是循环到最后的那个事件。
而上面的bind绑定事件则是给ul绑定了10个事件，这也就解释了为什么普通事件只输出一个10，而绑定事件输出10个原因。

作用域所产生的问题，比较常见的还有Tab切换，这里也将使用Tab，来说明作用域如何产生的问题及解决的方法。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="wrap">
        <ul id="list">
            <li>list-1</li>
            <li>list-2</li>
            <li>list-3</li>
        </ul>
        <div id="con">
            <div>content1</div>
            <div>content2</div>
            <div>content3</div>
        </div>
    </div>

    <script>
        var olist = document.getElementById('list');
        var alist = olist.getElementsByTagName('li');
        var ocon = document.getElementById('con');
        var acon = ocon.getElementsByTagName('div');

        for(var i = 0;i<alist.length;i++){
            alist[i].onmouseover=function(){
                for(var j = 0 ;j<alist.length;j++){
                    alist[j].style.backgroundColor='#aaa';
                    acon[j].style.display='none';
                }
                this.style.backgroundColor='#ccc';
                acon[i].style.display = 'block';
            }
        }
    </script>
</body>
</html>

在这个Tab切换中，当鼠标移动到list2或者list3的时候，你会发现报错了，说是acon[i].style没有定义。按照我们现在的逻辑，使用for循环然后在循环中为list的分别添加mouseover的事件，如果鼠标移动到对应的list上面，则执行对应的function。
在function中，我们先使用另外一个循环让所有的list的背景颜色修改为#aaa，再把所有的content隐藏，然后再将鼠标所在的list的颜色修改为#ccc，并且把对应的content显示出来。
那为什么会报错呢？首先我们acon[i].style.display = ‘block’;前面添加一个输出，console.log(i)，结果会输出3，那为什么会是3呢？这也就和上面我们讲到的事件绑定的问题一样了，简单的说就是i被污染了，所以输出了3。
那么这个问题如何解决呢？

几种解决方法

使用for循环的时候给list添加一个index的值，并将i保存在index中，防止i被污染为3。

for (var i = 0; i < alist.length; i++) {
    alist[i].index = i;
    alist[i].onmouseover = function () {
        for (var j = 0; j < alist.length; j++) {
            alist[j].style.backgroundColor = '#aaa';
            acon[j].style.display = 'none';
        }
        this.style.backgroundColor = '#ccc';
        acon[this.index].style.display = 'block';
    }
}

利用this来解决此问题，而不用使用到被污染的i

for (var i = 0; i < alist.length; i++) {
    alist[i].onmouseover = function () {
        for (var j = 0; j < alist.length; j++) {
            if (alist[j] == this) {
                this.style.backgroundColor = '#ccc';
                acon[j].style.display = 'block';
            } else {
                alist[j].style.backgroundColor = '#aaa';
                acon[j].style.display = 'none';
            }
        }
    }
}

利用ES6的方法来解决（部分浏览器不支持ES6语法）
for循环中，var新建的i是一个全局变量，所以系统只会创建一个i，而这个i会根据for循环的增加而改变，则i从循环结束之后就会变成3，而let则会在你每次循环的时候新建一个i，从而让i不会被污染。

for (let i = 0; i < alist.length; i++) {
    alist[i].onmouseover = function () {
        for (var j = 0; j < alist.length; j++) {
            alist[j].style.backgroundColor = '#aaa';
            acon[j].style.display = 'none';
        }
        this.style.backgroundColor = '#ccc';
        acon[i].style.display = 'block';
    }
}

利用闭包来解决问题
添加事件的时候，都将i的值传给change事件，在change事件中又返回一个fn的方法，由于fn的方法中使用到change事件中的index，也就是我们传过去的i值，从而使得函数不会被垃圾回收机制回收，就像上面闭包的作用中所讲到的一样。

for (var i = 0; i < alist.length; i++) {
    function change(index) {
        function fn() {
            for (var j = 0; j < alist.length; j++) {
                alist[j].style.backgroundColor = '#aaa';
                acon[j].style.display = 'none';
            }
            alist[index].style.backgroundColor = '#ccc';
            acon[index].style.display = 'block';
        }
        return fn;
    }
    alist[i].onmouseover = change(i);
}

简化上面的方法，将方法中的change改为匿名函数

for (var i = 0; i < alist.length; i++) {
    alist[i].onmouseover = (function (i) {
        function fn() {
            for (var j = 0; j < alist.length; j++) {
                alist[j].style.backgroundColor = '#aaa';
                acon[j].style.display = 'none';
            }
            alist[i].style.backgroundColor = '#ccc';
            acon[i].style.display = 'block';
        }
        return fn;
    })(i);
}

进一步简化，直接return fn的方法

for (var i = 0; i < alist.length; i++) {
    alist[i].onmouseover = (function (i) {
        return function fn() {
            for (var j = 0; j < alist.length; j++) {
                alist[j].style.backgroundColor = '#aaa';
                acon[j].style.display = 'none';
            }
            alist[i].style.backgroundColor = '#ccc';
            acon[i].style.display = 'block';
        }
    })(i);
}

再次简化，将方法全部改为匿名函数

把原代码包起来用自调用函数；

for (var i = 0; i < alist.length; i++) {
    (function (i) {
        alist[i].onmouseover = function () {
            for (var j = 0; j < alist.length; j++) {
                alist[j].style.backgroundColor = '#aaa';
                acon[j].style.display = 'none';
            }
            this.style.backgroundColor = '#ccc';
            acon[i].style.display = 'block';
        }
    })(i);
}