在javascript中， 理解變量的作用域以及變量提升是非常有必要的。這個看起來是否很簡單，但其實并不是你想的那樣，還要一些重要的細節你需要理解。

變量作用域 “一個變量的作用域表示這個變量存在的上下文。它指定了你可以訪問哪些變量以及你是否有權限訪問某個變量。” 變量作用域分為局部作用域和全局作用域。 局部變量（處于函數級別的作用域） 不像其他對面對象的編程語言（比方說C++，Java等等），javascript沒有塊級作用域（被花括號包圍的）；當是，javascript有擁有函數級別的作用域，也就是說，在一個函數內定義的變量只能在函數內部訪問或者這個函數內部的函數訪問（閉包除外，這個我們過幾天再寫個專題）。 函數級別作用域的一個例子： var name = "Richard"; function showName () { var name = "Jack"; // local variable; only accessible in this showName function console.log (name); // Jack } console.log (name); // Richard: the global variable 沒有塊級作用域： var name = "Richard"; // the blocks in this if statement do not create a local context for the name variable if (name) { name = "Jack"; // this name is the global name variable and it is being changed to "Jack" here console.log (name); // Jack: still the global variable } // Here, the name variable is the same global name variable, but it was changed in the if statement console.log (name); // Jack 不要忘記使用var關鍵字 如果聲明一個變量的時候沒有使用var關鍵字，那么這個變量將是一個全局變量！ // If you don't declare your local variables with the var keyword, they are part of the global scope var name = "Michael Jackson"; function showCelebrityName () { console.log (name); } function showOrdinaryPersonName () { ? ? name = "Johnny Evers"; console.log (name); } showCelebrityName (); // Michael Jackson // name is not a local variable, it simply changes the global name variable showOrdinaryPersonName (); // Johnny Evers // The global variable is now Johnny Evers, not the celebrity name anymore showCelebrityName (); // Johnny Evers // The solution is to declare your local variable with the var keyword function showOrdinaryPersonName () { ? ? var name = "Johnny Evers"; // Now name is always a local variable and it will not overwrite the global variable console.log (name); } 局部變量優先級大于全局變量 如果在全局作用域中什么的變量在局部作用域中再次聲明，那么在局部作用域中調用這個變量時，優先調用局部作用域中聲明的變量： var name = "Paul"; function users () { // Here, the name variable is local and it takes precedence over the same name variable in the global scope var name = "Jack"; // The search for name starts right here inside the function before it attempts to look outside the function in the global scope console.log (name);? } users (); // Jack 全局變量 所有在函數外面聲明的變量都處于全局作用域中。在瀏覽器環境中，這個全局作用域就是我們的Window對象（或者整個HTML文檔）。 每一個在函數外部聲明或者定義的變量都是一個全局對象，所以這個變量可以在任何地方被使用，例如： // name and sex is not in any function var myName = "zhou"; var sex = "male"; //他們都處在window對象中 console.log(window.myName); //paul console.log('sex' in window); //true 如果一個變量第一次初始化/聲明的時候沒有使用var關鍵字，那么他自動加入到全局作用域中。 function showAge(){ //age初始化時沒有使用var關鍵字，所以它是一個全局變量 age = 20; console.log(age); } showAge(); ?//20 console.log(age); //因為age是全局變量，所以這里輸出的也是20 setTimeout中的函數是在全局作用域中執行的 setTimeout中的函數所處在于全局作用域中，所以函數中使用this關鍵字時，這個this關鍵字指向的是全局對象（Window）: var Value1 = 200; var Value2 = 20; var myObj = { Value1 : 10, Value2 : 1, caleculatedIt: function(){ setTimeout(function(){ console.log(this.Value1 * this.Value2); }, 1000); } } myObj.caleculatedIt(); //4000 為了避免對全局作用域的污染， 所以一般情況下我們盡可能少的聲明全局變量。? 變量提升（Variable Hoisting） 所以的變量聲明都會提升到函數的開頭（如果這個變量在這個函數里面）或者全局作用域的開頭（如果這個變量是一個全局變量）。我們來看一個例子： function showName () { console.log ("First Name: " + name); var name = "Ford"; console.log ("Last Name: " + name); } showName ();? // First Name: undefined // Last Name: Ford // The reason undefined prints first is because the local variable name was hoisted to the top of the function // Which means it is this local variable that get calls the first time. // This is how the code is actually processed by the JavaScript engine: function showName () { var name; // name is hoisted (note that is undefined at this point, since the assignment happens below) console.log ("First Name: " + name); // First Name: undefined name = "Ford"; // name is assigned a value // now name is Ford console.log ("Last Name: " + name); // Last Name: Ford } 函數聲明會覆蓋變量聲明 如果存在函數聲明和變量聲明（注意：僅僅是聲明，還沒有被賦值），而且變量名跟函數名是相同的，那么，它們都會被提示到外部作用域的開頭，但是，函數的優先級更高，所以變量的值會被函數覆蓋掉。 // Both the variable and the function are named myName var myName;? function myName () { console.log ("Rich"); } // The function declaration overrides the variable name console.log(typeof myName); // function 但是，如果這個變量或者函數其中是賦值了的，那么另外一個將無法覆蓋它： // But in this example, the variable assignment overrides the function declaration var myName = "Richard"; // This is the variable assignment (initialization) that overrides the function declaration. function myName () { console.log ("Rich"); } console.log(typeof myName); // string 最后一點， 在嚴格模式下，如果沒有先聲明變量就給變量賦值將會報錯！

?

http://www.2cto.com/kf/201310/253457.html

轉載于:https://www.cnblogs.com/qiangupc/p/4224221.html

總結

以上是生活随笔為你收集整理的js变量作用域和变量提升的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。