JavaScript 严格模式

JavaScript 严格模式,即是 "use strict";

定义 JavaScript 代码应该以“严格模式”执行。


"use strict" 指令

"use strict" 是 JavaScript 1.8.5 中的新指令(ECMAScript version 5)。

它不算一条语句,而是一段文字表达式,更早版本的 JavaScript 会忽略它。

"use strict"; 的作用是指示 JavaScript 代码应该以“严格模式”执行。

在严格模式中,您无法,例如,使用未声明的变量。

以下版本的浏览器支持严格模式:

  • 版本 10 以后的 IE
  • 版本 4 以后的 Firefox
  • 版本 13 以后的 Chrome
  • 版本 5.1 以后的 Safari
  • 版本 12 以后的 Opera

声明严格模式

通过在脚本或函数的开头添加 "use strict"; 来声明严格模式。

在脚本开头进行声明,拥有全局作用域(脚本中的所有代码均以严格模式来执行):

  1. <script>
  2. "use strict";
  3. x = 3.14; // 会引发错误(x 未定义)
  4. </script>

在函数中声明严格模式,拥有局部作用域(只有函数中的代码以严格模式执行):

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <p>函数中的“use strict”只会导致该函数出错。</p>
  5. <p>在浏览器中激活调试(F12)以查看错误报告。</p>
  6. <script>
  7. x = 3.14; // 不会引发错误
  8. myFunction();
  9. function myFunction() {
  10. "use strict";
  11. y = 3.14; // 会引发错误(y 未定义)
  12. }
  13. </script>
  14. </body>
  15. </html>

"use strict"; 语法

声明严格模式的语法被设计为兼容更早版本的 JavaScript。

编译 JavaScript 程序中的数值文字(比如 4+5)或字符串文字("Bill Gates")不会有负面效果。它只会编译为不存在的变量然后消失。

所有 "use strict"; 只会对“理解”其含义的新编译器产生影响。


为什么使用严格模式?

严格模式使我们更容易编写“安全的” JavaScript。

严格模式把之前可接受的“坏语法”转变为真实的错误。

举例来说,在普通的 JavaScript 中,错打变量名会创建新的全局变量。在严格模式中,此举将抛出错误,这样就不可能意外创建全局变量。

在普通 JavaScript 中,如果向不可写属性赋值,开发者不会得到任何错误反馈。

在严格模式中,向不可写的、只能读取的、不存在的属性赋值,或者向不存在的变量或对象赋值,将抛出错误。


严格模式中不允许的事项

在不声明变量的情况下使用变量,是不允许的:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h3>不允许使用变量而不声明它。</h3>
  5. <p>在浏览器中激活调试(F12)以查看错误报告。</p>
  6. <script>
  7. "use strict";
  8. x = 3.14; // 会引发错误(x 未定义)
  9. </script>
  10. </body>
  11. </html>

对象也是变量

在不声明对象的情况下使用对象也是不允许的:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h3>不允许使用对象而不声明它。</h3>
  5. <p>在浏览器中激活调试(F12)以查看错误报告。</p>
  6. <script>
  7. "use strict";
  8. x = {p1:10, p2:20}; // 会引发错误(x 未定义)
  9. </script>
  10. </body>
  11. </html>

删除变量(或对象)是不允许的:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h3>不允许删除变量(或对象)。</h3>
  5. <p>在浏览器中激活调试(F12)以查看错误报告。</p>
  6. <script>
  7. "use strict";
  8. var x = 3.14;
  9. delete x; // 会引发错误
  10. </script>
  11. </body>
  12. </html>

删除函数是不允许的:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h3>不允许删除函数。</h3>
  5. <p>在浏览器中激活调试(F12)以查看错误报告。</p>
  6. <script>
  7. "use strict";
  8. function x(p1, p2) {};
  9. delete x; // 会引发错误
  10. </script>
  11. </body>
  12. </html>

