搞懂作用域与闭包

作用域

作用域是指程序中定义变量的区域，该位置决定了变量的生命周期。通俗地理解，作用域就是变量与函数的可访问范围，即作用域控制着变量和函数的可见性和生命周期。

ES6 之前，ES 只有全局作用域和函数作用域

• 全局作用域中对象在代码中的任何地方都能被访问，其生命周期伴随着页面的生命周期。
• 函数作用域就是在函数内部定义的变量或者函数，并且定义的变量或者函数只能在函数内部被访问。函数执行结束之后，函数内部定义的变量会被销毁。

ES6 新增 let 和 const 关键字实现块级作用域。

• ES5 由于变量提升带来的变量会在不被察觉的情况下被覆盖掉、for 循环中本该被销毁的变量没有被销毁等一系列问题，为解决这些问题，ES6 引入 let 和 const 关键字，从而使 JavaScript 也能像其他语言一样拥有了块级作用域。

全局作用域

let a = 1function fun1 () {
    console.log(a) // 结果：1
    function fun2 () {
        console.log(a) // 结果：1
    }
    fun2()}fun1()console.log(a) // 结果：1

如果你在大括号（{}）或者函数的外面定义了一个变量，那么它就是一个全局的变量，它的作用域就是全局作用域,变量a就是定义在最外层，它就能在全局任意地方被使用。

局部作用域

function fun1() {
    let a = 100
    console.log(a) // 结果: 100
    function fun2 () {
        console.log(a) // 结果：100
    }
    fun2()}fun1()console.log(a) // 结果: a is not defined

如果你在函数或者大括号（{}）内定义的变量，就是局部作用域的变量，它能够在该级作用域级任意下级作用域中使用,a只能在fun1函数内部包括内部函数中使用，一旦出了fun1的范围就无法使用该变量了。

闭包

MDN 中对闭包的定义：

函数和对其周围状态（词法环境）的引用捆绑在一起构成闭包。

下面代码来理解什么是闭包：

function foo() {
    var name = 'Top'
    let test1 = 1
    const test2 = 2
    var innerBar = {
        getName: function() {
            console.log(test1)
            return name
        },
        setName: function(newName) {
            name = newName
        }
    }
    return innerBar
}
var bar = foo()
bar.setName('You')
bar.getName()
console.log(bar.getName)

从上面的代码中可以看出，innerBar 是一个对象，包含了 getName 和 setName 的两个方法（通常我们把对象内部的函数称为方法）。你可以看到，这两个方法都是在 foo 函数内部定义的，并且这两个方法内部都使用了 name 和 test 两个变量。

根据词法作用域的规则，内部函数 getName 和 setName 总是可以访问它们外部函数 foo 中的变量， 所以当 innerBar 对象返回给全局变量 bar 时，虽然 foo 函数已经执行结束，但是 getName 和 setName 函数依然可以使用 foo 函数中的变量 name 和 test1。我们就可以把这个称之为 foo 函数的闭包。

好了，现在我们可以给闭包一个正式的定义了：在 JavaScript 中，根据词法作用域的规则，内部函数总是可以访问其外函数中声明的变量，当通过调用以恶搞外部函数返回一个内部函数后，即使该外部函数已经执行结束了，但是内部函数引用外部函数的变量依然保存在内存中，我们就把这些变量的集合称为闭包，比如外部函数 foo，那么这些变量的集合就称为 foo 函数的闭包。