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

来源：互联网发布：搭建java运行环境分析编辑：程序博客网时间：2024/06/08 07:57

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就是全局变量。

0 0