Javascript – variable scope

http://javascriptissexy.com/javascript-variable-scope-and-hoisting-explained/

http://www.w3schools.com/js/js_hoisting.asp

Javascript的變數範疇又差點破壞我對PHP變數的理解 (= =)

global vs local:跟PHP一樣的是local變數僅能運作在local範圍,global範圍是不能存取。好詭異的差異在,居然在local範疇(函數)可以存取到global變數。

  1. local變數:函數(function)裡面,使用var定義的為local,不是用var定義的變數表示來自global。
  2. global變數:函數以外使用var定義,或者不須用var定義。
var a = 100;  //global
b = 1000;  //global
function foo() {
    var c;  //local
    a++;  //來自global的a
}

console.log(foo());  //101
console.log(foo());  //102

hoisting(提升):JS引擎運作時會自動把宣告(定義)的變數拉提(是臉部保養嗎)到該範疇的最上方,初始化變數不算是宣告喔,用例子看比較清楚。

//global範疇
x = 5;
console.log(x);  //5
var x; //定義變數x, 會被提升至第1行(x=5)之前

//先宣告再給值(等同上方code)
var x;
x = 5;

//local範疇
var name = 'nicole';
function getName() {
    //依據第一段定義,它應該是global的name(nicole)。
    //但是因為底下有var name,會被移置到函數內容第一行,所以它是local變數。
    console.log(name);  //undefined
    var name;
    name = 'Amuro';
}
getName();

//合成底下兩行變一行也是undefined
//因為JS引擎只會提升宣告,初始化值並不會被提升。
var name;
name = 'Amuro';
var name = 'Amuro';

所以養成在各個範疇就宣告(定義)變數的好習慣,才不容易造成bug。

Advertisements

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s