[JavaScript]JavaScript中的函数

Posted 小粒旬

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[JavaScript]JavaScript中的函数相关的知识,希望对你有一定的参考价值。

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

函数中的作用域

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,就是一个闭包。

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


以上是关于[JavaScript]JavaScript中的函数的主要内容,如果未能解决你的问题,请参考以下文章

javascript笔记

JavaScript计时事件

JavaScript——闭包

Mootools 是不是 100% 防止 javascript 关闭?

Javascript 的 arguments 参 数

从延迟处理讲起,JavaScript 也能惰性编程?