千语前端

了解javascript闭包

7/15/2021 闭包

# 了解javascript闭包

  1. # 什么是闭包

对于前端工程师来说，如果要去大厂面试，或者打开网上的前端教程，不可避免的会遇到一个问题：

  • 什么是【闭包】?
    首先来描述一下什么是闭包：
    一个函数和对其周围状态的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包.
    说人话，闭包就是可以让你在一个内层函数中访问到其外层函数的作用域。创建闭包的常见方式，就是在一个函数内部创建另一个函数。
    来看下面的例子
function countC(){
    let c = 0;
    return function(){
        c++;
        return c;
    }
}
let cc = countC()
1
2
3
4
5
6
7
8

上面这个例子就是一个简单的闭包：如果这个时候执行cc(),会发现结果输出了1，多次执行，结果会一直增长；也就是说，多次执行后，变量c一直保存在内存中，没有被释放掉；
这里要理解一个Javascript作用域的概念:
Javascript作用域分为全局作用域和局部作用域，作用域是可访问变量、对象、函数都是的集合；
例子：

//  全局作用域，此处不能调用carName变量
function myfunction(){
    let carName = "BMW";
    //函数内可调用 carName 变量
}
1
2
3
4
5

变量在函数内声明，为局部变量，只能在函数内部访问。因为局部变量只作用于函数内，所以不同函数可以使用相同名称的变量名，局部变量在函数开始执行时创建，在函数执行完毕时自动销毁；
而上面的闭包，则实现了通过在函数内部定义局部变量，并通过return，在外部环境时能够得到c这个变量。

  1. # 闭包的作用

  • 隐藏一个变量 在定义变量时，你当然可以定义一个全局变量，譬如window.count = 100。
    但这样做很容易被人篡改，所以我们不能别人直接访问这个变量，所以用函数制造闭包，将数据保存在局部变量里是一个好的做法。譬如：
(function(){
    let count = 100
    window.add = function(){
        count++;
    }
    window.minus = function(){
        count--;
    }
})()
1
2
3
4
5
6
7
8
9