Javascript我學之四範圍

標籤：

本文是金旭亮老師網易雲課堂的課程筆記，記錄下來，以供備忘

範圍 

         JavaScript的變數範圍只有兩種，全域範圍和函數範圍。

 

函數的範圍

          函數中定義的變數是私人的，僅在本函數範圍內有效，稱為“函數範圍”。

          

1        //每個函數，都定義了一個範圍2         function add(num1, num2) {3             var sum = num1 + num2;4             return sum;5         }6         console.info(add(100, 200));  //3007         console.info(sum);  //出錯！

 

塊範圍與同名變數

           JavaScript是沒塊範圍的

 1          function doSomething(doIt) { 2             var color = "blue"; 3             if (doIt) { 4                 var color = "red"; 5                 console.info("在條件陳述式中的Color=" + color); 6             } 7             console.info("在條件陳述式外的Color=" + color); 8         }; 9        10         doSomething(false);    //在條件陳述式外的Color=blue11         doSomething(true);     //在條件陳述式中的Color=red,在條件陳述式外的Color=red

          在if()語句塊中定義的color變數，與外部定義的color同名，所以是同一個變數，這是因為javascript並沒有塊範圍。這與java,c#是不一樣的。

 

變數提升（Hoist）        

編譯器把函數中後部定義的變數統一移到函數開頭進行定義

1          //hoist: 變數提升2         var v = "hello";3         (function () {4             //輸出undefined5             console.info(v);6             var v = "world";7         })();

等價於

1         var v = "hello";2         (function () {3             var v;4             console.info(v);5             v = "world";6         })();

 所以在函數中定義變數時，要在函數開頭集中定義變數，不要在“中途”“臨時想起來”地定義變數。

嵌套函數可訪問的變數

嵌套的函數，內建函式可以訪問外部函數定義的變數，也能訪問全域變數

 1         //嵌套函數的變數訪問 2         var world = "world "; 3         function sayHello() { 4             var hello = "Hello "; 5             function inner() { 6                 var info = " in inner function"; 7                 console.info(hello + world + info); 8             } 9             inner();10         }11         sayHello();  //hello world  in inner function

 

再談同名變數

 定義變數時，一定要使用var！如沒寫，就會是全域變數.

 1         var myColor = "red"; 2         //輸出：myColor before myFunc() red 3         console.info("myColor before myFunc()", myColor); 4         function myFunc() { 5             //這裡有沒有var，很關鍵！ 沒寫var, mycolor就變成全域變數 6             var myColor = "blue "; 7             //輸出：myColor inside myFunc() blue 8             console.info("myColor inside myFunc()", myColor); 9         }10         myFunc();11         //輸出：myColor after myFunc() red12         //當第6行去掉var時，這裡輸出:myColor after myFunc() blue13         console.info("myColor after myFunc()", myColor);

 變數的尋找過程

 自下而上，由內至外

1         //變數的尋找過程2         var color = "blue";3         function outer() {4             function getColor() {5                 return color;6             }7             console.info(getColor()); //blue8         };9         outer();

 

Javascript我學之四範圍