[JavaScript]JavaScript中的函数

Posted 2021-01-01 小粒旬

承接上一篇博文的总结，这篇博文是利用代码+画图的形式，梳理一下对于函数作用域和闭包的理解。

函数中的作用域

在 javascript 中, 对象和函数同样也是变量。
在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。

首先我们声明一个函数，然后在函数内部声明并赋值一个变量：

function fn(){
    var x = 3
    console.log(x)
}
fn.call()    //3

在函数fn中就产生了一个作用域，要求打印x的值时，函数就会在自身内部寻找这个x，然后把结果打出来。

在函数内部再次声明一个函数的话，情况会变成什么样呢：

function fn(){
    var x = 3
    // console.log(x)
    function fn1(){
        var x = 4
        console.log(x)
    }
    fn1.call()
}
fn.call()   //4

函数fn1在fn作用域内创造了一个子作用域，打印的时候不使用fn中的变量x，而是使用了这个子作用域内的变量x。

如果fn1中没有声明变量x，他会打印出什么呢？

function fn(){
    var x = 3
    function fn1(){
        console.log(x)
    }
    fn1.call()
}
fn.call()   //3

他会去寻找fn中的x，然后把他打印出来。

如果函数fn作用域内也不存在这个变量呢？

var x = 5
function fn(){
    function fn1(){
        console.log(x)
    }
    fn1.call()
}
fn.call()   //5

由此可以看出：在调用函数作用域(fn1)中的某个变量(x)时，他会先在自身作用域中寻找这个变量；如果这个变量没有找到，那么这个函数可以访问上一级作用域(fn)中的变量(x)；如果这个变量还没有找到，那么这个函数可以访问更上一级，即全局作用域(window)中的x。

注意

在理解作用域的同时，我们要十分注意变量提升的问题。

比如：

function fn(){
    function fn1(){
        console.log(x)
        var x = 5
    }
    fn1.call()
}
fn.call()   //undefined

为什么会打印出了undefined呢？

因为这段代码实际上表达的意思是这样：

function fn(){
    function fn1(){
        var x
        console.log(x)
        x = 5
    }
    fn1.call()
}
fn.call()   //undefined

变量x只是做出了声明，但是并没有赋值，所以打印出来是undefined。

闭包

既然理解了函数作用域，就能理解闭包了。

「函数」和「函数内部能访问到的变量」（也叫环境）的总和，就是一个闭包。

比如上文这张图：

函数fn1加上他可以访问的位于函数fn的作用域内的变量x，就是一个闭包。

关于闭包的更详细的解释，可以看看方应杭方老师的这篇文章，我们充分理解，学以致用，就可以了。