DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript 變量作用域分析
JavaScript 變量作用域分析
編輯:關於JavaScript     
復制代碼 代碼如下:
/* 代碼1 */
var scope = "global ";
function checkScope() {
var scope = "local ";
function childCheck() {
var scope = "childLocal ";
document.write(scope);
}
function childUndefined() {
document.write(scope);
var scope;
}
function childOverride() {
scope = "childOverride ";
document.write(scope);
}
document.write(scope); //輸出"local"
childCheck(); //輸出"childLocal"
childUndefined(); //輸出"undefined"
childOverride(); //輸出"childOverride"
document.write(scope); //輸出"childOverride"
}
checkScope(); //輸出"local childLocal undefinedchildOverride childOverride"
document.write(scope); //輸出"global "

全局作用域與局部作用域
全局(global)變量的作用域是全局的,在Javascript中處處有定義;而函數內部聲明的變量是局部(local)變量,其作用域是局部性的,只在函數體內部有定義。對於下面的輸出讀者應不會感到意外。
復制代碼 代碼如下:
/* 代碼2 */
var scope = "global";
function checkScope() {
var scope = "local";
document.write(scope);
}
checkScope(); //輸出"local"
document.write(scope); //輸出"global"

全局變量作用域中使用變量可以不用var語句,但在聲明局部變量是一定要使用var語句,否則會視為對全局變量的引用。看下面代碼:
復制代碼 代碼如下:
/* 代碼3 */
var scope = "global";
function checkScope() {
scope = "local";
document.write(scope);
}
checkScope(); //輸出"local"
document.write(scope); //輸出"local"

沒有塊作用域
Javascript沒有塊級作用域,函數中聲明的變量在整個函數中都是有定義的。對於下面的代碼對於生疏的讀者可能頗感意外:
復制代碼 代碼如下:
/* 代碼4 */
var scope = "global";
function checkScope() {
document.write(scope); //語句4.1
var scope = "local"; //語句4.2
document.write(scope);
}
checkScope(); //輸出"undefinedlocal"

由於語句4.1(var scope = "local";)聲明的變量在整個checkScope函數作用域內都有效,因此在語句4.2(document.write(scope); )執行的時scope引用的是局部變量,而此時局部變量scope尚未定義,所以輸出”undefined”。因此一個好的編程習慣是將所有的變量聲明集中起來放在函數的開頭。

在了解了上述內容之後,讀者再看看代碼1應該不會感到困惑了。

對象的屬性變量
對象的屬性變量比較容易理解,看一下下面的代碼讀者應該不會感到疑惑。
復制代碼 代碼如下:
/* 代碼5 */
var scope = "global ";
var obj = new Object();
obj.scope = "object ";
obj.checkScope = function () {
var scope = "loacl ";
document.write(scope); //輸出"loacl"
document.write(this.scope); //輸出"object"
document.write(window.scope); //輸出"global"
}
obj.checkScope(); //輸出"loacl object global"
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved