全局预处理与执行,作用域与作用域链
生活随笔
收集整理的這篇文章主要介紹了
全局预处理与执行,作用域与作用域链
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一.全局預處理
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title> </head> <body><p>全局預處理：首先會創建一個詞法環境(Lexical Environment),然后掃面全局里用var聲明的變量和用聲明的方式創建的函數即function xxx(){代碼段}</p><p>函數表達式即var q=function(){代碼段}</p><p>掃描后把變量存入寫成 a:undefined 把函數寫成 xxx:指向函數或對函數的一個引用</p><script>alert(a);alert(b);alert(c);alert(f);//alert(d);//此處d彈出報錯d為未定義undefined，影響后續，故注釋掉var a=1;var b;d=5;alert(d);function f(){console.log('ff');}var c=function (){//此時由于使用函數表達式創建的函數，所以可以當作用var聲明的變量console.log('ccc');}</script> </body> </html>二.全局預處理與執行
?
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title> </head> <body><p>js會從上往下掃描解讀js代碼</p><p>預處理掃描階段：先掃描var=a變量并js解析器儲存為a:undefined,和聲明的函數存為d:指向函數的引用。此時掃描完后即幾個alert都彈出過后，遇到var a=1;則此時將先前存的undefined改為值1</p><p>執行階段：與預處理不同，直接掃描到c=2就直接存入顯示c:2</p><script>alert(a);alert(b);//在c處會因掃描不到報錯未定義而停止，故將其先注釋//alert(c); alert(d);alert(e);var a=1;var b;c=2;alert(c);function d(){console.log('ddd');}var e=function(){consolu.log('eee');}</script> </body> </html>?
三.函數預處理與執行
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title> </head> <body><p>對于函數的預處理與執行：首先會掃描函數的參數，再函數內部聲明式函數，再內部var變量</p><p>所以下面的首先詞法環境會存入參數a:1,b:2(因為參數已經傳入所以先掃描存入參數，若形參兩個為ab,而實參傳入一個則第二個參數值為undefined) </p><p>之后預處理，則函數內部聲明的函數命名與之前的參數沖突，函數覆蓋，故此時a由值1變為指向函數的引用，同時內部var聲明的變量也有沖突為忽略，則b值依舊為2</p><p>預處理結束后執行階段：此時彈出的a為函數的引用，b為2</p><script>function f(a,b){alert(a);alert(b);var b=100;function a(){console.log('gggg');}}f(1,2);</script> </body> </html>四.變量與函數命名沖突
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title> </head> <body><p>函數為第一優先級，碰到函數命名與其他有沖突會覆蓋，碰到變量與其他有沖突會忽略</p><script>alert(a);var a=1;//此處處理變量和函數沖突與前后順序無關，均為函數優先function a(){console.log('fff');}function a(){//處理兩函數沖突則后者函數會覆蓋函數console.log('ggg');}</script> </body> </html>五.作用域
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title> </head> <body><p>js不是塊作用域，也無動態作用域，js是詞法作用域也可稱為靜態作用域或者閉包</p><p>創建函數時給函數添加一個成員scope</p><script>var x=10;function ff(){//（js解析器從上到下解析時）給函數添加一個scope==創建函數時的詞法環境==windowalert(x);//此處解析出要彈出一個變量x，而ff函數未定義x，所以去其scope找也未找到再去window找，// window全局也沒有，所以此時報錯，改進方法為添加全局變量var x=10;即可 }function ff1(){var x=9;ff();//在此處掉用函數執行時創建一個自己的詞法環境 與 scope關聯起來（而scope==window） }function ff2(){var x=8;ff();}ff1();//改進后彈出10</script> </body> </html>六.作用域鏈
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title> </head> <body><script>function f(){//f在js解析器從上到下解析時創建的scope(作用域) == window//f被調用時創建自己的詞法環境（Lexical Environment） 與 f的scope(作用域)關聯起來var x=10;//把x=10加入f的Lx中function g(){//創建函數g時的scope(作用域) == f的詞法環境（Lx），即創建時預處理會把變量和函數都加入f的此法環境中//g運行時g會創建自己的詞法環境（Lx）== g的scope(作用域) }g();//調用g函數 }//作用域鏈為 ：g(Lx)-->g[scope]-->f(Lx)-->f[scope]-->window</script> </body> </html>七.有關new Function
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title> </head> <body><p>創建函數的方式</p><p>第一：function f(){代碼段}。常用</p><p>第二：var g = function (){代碼段}。常用</p><p>另第二：var g = function f(argument){代碼段}。此處f訪問不到不常用</p><p>第三：var g = new Function ("參數","函數體")</p><p>像之前所說的作用域鏈，用new Function創建的函數作用域永遠指向全局，而不是父函數</p><script>//第一種情況function f(){var x=10;var g=function (){alert(x);}g();}f();//由于作用域鏈原因最終結果彈出10//第二種情況 // var x=100; // function f (){ // var x=10; // var g = new Function ("","alert(x)"); // g(); // } // f();//由于用new Function創建的函數作用域永遠指向全局，而不是父函數，故只有在全局聲明x才能彈出值</script> </body> </html>?八.作用域用途
?
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title> </head> <body><p>作用域用途：信息隱藏，減少全局變量及其命名沖突的發生</p><p>為了減少全局變量，將全局變量放入一個匿名立即調用函數</p><script>(function(){//(function(){})()為自調用函數var a=10;var b=20;//將ab設為局部變量function f(){alert(a);}window.f=f;})();f();//可以在外部調用f函數，但是不能在外部訪問ab變量，而且局部變量ab不會被垃圾回收機制回收</script> </body> </html>?
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的全局预处理与执行,作用域与作用域链的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： canvas时钟
- 下一篇： 【处理手记】Configuration