javascript中的變數作用域以及變數提升詳細介紹_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); 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"; // this name is the global name variable and it is being change 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 () {function showCelebrityName (    console.log (name);
}

function showOrdinaryPersonName () {   
    name = "Johnny Evers";
 showCelebrityName (); // Michael Jackson

// name is not a local variable, it simply changes the global name variable
showOrdinaryPersonName (); // Johnny Evers
showOrdinaryPersonName (); // Johnny Evers
/🎜>// 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 keys

    var name = "Johnny Evers"; // Now name is always a local variable and it will not overwrite the global variable
    console.log (name);    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 and it takes precedence over the same name variable in the global scope
"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 uncis not not >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 Value1 = 200;
;
var myObj = {
  Value1 : 10,
  Value2 : 1,

  caleculated. this.Value1 * this.Value2);
    }, 1000);
  }
}
myObj.caleculatedIt(); //4000

為了避免對全域作用域的污染， 所以一般情況下我們盡可能少的宣告全域變數。 
變數提升（Variable Hoisting）

所以的變數宣告都會提升到函數的開頭（如果這個變數在這個函數裡面）或是全域作用域的開頭（如果這個變數是全域變數）。我們來看一個例子：

複製程式碼

程式碼如下:

function showconn () {


function showg () {


function show "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
/ heich is this local variable that get calls the first time.
// This is how the code is actually processed by the JavaScript engine:

function showName () {
>   name; 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 name the functionvar myName;?
function myName () {console.log ("Rich");

}

// The function declaration overrides the variable name

// The function declaration overrides the variable name

consoles. log(typeof myName); // function

但是，如果這個變數或函數其中是賦值了的，那麼另外一個將無法覆寫它：

複製程式碼


程式碼如下:


// But in this example, the v.able signment function declaration
var myName = "Richard"; // This is the variable assignment (initialization) that overrides the function declaration.

function myName () {

console.log"🎜>function myName () {console.log"🎜>function myName () {

console.log" ;

}console.log(typeof myName); // string 最後一點， 在嚴格模式下，如果沒有先宣告變數就給變數賦值將會報錯！