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