重复参数名是不允许的:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h3>不允许复制参数名称。</h3>
  5. <p>在浏览器中激活调试(F12)以查看错误报告。</p>
  6. <script>
  7. "use strict";
  8. function x(p1, p1) {}; // 会引发错误
  9. </script>
  10. </body>
  11. </html>

八进制数值文本是不允许的:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h3>不允许使用八进制数字字面量。</h3>
  5. <p>在浏览器中激活调试(F12)以查看错误报告。</p>
  6. <script>
  7. "use strict";
  8. var x = 010; // 会引发错误
  9. </script>
  10. </body>
  11. </html>

转义字符是不允许的:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h3>不允许使用八进制转义字符。</h3>
  5. <p>在浏览器中激活调试(F12)以查看错误报告。</p>
  6. <script>
  7. "use strict";
  8. var x = "\010"; // 会引发错误
  9. </script>
  10. </body>
  11. </html>

写入只读属性是不允许的:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>不允许写入只读属性。</h2>
  5. <p>在浏览器中激活调试(F12)以查看错误报告。</p>
  6. <script>
  7. "use strict";
  8. var obj = {};
  9. Object.defineProperty(obj, "x", {value:0, writable:false});
  10. obj.x = 3.14; // 会引发错误
  11. </script>
  12. </body>
  13. </html>

写入只能获取的属性是不允许的:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>不允许写入 get-only 属性。</h2>
  5. <p>在浏览器中激活调试(F12)以查看错误报告。</p>
  6. <script>
  7. "use strict";
  8. var obj = {get x() {return 0} };
  9. obj.x = 3.14; // 会引发错误
  10. </script>
  11. </body>
  12. </html>

删除不可删除的属性是不允许的:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h3>不允许删除 undeletable 属性。</h3>
  5. <p>在浏览器中激活调试(F12)以查看错误报告。</p>
  6. <script>
  7. "use strict";
  8. delete Object.prototype; // 会引发错误
  9. </script>
  10. </body>
  11. </html>

字符串 "eval" 不可用作变量:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h3>字符串“eval”不能用作变量。</h3>
  5. <p>在浏览器中激活调试(F12)以查看错误报告。</p>
  6. <script>
  7. "use strict";
  8. var eval = 3.14; // 会引发错误
  9. </script>
  10. </body>
  11. </html>

字符串 "arguments" 不可用作变量:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h3>字符串“arguments”不能用作变量。</h3>
  5. <p>在浏览器中激活调试(F12)以查看错误报告。</p>
  6. <script>
  7. "use strict";
  8. var arguments = 3.14; // 会引发错误
  9. </script>
  10. </body>
  11. </html>

with 语句是不允许的:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h3>不允许使用 with 语句。</h3>
  5. <p>在浏览器中激活调试(F12)以查看错误报告。</p>
  6. <script>
  7. "use strict";
  8. with (Math){x = cos(2)}; // 会引发错误
  9. </script>
  10. </body>
  11. </html>

处于安全考虑,不允许 eval() 在其被调用的作用域中创建变量:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h3>出于安全原因,不允许 eval() 在调用它的作用域内创建变量。</h3>
  5. <p>在浏览器中激活调试(F12)以查看错误报告。</p>
  6. <script>
  7. "use strict";
  8. eval ("var x = 2");
  9. alert (x); // This will cause an error
  10. </script>
  11. </body>
  12. </html>

在类似 f() 的函数调用中,this 的值是全局对象。在严格模式中,现在它成为了 undefined。


对未来的保障

严格模式中不允许使用为未来预留的关键词。它们是:

  • implements
  • interface
  • let
  • package
  • private
  • protected
  • public
  • static
  • yield
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h3>严格模式中不允许使用为未来预留的关键词:</h3>
  5. <p>在浏览器中激活调试(F12)以查看错误报告。</p>
  6. <script>
  7. "use strict";
  8. var public = 1500; // 会引发错误
  9. </script>
  10. </body>
  11. </html>