作用域的作用：隔離變量 js沒有塊作用域（ES5有啦） ## **全局作用域（全局執行上下文）** 全局作用域在打開頁面時創建，關閉頁面時銷毀 在全局作用域中有一個全局對象window，它代表的是一個瀏覽器窗口，他由瀏覽器創建我們可以直接使用 在全局作用域中創建的變量都會作為window對象的屬性保存 首先對全局數據進行預處理： * 將 var定義的變量添加為window屬性 * 將 function申明的函數添加為window方法 * 將this指向window（即將this賦值為window） ``` var a=1; //此時a===window.a console.log(a);//1 console.log(window.a)//1 console.log(window.a==a)//true ``` 在全局作用域中創建的函數都會作為window對象的方法保存 ``` function demo(){ console.log("我是自定義的demo函數") } demo();//我是自定義的demo函數 window.demo();//我是自定義的demo函數 ``` **變量聲明提前（變量提升）：** 使用var 聲明的變量，會在所有代碼執行之前聲明（但是不會賦值） ``` console.log(a); //undefined var a=1; //等效于 var a; console.log(a);//undefined a=1; //變量沒有聲明提前 console.log(b)//Uncaught ReferenceError: b is not defined ``` **函數的聲明提前（函數提升）：** ``` //使用函數的聲明形式創建的函數，他會在所有代碼執行之前創建，所以我們可以在定義函數前調用函數 demo(); function demo(){} //其他函數聲明方式則不能提前調用函數 demo1(); var demo1 =function(){ console.log("haha");// } ``` 注意：js中一個{}代表一組代碼塊，他只有分組作用，沒有作用域等特性 ## ## **函數作用域（函數執行上下文）** 調用函數時創建函數作用域,函數執行完畢以后,函數作用域銷毀 每調用一次函數就會創建一個新的函數作用域,他們之間是互相獨立的 在函數作用域中可以訪問到全局作用域的變量在全局作用域中無法訪問到函數作用域的變量 當在函數作用域操作一個變量時,它會先在自身作用域中尋找,如果有則直接使用,沒有就去上一級的作用域查找知道全局作用域 ***** 在調用函數，準備執行函數體之前，創建對應的函數執行上下文對象（存在與內存棧中）對局部數據進行預處理 * 形參變量==>賦值(實參)=>添加為執行上下文的屬性 * arguments==>賦值(實參列表),添加為執行上下文的屬性 * var定義的局部變量==>undefined,添加為執行上下文的屬性 * function聲明的函數==>賦值(fun),添加為執行上下文的方法 * this==>賦值(調用函數的對象) 開始執行函數件代碼 ``` function fn(a1){ console.log(a1);//2 console.log(a2);//undefined a3();//"a3()" console.log(this);//window console.log(arguments);//偽數組（2，3） var a2=3; function a3(){ console.log("a3()'); } } fn(2,3) ``` ``` var g=1; a=2; var b=10; function demo(){ //局部變量 var c="yinli"; //全局變量 f="dash"; var b=3; console.log(g); console.log(a); console.log(b); } demo(); console.log(f); console.log(c);//c is not defined ``` ``` var a=123; function demo(){ alert(a);//123 } demo(); ``` ``` var a=123; function demo(){ alert(a);//undefined //變量提前聲明 var a=456; } demo(); alert(a);//123 ``` ``` var a=123; function demo(){ //a變量此時不存咋，想上一級作用域查找 alert(a);//123 //全局變量 a=456; } demo(); alert(a)//456 ``` ``` var a=123; function demo(a){ //參數 alert(a);//undfined //修改參數 a=456; } demo(); alert(a);//123 ``` ``` var a=123; function demo(a){ //參數 alert(a);//123 //修改參數 a=456; } demo(123); alert(a);//123 ``` ## ## **執行上下文棧** 棧：后進先出 函數的執行上下文對象在函數調用的時候產生， 下例：var a=10 是一個全局上下文 bar(10);與 foo(x+b)是函數上下文 下例的執行上下文總數：n+1=2+1=3 如果在調用一次bar(10);就是4+1=5 ``` var a=10;//1、進入全局執行上下文 var bar=function(x){ var b=5; foo(x+b);//3、進入fn執行上下文 } var fn =function(y){ var c=5; console.log(a+c+y); } bar(10);//2、進入bar執行上下文 ```  1,在全局代碼執行前,JS引擎就會創建一個棧來存儲管理所有的執行上下文對象 2,在全局執行上下文(window)確定后,將其添加到棧中(壓棧) 3·在函數執行上下文創建后,將其添加到棧中(壓棧) 4,在當前函數執行完后,將棧頂的對象移除(出棧) 5,當所有的代碼執行完后,中只剩下window 遞歸： ``` console.log(i); var i=1; foo(1); function foo(i){ if(i==4){ return; } console.log("fb:"+i); foo(i+1);//遞歸調用，在內部調用自身 console.log("fe:"+i); } console.log(i); ```  結果： ``` undefined fb:1 fb:2 fb:3 fe:3 fe:2 fe:1 1 ``` 先執行變量提升，在執行函數提升 ``` //先執行變量提升，在執行函數提升 function a(){} var a; console.log(typeof a);//"function" if (!(b in window)) { var b=1; } console.log(b);//undefined var c=1; function c(c){ console.log(c); } c(3);//報錯 ``` 區別1 全局作用域之外，每個函數都會創建自己的作用域，作用域在函數定義時就已經確定了。而不是在函數調用時 全局執行上下文環境是在全局作用域確定之后，js代碼馬上執行之前創建 函數執行上下文是在調用函數時，函數體代碼執行之前創建 區別2, 作用域是靜態的,只要函數定義好了就一直存在,且不會再變化 執行上下文是動態的，調用函數時創建，函數調用結束時就會自動釋放 聯系： 執行上下文環境(對象)是從屬于所在的作用域全局上下文環境==>全局作用域 函數上下文環境=>對應的函數使用域 作用域鏈 ``` var a=2; function fn1(){ var b=3; function fn2(){ var c=4; console.log(c); console.log(b); console.log(a); console.log(d); } fn2() } fn1() ``` ``` var x=10; function fn(){ console.log(x) } function show(f){ var x=20; f(); } show(fn); 輸出10 ``` ``` var fn=functio(){ console.log(fn)//打印此函數 } var obj={ fn2:function(){ console.log(fn2)//undefined console.log(this.fn2)//打印此方法 } } obj.fn2() ```