您的位置：首页 > Web前端 > JavaScript

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

2016-12-03 12:20 351 查看

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就是全局变量。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript 函数作用域
相关文章推荐
新的分享
章节导航