JavaScript 嚴格模式
JavaScript 嚴格模式(strict mode)即在嚴格的條件下運作。
使用 "use strict" 指令
"use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。
它不是一條語句,而是一個字面量表達式,在 JavaScript 舊版中會被忽略。
"use strict" 的目的在於指定程式碼在嚴格條件下執行。
嚴格模式下你不能使用未宣告的變數。
#支援嚴格模式的瀏覽器: Internet Explorer 10 +、 Firefox 4 + Chrome 13+、 Safari 5.1+、 Opera 12+。 |
嚴格模式宣告
嚴格模式透過在腳本或函數的頭部新增 "use strict"; 表達式來宣告。
實例中我們可以在瀏覽器按下 F12 (或點選"工具>更多工具>開發者工具") 開啟偵錯模式,查看報錯資訊。
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h1>使用 "use strict":</h1> <h3>不允许使用未定义的变量。</h3> <p>浏览器按下 F12 开启调试模式,查看报错信息。</p> <script> "use strict"; x = 3.14; // 报错 (x 未定义) </script> </body> </html>
#運行實例»##點擊"運行實例"按鈕查看線上實例
#
執行實例»
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h2>全局 "use strict" 声明.</h2> <p>浏览器按下 F12 开启调试模式,查看报错信息。</p> <script> "use strict"; myFunction(); function myFunction() { y = 3.14; // 报错 (y 未定义) } </script> </body> </html>
執行實例»
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p>在函数内使用 "use strict" 只在函数内报错。 </p> <p>浏览器按下 F12 开启调试模式,查看报错信息。</p> <script> x = 3.14; // 不报错 myFunction(); function myFunction() { "use strict"; y = 3.14; // 报错 (y 未定义) } </script> </body> </html>
運行實例»
- 點擊"運行實例"按鈕查看線上實例
- 為什麼使用嚴格模式:
- 消除Javascript語法的一些不合理、不嚴謹之處,減少一些怪異行為;
- 消除程式碼運作的一些不安全之處,保證程式碼運行的安全性; ##提高編譯器效率,增加運行速度;
為未來新版本的Javascript做好鋪墊。
"嚴格模式"體現了Javascript更合理、更安全、更嚴謹的發展方向,包括IE 10在內的主流瀏覽器,都已經支援它,許多大專案已經開始全面擁抱它。 另一方面,同樣的程式碼,在"嚴格模式"中,可能會有不一樣的運行結果;一些在"正常模式"下可以運行的語句,在"嚴格模式"下將不能運行。掌握這些內容,有助於更細緻、深入理解Javascript,讓你變成更好的程式設計師。
嚴格模式的限制不允許使用未宣告的變數:
實例
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h1>使用 "use strict":</h1> <h3>不允许使用未定义的变量。</h3> <p>浏览器按下 F12 开启调试模式,查看报错信息。</p> <script> "use strict"; x = 3.14; // 报错 (x 未定义) </script> </body> </html>
點擊"運行實例" 按鈕查看線上實例 |
---|
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h1>使用 "use strict":</h1> <h3>不允许使用为定义的对象。</h3> <p>浏览器按下 F12 开启调试模式,查看报错信息。</p> <script> "use strict"; x = {p1:10, p2:20}; // 报错 (x 未定义) </script> </body> </html>
#執行實例»
#點擊"運行實例" 按鈕查看線上實例
不允許刪除變數或物件。
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h1>使用 "use strict":</h1> <h3>不允许删除变量或对象。</h3> <p>浏览器按下 F12 开启调试模式,查看报错信息。</p> <script> "use strict"; var x = 3.14; delete x; </script> </body> </html>
運行實例»
點擊"運行實例" 按鈕查看線上實例
不允許刪除函數。
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h1>使用 "use strict":</h1> <h3>不允许删除函数。</h3> <p>浏览器按下 F12 开启调试模式,查看报错信息。</p> <script> "use strict"; function x(p1, p2) {}; delete x; </script> </body> </html>
運行實例»
點擊"運行實例" 按鈕查看線上實例
不允許變數重名:
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h1>使用 "use strict":</h1> <h3>不允许变量重名。</h3> <p>浏览器按下 F12 开启调试模式,查看报错信息。</p> <script> "use strict"; function x(p1, p1) {}; // 报错 </script> </body> </html>
#運行實例»##點擊"運行實例" 按鈕查看線上實例
實例#
點擊"運行實例" 按鈕查看線上實例不允許使用轉義字元:
實例<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h1>使用 "use strict":</h1> <h3>不允许使用八进制。</h3> <p>浏览器按下 F12 开启调试模式,查看报错信息。</p> <script> "use strict"; var x = 010; // 报错 </script> </body> </html>##執行實例»
點擊"運行實例" 按鈕查看線上實例不允許使用轉義字元:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h1>使用 "use strict":</h1>
<h3>不允许使用转义字符。</h3>
<p>浏览器按下 F12 开启调试模式,查看报错信息。</p>
<script>
"use strict";
var x = 0; // 报错
</script>
</body>
</html>
點擊"運行實例"按鈕查看線上實例 不允許對只讀屬性賦值:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h1>使用 "use strict":</h1>
<h3>不允许对只读属性赋值。</h3>
<p>浏览器按下 F12 开启调试模式,查看报错信息。</p>
<script>
"use strict";
var obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});
obj.x = 3.14; // 报错
</script>
</body>
</html>
運行實例»點擊"運行實例" 按鈕查看線上實例不允許對一個使用getter方法讀取的屬性進行賦值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h1>使用 "use strict":</h1>
<h3>不允许对一个使用getter方法读取的属性进行赋值。</h3>
<p>浏览器按下 F12 开启调试模式,查看报错信息。</p>
<script>
"use strict";
var obj = {get x() {return 0} };
obj.x = 3.14; // 报错
</script>
</body>
</html>
#運行實例»點擊"運行實例" 按鈕查看線上實例不允許刪除一個不允許刪除的屬性:
#<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h1>使用 "use strict":</h1>
<h3>不允许删除一个不允许删除的属性值。</h3>
<p>浏览器按下 F12 开启调试模式,查看报错信息。</p>
<script>
"use strict";
delete Object.prototype; // 报错
</script>
</body>
</html>
執行實例»##點擊"運行實例" 按鈕查看線上實例
實例
運行實例»點擊"運行實例"按鈕查看線上實例
#變數名稱不能使用"arguments" 字串:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h1>使用 "use strict":</h1> <h3>变量名不能使用 "eval" 字符串。</h3> <p>浏览器按下 F12 开启调试模式,查看报错信息。</p> <script> "use strict"; var eval = 3.14; // 报错 </script> </body> </html>
運行實例»點擊"運行實例"按鈕查看線上實例
實例
運行實例»
運行實例»
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h1>使用 "use strict":</h1> <h3>变量名不能使用 "arguments" 字符串。</h3> <p>浏览器按下 F12 开启调试模式,查看报错信息。</p> <script> "use strict"; var arguments = 3.14; // 报错 </script> </body> </html>
#不允許使用以下這種語句:
#實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h1>使用 "use strict":</h1> <h3>不允许使用以下这种语句。</h3> <p>浏览器按下 F12 开启调试模式,查看报错信息。</p> <script> "use strict"; with (Math){x = cos(2)}; // 报错 </script> </body> </html>
運行實例»
點擊"運行實例"按鈕查看在線實例
由於一些安全原因,在作用域eval() 建立的變數不能被呼叫:
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h1>使用 "use strict":</h1> <h3>由于一些安全原因,在作用域 eval() 创建的变量不能被调用。</h3> <p>浏览器按下 F12 开启调试模式,查看报错信息。</p> <script> "use strict"; eval ("var x = 2"); alert (x); // 报错 </script> </body> </html>
運行實例»
點擊"運行實例" 按鈕查看線上實例
禁止this關鍵字指向全域物件。
function f(){ return !this; } // 返回false,因为"this"指向全局对象,"!this"就是false function f(){ "use strict"; return !this; } // 返回true,因为严格模式下,this的值为undefined,所以"!this"为true。
因此,使用建構子時,如果忘了加new,this不再指向全域對象,而是報錯。
function f(){ "use strict"; this.a = 1; }; f();// 报错,this未定义
保留關鍵字
為了將來Javascript的新版本過渡,嚴格模式新增了一些保留保留關鍵字:
implements
interface
let
package
-
private
protected
#public
static
- ##yield
實例
運行實例»點擊"運行實例" 按鈕查看線上實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h1>使用 "use strict":</h1> <h3>严格模式不允许使用保留关键字。</h3> <p>浏览器按下 F12 开启调试模式,查看报错信息。</p> <script> "use strict"; var public = 1500; // 报错 </script> </body> </html>
運行實例»點擊"運行實例" 按鈕查看線上實例
#"use strict" 指令只執行出現在腳本或函數的開頭。 |
---|