本文實例講述了JavaScript的變量聲明與聲明提前用法。分享給大家供大家參考，具體如下：

JavaScript的變量聲明

JavaScript的變量聲明語句無論出現(xiàn)在何處，都會先于其他代碼首先被執(zhí)行。使用var關(guān)鍵詞聲明變量的作用域是當(dāng)前的執(zhí)行上下文，有可能是外圍函數(shù)，或者，當(dāng)變量聲明在函數(shù)體之外時，則為全局變量。

向一個未聲明變量賦值會隱式地將其創(chuàng)建為一個全局變量（它變成了全局對象的一個屬性）。聲明變量與未聲明變量之間的區(qū)別為：

1. 聲明變量的作用范圍限定在其執(zhí)行的上下文環(huán)境中。未聲明的變量總是全局的。

function x() {
 y = 1;  // Throws a ReferenceError in strict mode
 var z = 2;
}
x();
console.log(y); // logs "1" 
console.log(z); // Throws a ReferenceError: z is not defined outside x

2. 聲明變量在其他代碼執(zhí)行之前創(chuàng)建。未聲明的變量在其賦值語句執(zhí)行之前都是不存在的。

console.log(a);        // Throws a ReferenceError.
console.log('still going...'); // Never executes.
var a;
console.log(a);        // logs "undefined" or "" depending on browser.
console.log('still going...'); // logs "still going...".

3. 聲明變量是執(zhí)行上下文（函數(shù)或者全局）的不可配置的屬性。而未聲明變量是可配置的（例如，可以被delete）

var a = 1;
b = 2;
delete this.a; // Throws a TypeError in strict mode. Fails silently otherwise.
delete this.b;
console.log(a, b); // Throws a ReferenceError. 
// The 'b' property was deleted and no longer exists.

由于以上三點不同，使用未聲明變量可能會帶來意想不到的結(jié)果。因此建議無論是全局變量還是局部變量，在使用前都要聲明。在ECMAScript5的嚴(yán)格模式下，對未聲明變量賦值會拋出一個錯誤。

聲明提前（var hoisting）：

JavaScript的函數(shù)作用域是指在函數(shù)內(nèi)聲明的所有變量在函數(shù)體內(nèi)是始終可見的。有趣的是，這意味著變量甚至可以先使用，后聲明。

JavaScript的這一特性被非正式地稱為聲明提前（hoiosting），即JavaScript函數(shù)中所有變量的聲明都被“提前”至函數(shù)體的頂部。

（“聲明提前”的操作是在JavaScript引擎的“預(yù)編譯”時進行的，即在代碼運行之前）

例如下面的JavaScript代碼：

var scope = "global";
function f() {
  alert(scope);
  var scope = "local"; //覆蓋全局變量
  alert(scope);
}

讀者可能誤以為函數(shù)f的第一個alert會輸出"global"，因為代碼此時還沒有執(zhí)行到var語句聲明局部變量的代碼行。

其實不然，由于函數(shù)作用域的特性，局部變量在整個函數(shù)體內(nèi)始終是有定義的，亦即，在函數(shù)體內(nèi)局部變量覆蓋了同名的全局變量。盡管如此，只有程序執(zhí)行到var語句時，局部變量才會被賦值。因此上述過程等價于，將函數(shù)體內(nèi)的變量聲明“提前”至函數(shù)體頂部，而變量的初始化保留在原處。

function f() {
  var scope; //函數(shù)體頂部聲明局部變量
  alert(scope); //輸出"undefined"
  scope = "local"; //變量初始化賦值
  alert(scope); //輸出"local"
}

基于此原因，建議將變量的聲明都放在作用域的頂部（全局代碼的頂端，或者函數(shù)代碼的開始），從而清楚地區(qū)分變量的作用域，哪些是函數(shù)作用域，哪些在作用域鏈上解析。

參考資料：

1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var

2. 《JavaScript權(quán)威指南》 第6版 中文版

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

最新評論