快捷導(dǎo)航

javascript中的變量作用域以及變量提升詳細(xì)介紹

更新時(shí)間：2013年10月24日 16:22:57 作者：

在javascript中，理解變量的作用域以及變量提升是非常有必要的。這個(gè)看起來(lái)是否很簡(jiǎn)單，但其實(shí)并不是你想的那樣，還要一些重要的細(xì)節(jié)你需要理解

變量作用域
“一個(gè)變量的作用域表示這個(gè)變量存在的上下文。它指定了你可以訪問(wèn)哪些變量以及你是否有權(quán)限訪問(wèn)某個(gè)變量?！?/P>

變量作用域分為局部作用域和全局作用域。

局部變量（處于函數(shù)級(jí)別的作用域）
不像其他對(duì)面對(duì)象的編程語(yǔ)言（比方說(shuō)C++，Java等等），javascript沒(méi)有塊級(jí)作用域（被花括號(hào)包圍的）；當(dāng)是，javascript有擁有函數(shù)級(jí)別的作用域，也就是說(shuō)，在一個(gè)函數(shù)內(nèi)定義的變量只能在函數(shù)內(nèi)部訪問(wèn)或者這個(gè)函數(shù)內(nèi)部的函數(shù)訪問(wèn)（閉包除外，這個(gè)我們過(guò)幾天再寫(xiě)個(gè)專題）。

函數(shù)級(jí)別作用域的一個(gè)例子：

復(fù)制代碼代碼如下:

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

沒(méi)有塊級(jí)作用域：

復(fù)制代碼代碼如下:

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關(guān)鍵字
//    如果聲明一個(gè)變量的時(shí)候沒(méi)有使用var關(guān)鍵字，那么這個(gè)變量將是一個(gè)全局變量！
// 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);
}
//    局部變量?jī)?yōu)先級(jí)大于全局變量
//如果在全局作用域中什么的變量在局部作用域中再次聲明，那么在局部作用域中調(diào)用這個(gè)變量時(shí)，優(yōu)先調(diào)用局部作用域中聲明的變量：
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

全局變量
所有在函數(shù)外面聲明的變量都處于全局作用域中。在瀏覽器環(huán)境中，這個(gè)全局作用域就是我們的Window對(duì)象（或者整個(gè)HTML文檔）。

每一個(gè)在函數(shù)外部聲明或者定義的變量都是一個(gè)全局對(duì)象，所以這個(gè)變量可以在任何地方被使用，例如：

復(fù)制代碼代碼如下:

// name and sex is not in any function
var myName = "zhou";
var sex = "male";

//他們都處在window對(duì)象中
console.log(window.myName); //paul
console.log('sex' in window); //true

如果一個(gè)變量第一次初始化/聲明的時(shí)候沒(méi)有使用var關(guān)鍵字，那么他自動(dòng)加入到全局作用域中。

復(fù)制代碼代碼如下:

function showAge(){
  //age初始化時(shí)沒(méi)有使用var關(guān)鍵字，所以它是一個(gè)全局變量
  age = 20;
  console.log(age);
}

showAge();  //20
console.log(age); //因?yàn)閍ge是全局變量，所以這里輸出的也是20

setTimeout中的函數(shù)是在全局作用域中執(zhí)行的

setTimeout中的函數(shù)所處在于全局作用域中，所以函數(shù)中使用this關(guān)鍵字時(shí)，這個(gè)this關(guān)鍵字指向的是全局對(duì)象（Window）:

復(fù)制代碼代碼如下:

為了避免對(duì)全局作用域的污染，所以一般情況下我們盡可能少的聲明全局變量。
變量提升（Variable Hoisting）
所以的變量聲明都會(huì)提升到函數(shù)的開(kāi)頭（如果這個(gè)變量在這個(gè)函數(shù)里面）或者全局作用域的開(kāi)頭（如果這個(gè)變量是一個(gè)全局變量）。我們來(lái)看一個(gè)例子：

復(fù)制代碼代碼如下:

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
}

函數(shù)聲明會(huì)覆蓋變量聲明
如果存在函數(shù)聲明和變量聲明（注意：僅僅是聲明，還沒(méi)有被賦值），而且變量名跟函數(shù)名是相同的，那么，它們都會(huì)被提示到外部作用域的開(kāi)頭，但是，函數(shù)的優(yōu)先級(jí)更高，所以變量的值會(huì)被函數(shù)覆蓋掉。

復(fù)制代碼代碼如下:

// 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

但是，如果這個(gè)變量或者函數(shù)其中是賦值了的，那么另外一個(gè)將無(wú)法覆蓋它：

復(fù)制代碼代碼如下:

// 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

最后一點(diǎn)，在嚴(yán)格模式下，如果沒(méi)有先聲明變量就給變量賦值將會(huì)報(bào)錯(cuò)！

您可能感興趣的文章: