js變量

　　JavaScript聲明變量可以用var聲明，也可以不用var聲明，兩種聲明變量的方式有什么區(qū)別呢?

　　注：此處暫不討論 ES6 中的 let 和 const

　　JavaScript變量分為 局部變量 和 全局變量

　　簡(jiǎn)單理解：

　　在函數(shù)中用var聲明的變量即為 局部變量

　　在函數(shù)外用var聲明的變量即為 全局變量

　　但是，這里說(shuō)的函數(shù)中和函數(shù)外也不是絕對(duì)的，看以下代碼及分析：

　　// demo1

　　var a = 123; // 全局變量

　　var b = 456; // 全局變量

　　console.log(a); // 123

　　console.log(b); // 456

　　console.log(window.a); // 123

　　console.log(window.b); // 456

　　console.log(window); // 打印結(jié)果如下圖

　　demo1 可以看到，不管是直接訪問(wèn)變量 a b 或是訪問(wèn)window對(duì)象的屬性 a b 都能輸出相同結(jié)果

　　// demo2

　　var a = 123; // 使用var聲明

　　b = 456; // 不使用var聲明

　　console.log(a); // 123

　　console.log(b); // 456

　　console.log(window.a); // 123

　　console.log(window.b); // 456

　　console.log(window); // 打印結(jié)果如下圖

　　demo2 打印結(jié)果和上面 demo1 "相同"

　　另外，使用var聲明變量也叫顯示聲明，不用var聲明變量也叫隱式聲明

　　通過(guò)上面demo1和demo2我們可以得到以下結(jié)論：

　　在函數(shù)外，不管是使用var聲明變量，還是不用var聲明變量，它們都是全局變量。

　　全局變量其實(shí)是在window對(duì)象中添加屬性并賦值。

　　繼續(xù)看demo...

　　// demo3

　　function fn() {

　　var a = 123;

　　var b = 456;

　　console.log(a); // 123

　　console.log(b); // 456

　　console.log(window.a); // undefined

　　console.log(window.b); // undefined

　　}

　　fn();

　　demo3 直接訪問(wèn)變量 a b 可以正常輸出結(jié)果，訪問(wèn)window對(duì)象的屬性 a b結(jié)果為 undefined

　　// demo4

　　function fn() {

　　var a = 123; // 使用var聲明

　　b = 456; // 不使用var聲明

　　console.log(a); // 123

　　console.log(b); // 456

　　console.log(window.a); // undefined

　　console.log(window.b); // 456

　　}

　　fn();

　　console.log(b); // 456

　　console.log(window); // 結(jié)果如下圖

　　demo4 打印結(jié)果可以看到：

　　1.直接訪問(wèn)變量 a b 可以正常輸出結(jié)果

　　2.訪問(wèn)window對(duì)象的屬性 a 結(jié)果為 undefined，屬性 b 可以正常輸出結(jié)果

　　3.在window對(duì)象中有屬性 b，沒(méi)有屬性 a

　　是否發(fā)現(xiàn)了什么...?

　　通過(guò)上面 demo3 和 demo4 我們可以得到以下結(jié)論：

　　在函數(shù)中，使用var聲明的變量為局部變量，不用var聲明的變量為全局變量

　　用var聲明變量和不用var聲明變量的區(qū)別之一：

　　在函數(shù)外，用var聲明的變量為全局變量，不用var聲明的變量為全局變量

　　在函數(shù)中，用var聲明的變量為局部變量，不用var聲明的變量為全局變量

　　除了作用域的區(qū)別以外

　　// demo5

　　var a = 123; // 使用var聲明

　　b = 456; // 不使用var聲明

　　console.log(window.a); // 123

　　console.log(window.b); // 456

　　console.log(delete a); // false

　　console.log(delete b); // true

　　console.log(window.a); // 123

　　console.log(window.b); // undefined

　　注：delete 用來(lái)刪除對(duì)象的屬性，如果是不可配置的屬性返回false，其他情況返回true

　　demo5 可以看到，變量 a b 都是全局變量，同為window對(duì)象的其中一個(gè)屬性，a 不可以刪除，b 可以刪除

　　用var聲明變量和不用var聲明變量的區(qū)別之二：

　　同為全局變量，同為window對(duì)象的其中一個(gè)屬性，用var聲明的變量不可以刪除，不用var聲明的變量可以刪除!

　　對(duì)象屬性是否可刪除, 其實(shí)是可以配置的

　　Object.getOwnPropertyDescriptor(); 方法返回某個(gè)對(duì)象屬性的描述對(duì)象

　　Object.defineProperty(); 方法會(huì)直接在某個(gè)對(duì)象上定義一個(gè)新屬性，或者修改一個(gè)已經(jīng)存在的屬性， 并返回這個(gè)對(duì)象

　　// demo6

　　var a = 123; // 使用var聲明

　　b = 456; // 不使用var聲明

　　console.log(Object.getOwnPropertyDescriptor(window, 'a'));

　　// {value: 123, writable: true, enumerable: true, configurable: false}

　　console.log(Object.getOwnPropertyDescriptor(window, 'b'));

　　// {value: 456, writable: true, enumerable: true, configurable: true}

　　demo6 我們可以看到window對(duì)象的屬性 a 和 b 的描述對(duì)象包含以下信息：

　　value 屬性的值

　　writable 屬性是否可讀寫(xiě)

　　enumerable 屬性是否可枚舉

　　configurable 屬性是否可配置(刪除)

　　屬性 a 和 b 的描述對(duì)象區(qū)別在于 是否可配置 這個(gè)特性

　　屬性 a 為 configurable: false 不可配置

　　屬性 b 為 configurable: true 可配置

　　// demo7

　　var a = 123; // 使用var聲明

　　b = 456; // 不使用var聲明

　　Object.defineProperty(window, 'b', {configurable: false});

　　console.log(delete a); // false

　　console.log(delete b); // false

　　console.log(window.a); // 123

　　console.log(window.b); // 456

　　console.log(Object.getOwnPropertyDescriptor(window, 'b'));

　　// {value: 456, writable: true, enumerable: true, configurable: false}

　　通過(guò) demo6 和 demo7 我們得到上面那個(gè)問(wèn)題的答案：

　　對(duì)象的屬性是否可刪除，取決于描述對(duì)象的配置屬性configurable

　　用var聲明的變量默認(rèn)不可刪除，不用var聲明的變量默認(rèn)帶可刪除。