深入理解javascript嚴格模式(Strict Mode)_javascript技巧

ECMAScript5中引入的嚴格模式,透過讓JavaScript運行環境對一些開發過程中最常見和不易發現的錯誤做出和當前不同的處理,來讓開發者擁有一個」更好」的JavaScript語言。很長一段時間內,由於只有Firefox支援嚴格模式,我曾對嚴格模式表示懷疑。但到了今天,所有主流的瀏覽器都在他們的最新版本中支援了嚴格模式(包括IE10,Opera12和Android4,IOS5)是時候開始使用嚴格模式了。

嚴格模式能起到什麼作用?

嚴格模式為JavaScript引入了很多變化,我把他們分為兩類(明顯的和細微的)。細微改進的目標是修復當前JavaScript中的一些細節問題,對於這些問題我不在這裡進行深入介紹;如果你有興趣,請閱讀Dmitry Soshnikov撰寫的精彩文檔ECMA-262-5 in Detail Chapter 2 Strict Mode。 我在這裡主要介紹嚴格模式引入的明顯變化,那些在你使用嚴格模式前應該知道的概念和那些對你幫助最大的改變。

在開始學習具體特性前,請記住嚴格模式的一大目標是讓你能更快更方便的調試。運行環境在發現問題時顯性的拋出錯誤比默不做聲的失敗或怪異行事(未開啟嚴格模式的JavaScript運行環境經常這樣)要好。嚴格模式會拋出更多錯誤,但這是好事,因為這些錯誤會喚起你注意並修復很多以前很難被發現的潛在問題。

去除WITH關鍵字

首先,嚴格模式中去除了with語句,包含with語句的程式碼在嚴格模式中會拋出異常。所以使用嚴格模式的第一步:確保你的程式碼中沒有使用with。

複製程式碼 程式碼如下:

// 在嚴格模式中以下JavaScript程式碼會拋出錯誤
with (location) {
    alert(href);
}

防止意外為全域變數賦值

其次,局部變數在賦值前必須先進行申明。在啟用嚴格模式之前,為一個未申明的局部變數複製時會自動建立一個同名全域變數。這是Javacript程式中最容易出現的錯誤之一, 在嚴格模式中嘗試這麼做時會有顯性的異常拋出。

複製程式碼 程式碼如下:

// 嚴格模式下會拋出異常
(function() {
    someUndeclaredVar = "foo";
}());

函數中的THIS不再預設指向全域

嚴格模式中另一個重要的變化是函數中未定義或為空( null or undefined)的this不在預設指向全域環境(global)。這會造成一些依賴函數中預設this行為的程式碼執行出錯,例如:

複製程式碼 程式碼如下:

window.color = "red";
function sayColor() {
    alert(this.color);
}
// 在strict模式中會報錯誤, 如果不在嚴格模式中則提示 “red"
sayColor();
// 在strict模式中會報錯誤, 如果不在嚴格模式中則提示 “red"
sayColor.call(null);

this在被賦值之前會一直保持為undefined,這意味著當一個構造函數在執行時,如果之前沒有明確的new關鍵字,會拋出異常。

複製程式碼 程式碼如下:

function Person(name) {
    this.name = name;
}
//在嚴格模式會報錯
var me = Person("Nicholas");

在上面的程式碼中,Person建構函式運行時因為之前沒有new,函數中的this會保留為undefined, 由於你不能為undefined設定屬性,上面的程式碼會拋出錯誤。 在非strict模式環境中,沒有被複製的this會預設指向window全域變數,運行的結果將是意外的為window全域變數設定name屬性。

防止重名

當寫大量程式碼時,物件屬性和函數參數很容易一不小心被設定成一個重複的名字。嚴格模式在這種情況下會顯性的拋出錯誤

複製程式碼 程式碼如下:

//重複的變數名稱,在嚴格模式下會報錯誤
function doSomething(value1, value2, value1) {
    //code
}
//重複的物件屬性名稱,在嚴格模式下會報錯:
var object = {
    foo: "bar",
    foo: "baz"
};

以上的程式碼在嚴格模式中都會被認為是語法錯誤而在執行前就讓你能得到提示。

安全的 EVAL()

雖然eval()語句最終沒有被移除,但在嚴格模式中仍然對它進行了一些改進。最大的改變是在eval()中執行的變數和函數申明不會直接在目前作用域中建立對應變數或函數,例如:

複製程式碼 程式碼如下:

