嚴格模式 · JavaScript 教程

# 嚴格模式除了正常的運行模式，JavaScript 還有第二種運行模式：嚴格模式（strict mode）。顧名思義，這種模式采用更加嚴格的 JavaScript 語法。同樣的代碼，在正常模式和嚴格模式中，可能會有不一樣的運行結果。一些在正常模式下可以運行的語句，在嚴格模式下將不能運行。 ## 設計目的早期的 JavaScript 語言有很多設計不合理的地方，但是為了兼容以前的代碼，又不能改變老的語法，只能不斷添加新的語法，引導程序員使用新語法。嚴格模式是從 ES5 進入標準的，主要目的有以下幾個。 - 明確禁止一些不合理、不嚴謹的語法，減少 JavaScript 語言的一些怪異行為。 - 增加更多報錯的場合，消除代碼運行的一些不安全之處，保證代碼運行的安全。 - 提高編譯器效率，增加運行速度。 - 為未來新版本的 JavaScript 語法做好鋪墊。總之，嚴格模式體現了 JavaScript 更合理、更安全、更嚴謹的發展方向。 ## 啟用方法進入嚴格模式的標志，是一行字符串`use strict`。 ```javascript 'use strict'; ``` 老版本的引擎會把它當作一行普通字符串，加以忽略。新版本的引擎就會進入嚴格模式。嚴格模式可以用于整個腳本，也可以只用于單個函數。 **（1）整個腳本文件** `use strict`放在腳本文件的第一行，整個腳本都將以嚴格模式運行。如果這行語句不在第一行就無效，整個腳本會以正常模式運行。(嚴格地說，只要前面不是產生實際運行結果的語句，`use strict`可以不在第一行，比如直接跟在一個空的分號后面，或者跟在注釋后面。) ```html <script> 'use strict'; console.log('這是嚴格模式'); </script> <script> console.log('這是正常模式'); </script> ``` 上面代碼中，一個網頁文件依次有兩段 JavaScript 代碼。前一個`<script>`標簽是嚴格模式，后一個不是。如果`use strict`寫成下面這樣，則不起作用，嚴格模式必須從代碼一開始就生效。 ```html <script> console.log('這是正常模式'); 'use strict'; </script> ``` **（2）單個函數** `use strict`放在函數體的第一行，則整個函數以嚴格模式運行。 ```javascript function strict() { 'use strict'; return '這是嚴格模式'; } function strict2() { 'use strict'; function f() { return '這也是嚴格模式'; } return f(); } function notStrict() { return '這是正常模式'; } ``` 有時，需要把不同的腳本合并在一個文件里面。如果一個腳本是嚴格模式，另一個腳本不是，它們的合并就可能出錯。嚴格模式的腳本在前，則合并后的腳本都是嚴格模式；如果正常模式的腳本在前，則合并后的腳本都是正常模式。這兩種情況下，合并后的結果都是不正確的。這時可以考慮把整個腳本文件放在一個立即執行的匿名函數之中。 ```javascript (function () { 'use strict'; // some code here })(); ``` ## 顯式報錯嚴格模式使得 JavaScript 的語法變得更嚴格，更多的操作會顯式報錯。其中有些操作，在正常模式下只會默默地失敗，不會報錯。 ### 只讀屬性不可寫嚴格模式下，設置字符串的`length`屬性，會報錯。 ```javascript 'use strict'; 'abc'.length = 5; // TypeError: Cannot assign to read only property 'length' of string 'abc' ``` 上面代碼報錯，因為`length`是只讀屬性，嚴格模式下不可寫。正常模式下，改變`length`屬性是無效的，但不會報錯。嚴格模式下，對只讀屬性賦值，或者刪除不可配置（non-configurable）屬性都會報錯。 ```javascript // 對只讀屬性賦值會報錯 'use strict'; Object.defineProperty({}, 'a', { value: 37, writable: false }); obj.a = 123; // TypeError: Cannot assign to read only property 'a' of object #<Object> // 刪除不可配置的屬性會報錯 'use strict'; var obj = Object.defineProperty({}, 'p', { value: 1, configurable: false }); delete obj.p // TypeError: Cannot delete property 'p' of #<Object> ``` ### 只設置了取值器的屬性不可寫嚴格模式下，對一個只有取值器（getter）、沒有存值器（setter）的屬性賦值，會報錯。 ```javascript 'use strict'; var obj = { get v() { return 1; } }; obj.v = 2; // Uncaught TypeError: Cannot set property v of #<Object> which has only a getter ``` 上面代碼中，`obj.v`只有取值器，沒有存值器，對它進行賦值就會報錯。 ### 禁止擴展的對象不可擴展嚴格模式下，對禁止擴展的對象添加新屬性，會報錯。 ```javascript 'use strict'; var obj = {}; Object.preventExtensions(obj); obj.v = 1; // Uncaught TypeError: Cannot add property v, object is not extensible ``` 上面代碼中，`obj`對象禁止擴展，添加屬性就會報錯。 ### eval、arguments 不可用作標識名嚴格模式下，使用`eval`或者`arguments`作為標識名，將會報錯。下面的語句都會報錯。 ```javascript 'use strict'; var eval = 17; var arguments = 17; var obj = { set p(arguments) { } }; try { } catch (arguments) { } function x(eval) { } function arguments() { } var y = function eval() { }; var f = new Function('arguments', "'use strict'; return 17;"); // SyntaxError: Unexpected eval or arguments in strict mode ``` ### 函數不能有重名的參數正常模式下，如果函數有多個重名的參數，可以用`arguments[i]`讀取。嚴格模式下，這屬于語法錯誤。 ```javascript function f(a, a, b) { 'use strict'; return a + b; } // Uncaught SyntaxError: Duplicate parameter name not allowed in this context ``` ### 禁止八進制的前綴0表示法正常模式下，整數的第一位如果是`0`，表示這是八進制數，比如`0100`等于十進制的64。嚴格模式禁止這種表示法，整數第一位為`0`，將報錯。 ```javascript 'use strict'; var n = 0100; // Uncaught SyntaxError: Octal literals are not allowed in strict mode. ``` ## 增強的安全措施嚴格模式增強了安全保護，從語法上防止了一些不小心會出現的錯誤。 ### 全局變量顯式聲明正常模式中，如果一個變量沒有聲明就賦值，默認是全局變量。嚴格模式禁止這種用法，全局變量必須顯式聲明。 ```javascript 'use strict'; v = 1; // 報錯，v未聲明 for (i = 0; i < 2; i++) { // 報錯，i 未聲明 // ... } function f() { x = 123; } f() // 報錯，未聲明就創建一個全局變量 ``` 因此，嚴格模式下，變量都必須先聲明，然后再使用。 ### 禁止 this 關鍵字指向全局對象正常模式下，函數內部的`this`可能會指向全局對象，嚴格模式禁止這種用法，避免無意間創造全局變量。 ```javascript // 正常模式 function f() { console.log(this === window); } f() // true // 嚴格模式 function f() { 'use strict'; console.log(this === undefined); } f() // true ``` 上面代碼中，嚴格模式的函數體內部`this`是`undefined`。這種限制對于構造函數尤其有用。使用構造函數時，有時忘了加`new`，這時`this`不再指向全局對象，而是報錯。 ```javascript function f() { 'use strict'; this.a = 1; }; f();// 報錯，this 未定義 ``` 嚴格模式下，函數直接調用時（不使用`new`調用），函數內部的`this`表示`undefined`（未定義），因此可以用`call`、`apply`和`bind`方法，將任意值綁定在`this`上面。正常模式下，`this`指向全局對象，如果綁定的值是非對象，將被自動轉為對象再綁定上去，而`null`和`undefined`這兩個無法轉成對象的值，將被忽略。 ```javascript // 正常模式 function fun() { return this; } fun() // window fun.call(2) // Number {2} fun.call(true) // Boolean {true} fun.call(null) // window fun.call(undefined) // window // 嚴格模式 'use strict'; function fun() { return this; } fun() //undefined fun.call(2) // 2 fun.call(true) // true fun.call(null) // null fun.call(undefined) // undefined ``` 上面代碼中，可以把任意類型的值，綁定在`this`上面。 ### 禁止使用 fn.callee、fn.caller 函數內部不得使用`fn.caller`、`fn.arguments`，否則會報錯。這意味著不能在函數內部得到調用棧了。 ```javascript function f1() { 'use strict'; f1.caller; // 報錯 f1.arguments; // 報錯 } f1(); ``` ### 禁止使用 arguments.callee、arguments.caller `arguments.callee`和`arguments.caller`是兩個歷史遺留的變量，從來沒有標準化過，現在已經取消了。正常模式下調用它們沒有什么作用，但是不會報錯。嚴格模式明確規定，函數內部使用`arguments.callee`、`arguments.caller`將會報錯。 ```javascript 'use strict'; var f = function () { return arguments.callee; }; f(); // 報錯 ``` ### 禁止刪除變量嚴格模式下無法刪除變量，如果使用`delete`命令刪除一個變量，會報錯。只有對象的屬性，且屬性的描述對象的`configurable`屬性設置為`true`，才能被`delete`命令刪除。 ```javascript 'use strict'; var x; delete x; // 語法錯誤 var obj = Object.create(null, { x: { value: 1, configurable: true } }); delete obj.x; // 刪除成功 ``` ## 靜態綁定 JavaScript 語言的一個特點，就是允許“動態綁定”，即某些屬性和方法到底屬于哪一個對象，不是在編譯時確定的，而是在運行時（runtime）確定的。嚴格模式對動態綁定做了一些限制。某些情況下，只允許靜態綁定。也就是說，屬性和方法到底歸屬哪個對象，必須在編譯階段就確定。這樣做有利于編譯效率的提高，也使得代碼更容易閱讀，更少出現意外。具體來說，涉及以下幾個方面。 ### 禁止使用 with 語句嚴格模式下，使用`with`語句將報錯。因為`with`語句無法在編譯時就確定，某個屬性到底歸屬哪個對象，從而影響了編譯效果。 ```javascript 'use strict'; var v = 1; var obj = {}; with (obj) { v = 2; } // Uncaught SyntaxError: Strict mode code may not include a with statement ``` ### 創設 eval 作用域正常模式下，JavaScript 語言有兩種變量作用域（scope）：全局作用域和函數作用域。嚴格模式創設了第三種作用域：`eval`作用域。正常模式下，`eval`語句的作用域，取決于它處于全局作用域，還是函數作用域。嚴格模式下，`eval`語句本身就是一個作用域，不再能夠在其所運行的作用域創設新的變量了，也就是說，`eval`所生成的變量只能用于`eval`內部。 ```javascript (function () { 'use strict'; var x = 2; console.log(eval('var x = 5; x')) // 5 console.log(x) // 2 })() ``` 上面代碼中，由于`eval`語句內部是一個獨立作用域，所以內部的變量`x`不會泄露到外部。注意，如果希望`eval`語句也使用嚴格模式，有兩種方式。 ```javascript // 方式一 function f1(str){ 'use strict'; return eval(str); } f1('undeclared_variable = 1'); // 報錯 // 方式二 function f2(str){ return eval(str); } f2('"use strict";undeclared_variable = 1') // 報錯 ``` 上面兩種寫法，`eval`內部使用的都是嚴格模式。 ### arguments 不再追蹤參數的變化變量`arguments`代表函數的參數。嚴格模式下，函數內部改變參數與`arguments`的聯系被切斷了，兩者不再存在聯動關系。 ```javascript function f(a) { a = 2; return [a, arguments[0]]; } f(1); // 正常模式為[2, 2] function f(a) { 'use strict'; a = 2; return [a, arguments[0]]; } f(1); // 嚴格模式為[2, 1] ``` 上面代碼中，改變函數的參數，不會反應到`arguments`對象上來。 ## 向下一個版本的 JavaScript 過渡 JavaScript 語言的下一個版本是 ECMAScript 6，為了平穩過渡，嚴格模式引入了一些 ES6 語法。 ### 非函數代碼塊不得聲明函數 ES6 會引入塊級作用域。為了與新版本接軌，ES5 的嚴格模式只允許在全局作用域或函數作用域聲明函數。也就是說，不允許在非函數的代碼塊內聲明函數。 ```javascript 'use strict'; if (true) { function f1() { } // 語法錯誤 } for (var i = 0; i < 5; i++) { function f2() { } // 語法錯誤 } ``` 上面代碼在`if`代碼塊和`for`代碼塊中聲明了函數，ES5 環境會報錯。注意，如果是 ES6 環境，上面的代碼不會報錯，因為 ES6 允許在代碼塊之中聲明函數。 ### 保留字為了向將來 JavaScript 的新版本過渡，嚴格模式新增了一些保留字（implements、interface、let、package、private、protected、public、static、yield等）。使用這些詞作為變量名將會報錯。 ```javascript function package(protected) { // 語法錯誤 'use strict'; var implements; // 語法錯誤 } ``` ## 參考鏈接 - MDN, [Strict mode](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode) - Dr. Axel Rauschmayer, [JavaScript: Why the hatred for strict mode?](http://www.2ality.com/2011/10/strict-mode-hatred.html) - Dr. Axel Rauschmayer，[JavaScript’s strict mode: a summary](http://www.2ality.com/2011/01/javascripts-strict-mode-summary.html) - Douglas Crockford, [Strict Mode Is Coming To Town](http://www.yuiblog.com/blog/2010/12/14/strict-mode-is-coming-to-town/) - [JavaScript Strict Mode Support](http://java-script.limewebs.com/strictMode/test_hosted.html)