JavaScript学习随笔--函数作用域

最新推荐文章于 2024-09-21 22:08:36 发布

wqs1106

最新推荐文章于 2024-09-21 22:08:36 发布

阅读量308

点赞数

分类专栏： JavaScript 文章标签： javascript 函数作用域

本文链接：https://blog.csdn.net/wqs1106/article/details/53443732

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript中函数的作用域

首先我们需要弄清楚什么是函数作用域，看下面的代码：

var vg= "vg";
function f1(){
    var vf1= "vf1";
    return {
        f2:function(){
            var vf2= "vf2";
            console.log(vg+vf1+vf2);
        }
    };
}
var o = f1();
o.f2();//print vgvf1vf2

所谓函数作用域就是函数可以访问的变量集合（不包括this和arguments），在这些可访问变量中又可以分成3类：1）全局变量，定义在全局域中（不在任何函数体中定义的变量都是全局变量）所有函数都可以访问，如本例中的vg。2）局部变量，定义在函数内只有函数本身可以访问的变量，如本例中vf1是f1的局部变量，vf2是f2的局部变量。3）闭包变量，函数的外部函数的所有局部变量，如本例中的vf1就是f2函数的闭包变量。闭包变量可以被所有的嵌套函数访问。函数每次调用时都会生成新的局部变量，但是闭包变量只在外部函数调用时生成一次。

接下来我将演示如何在chrome中debug这段代码，以便于我们能更直观更深入的了解JavaScript中的函数作用域的概念。步骤如下：
1. 新建一个html文件test.html，内容如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        var vg= "vg";
        function f1(){
        var vf1= "vf1";
        return {
            f2:function(){
                var vf2= "vf2";
                console.log(vg+vf1+vf2);
                }
            };
        }
        var o = f1();
        o.f2();
    </script>
</head>
<body>
</body>
</html>

用chrome打开test.html，按shift+ctrl+i调出开发者工具框，在html的第13行打上断点。如图：

3.刷新浏览器，那么chrome将会停在13行，这时我们可以看到函数f2的执行期的所有信息。如下图：

4.在debug窗口的右边栏，我们可以看到函数f2的Call Stack，Scope，Call Stack就是函数的执行顺序，Scope就是函数的作用域，图中我们可以清楚的看到f2的scope中包含3个对象，分别是Local，Closure，Global。 Local就是局部变量，Closure就是闭包变量，Global就是全局变量。