(function() {
    eval("var x = 10;");
    // 非嚴格模式中,alert 10
    // 嚴格模式中則因x未被定義而拋出異常,
    alert(x);
}());

任何在eval()執行過程中建立的變數或函數保留在eval()中。但你能明確的從eval()語句的回傳值來取得eval()中的執行結果,例如:

複製程式碼 程式碼如下:

(function() {
    var result = eval("var x = 10, y = 20; x y");
    // 在strict或非strict模式中都能正確的運行餘下的語句.(resulst為30)
    alert(result);
}());

對唯讀屬性修改時拋出異常

ECMAScript5中也引入為物件的特定屬性設為唯讀,或讓整個物件不可修改的能力。 但在非嚴格模式中,嘗試修改一個只讀屬性只會默不做聲的失敗。 在你和一些瀏覽器原生API打交道過程中,你很可能會遇到這種情況。嚴格模式會在這種情況下明確的拋出異常,提醒你修改這個屬性是不被允許的。

複製程式碼 程式碼如下:

var person = {};
Object.defineProperty(person, "name" {
    writable: false,
    value: "Nicholas"
});
// 在非嚴格模式時,沉默的失敗,在嚴格模式則拋出異常.
person.name = "John";

上面的例子中,name屬性被設為唯讀,非嚴格模式中執行對name屬性的修改不會引發報錯,但修改不會成功。但嚴格模式則會明確的拋出例外。

NOTE: 強烈建議你在使用任何ECMAScript屬性特性指定時開啟嚴格模式。

如何使用?

在現代瀏覽器中開啟嚴格模式非常容易,只需要在JavaScript程式碼中出現以下指令即可

"use strict";
 

雖然看上去上面的程式碼僅僅只是未賦予某個變數的字串,它實際上起到指示JavaScript引擎切換到嚴格模式的作用(不支援嚴格模式的瀏覽器會忽略以上程式碼,不會對後續的執行產生任何影響)。雖然你能把這個指令作用到全局或某個函數中,但這裡還是要提醒,不要在全局環境下啟用嚴格模式。

複製程式碼 程式碼如下:

// 請不要這樣使用
"use strict";
function doSomething() {
    // 這部分程式碼會運作於嚴格模式
}
function doSomethingElse() {
    // 這部分程式碼也會運作於嚴格模式
}

 
雖然上面的程式碼看起來不算一個大問題。但當你不負責維護頁面中引入的全部程式碼時,這樣使用strict模式會讓你面臨由於第三方程式碼沒有為嚴格模式做好準備而引發的問題。

因此,最好把開啟嚴格模式的指令作用於函數中,例如:

複製程式碼 程式碼如下:

function doSomething() {
    "use strict";
    // 這個函數中的程式碼將會運作於嚴格模式
}
function doSomethingElse() {
    // 這個函數中程式碼不會運行於嚴格模式
}

 
如果你想讓嚴格模式在不只一個函數中開啟,請使用立即執行函數表達式 (immediately-invoked function expression ,IIFE):

複製程式碼 程式碼如下:

(function() {
    "use strict";
    function doSomething() {
        // 這個函數運作於嚴格模式
    }
    function doSomethingElse() {
        // 這個函數同樣運作於嚴格模式
    }
}());

結論

我強烈建議你從現在開始就啟用JavaScript嚴格模式,它能幫你發現程式碼中未曾注意到的錯誤。不要在全域環境中啟用,但你能盡量多的使用IIFE(立即執行函數表達式)來把嚴格模式作用到多個函數範圍內。一開始,你會遇到之前未曾碰到過的錯誤提示,這是正常的。當啟用嚴格模式後,請確保在支援的瀏覽器中做了測試,以發現新的潛在問題。一定不要只在程式碼中加入一行”use strict”就假定餘下的程式碼能正常運作。最後,請在嚴格模式下開始寫更好的程式碼。

註：
這裡有各款瀏覽器對嚴格模式支援情況的一個總結。
可以在這個頁面對目前瀏覽器的嚴格模式支援度進行測試。

嚴格模式的優勢：

讓JavaScript更強
1.      This不再被封裝，在normal mode下，this一直是對象。
2.      Fun.caller和fun.arguments即不是可以刪除的屬性，也不能被set或retrieved。
3.      Arguments.caller也是不可以刪除的屬性，也不能set或retrieved。

為將來的ECMAScript版本鋪路
1.      增加了下列保留字：implements, interface, let,package, private, protected, public, static和yield 。
2.      方法宣告應該放在腳本或方法的最前面，且不能放在if或for等語句中間。