javascript 變數提升

標籤：唯讀   use   原因   運行   目的   val   定義   提高   undefined   

1.JavaScript 變數提升

JavaScript 中，函數及變數的聲明都將被提升到函數的最頂部。

JavaScript 中，變數可以在使用後聲明，也就是變數可以先使用再聲明。

以下兩個執行個體將獲得相同的結果：

x = 5; // 變數 x 設定為 5elem = document.getElementById("demo"); // 尋找元素 elem.innerHTML = x;                     // 在元素中顯示 xvar x; // 聲明 x

var x; // 聲明 xx = 5; // 變數 x 設定為 5elem = document.getElementById("demo"); // 尋找元素 elem.innerHTML = x;                     // 在元素中顯示 x

要理解以上執行個體就需要理解 "hoisting(變數提升)"。

變數提升：函式宣告和變數聲明總是會被解譯器悄悄地被"提升"到方法體的最頂部。

1.1JavaScript 初始化不會提升

JavaScript 只有聲明的變數會提升，初始化的不會。

以下兩個執行個體結果結果不相同：

var x = 5; // 初始化 xvar y = 7; // 初始化 yelem = document.getElementById("demo"); // 尋找元素 elem.innerHTML = x + " " + y;           // 顯示 x 和 y

var x = 5; // 初始化 xelem = document.getElementById("demo"); // 尋找元素 elem.innerHTML = x + " " + y;           // 顯示 x 和 yvar y = 7; // 初始化 y

執行個體 2 的 y 輸出了 undefined，這是因為變數聲明 (var y) 提升了，但是初始化(y = 7) 並不會提升，所以 y 變數是一個未定義的變數。

執行個體 2 類似以下代碼:

var x = 5; // 初始化 xvar y;     // 聲明 yelem = document.getElementById("demo"); // 尋找元素elem.innerHTML = x + " " + y;           // 顯示 x 和 yy = 7;    // 設定 y 為 7

1.2在頭部聲明你的變數

對於大多數程式員來說並不知道 JavaScript 變數提升。

如果程式員不能很好的理解變數提升，他們寫的程式就容易出現一些問題。

為了避免這些問題，通常我們在每個範圍開始前聲明這些變數，這也是正常的 JavaScript 解析步驟，易於我們理解。

    JavaScript strict 模式(strict mode)不允許使用未聲明的變數。

2.JavaScript strict 模式(use strict)

JavaScript strict 模式（strict mode）即在嚴格的條件下運行。

2.1使用 "use strict" 指令

"use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。

它不是一條語句，但是是一個字面量運算式，在 JavaScript 舊版本中會被忽略。

"use strict" 的目的是指定代碼在嚴格條件下執行。

strict 模式下你不能使用未聲明的變數。

    支援strict 模式的瀏覽器:Internet Explorer 10 +、 Firefox 4+ Chrome 13+、 Safari 5.1+、 Opera 12+。

2.2strict 模式聲明

strict 模式通過在指令碼或函數的頭部添加 "use strict"; 運算式來聲明。

"use strict";x = 3.14;       // 報錯 (x 未定義)

"use strict";myFunction();function myFunction() {    y = 3.14;   // 報錯 (y 未定義)}

在函數內部聲明是局部範圍 (只在函數內使用strict 模式):

x = 3.14;       // 不報錯 myFunction();function myFunction() {   "use strict";    y = 3.14;   // 報錯 (y 未定義)}

為什麼使用strict 模式:

消除Javascript文法的一些不合理、不嚴謹之處，減少一些怪異行為;
• 消除代碼啟動並執行一些不安全之處，保證代碼啟動並執行安全；
• 提高編譯器效率，增加運行速度；
• 為未來新版本的Javascript做好鋪墊。

"strict 模式"體現了Javascript更合理、更安全、更嚴謹的發展方向，包括IE 10在內的主流瀏覽器，都已經支援它，許多大項目已經開始全面擁抱它。

另一方面，同樣的代碼，在"strict 模式"中，可能會有不一樣的運行結果；一些在"正常模式"下可以啟動並執行語句，在"strict 模式"下將不能運行。掌握這些內容，有助於更細緻深入地理解Javascript，讓你變成一個更好的程式員。

2.3strict 模式的限制

不允許使用未聲明的變數：

"use strict";x = 3.14;                // 報錯 (x 未定義)

    對象也是一個變數。

"use strict";x = {p1:10, p2:20};      // 報錯 (x 未定義)

不允許刪除變數或對象。

"use strict";var x = 3.14;delete x;                // 報錯

不允許刪除函數。

"use strict";function x(p1, p2) {}; delete x;                // 報錯 

不允許變數重名:

"use strict";function x(p1, p1) {};   // 報錯

不允許使用八進位:

"use strict";var x = 010;             // 報錯

不允許使用逸出字元:

"use strict";var x = \010;            // 報錯

不允許對唯讀屬性賦值:

"use strict";var obj = {};Object.defineProperty(obj, "x", {value:0, writable:false});obj.x = 3.14;            // 報錯

不允許對一個使用getter方法讀取的屬性進行賦值

"use strict";var obj = {get x() {return 0} };obj.x = 3.14;            // 報錯

不允許刪除一個不允許刪除的屬性：

"use strict";delete Object.prototype; // 報錯

變數名不能使用 "eval" 字串:

"use strict";var eval = 3.14;         // 報錯

變數名不能使用 "arguments" 字串:

"use strict";var arguments = 3.14;    // 報錯

不允許使用以下這種語句:

"use strict";with (Math){x = cos(2)}; // 報錯

由於一些安全原因，在範圍 eval() 建立的變數不能被調用：

"use strict";eval ("var x = 2");alert (x);               // 報錯

禁止this關鍵字指向全域對象。

function f(){    return !this;} // 返回false，因為"this"指向全域對象，"!this"就是falsefunction f(){     "use strict";    return !this;} // 返回true，因為strict 模式下，this的值為undefined，所以"!this"為true。

因此，使用建構函式時，如果忘了加new，this不再指向全域對象，而是報錯。

function f(){    "use strict";    this.a = 1;};f();// 報錯，this未定義

2.4保留關鍵字

為了向將來Javascript的新版本過渡，strict 模式新增了一些保留關鍵字：

• implements
• interface
• let
• package
• private
• protected
• public
• static
• yield

"use strict";var public = 1500;      // 報錯

 

javascript 變數提升