JavaScript strict mode


JavaScript strict mode (strict mode) runs under strict conditions.

Use the "use strict" directive

The "use strict" directive is new in JavaScript 1.8.5 (ECMAScript5).

It is not a statement, but a literal expression, which will be ignored in older versions of JavaScript.

The purpose of "use strict" is to specify that the code is executed under strict conditions.

You cannot use undeclared variables in strict mode.


NoteBrowsers that support strict mode:
Internet Explorer 10+, Firefox 4 + Chrome 13+, Safari 5.1+, Opera 12+.

Strict mode declaration

Strict mode is declared by adding the "use strict"; expression at the head of the script or function.

In the example, we can press F12 in the browser (or click "Tools>More Tools>Developer Tools") to turn on the debugging mode and view the error message.


Instance

<!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>

Run Instance»

Click the "Run Instance" button View online instance


Instance

<!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>

Run instance»

Click the "Run Instance" button to view the online instance

The declaration inside the function is a local scope (only use strict mode within the function):

Example

<!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>

Run Instance»

Click the "Run Instance" button to view the online instance

Why use strict mode:

  • Eliminate some unreasonable and imprecise aspects of Javascript syntax, and reduce some weird behaviors;

  • Eliminate some unsafe aspects of code operation, and ensure The safety of code running;

  • Improve the efficiency of the compiler and increase the running speed;

  • pave the way for new versions of Javascript in the future.

"Strict Mode" reflects the more reasonable, safer and more rigorous development direction of Javascript. Mainstream browsers including IE 10 already support it, and many large projects have already supported it. Start embracing it fully.

On the other hand, the same code may have different running results in "strict mode"; some statements that can be run in "normal mode" will not be able to be run in "strict mode" run. Mastering these contents will help you understand Javascript in more detail and make you a better programmer.

Strict mode restrictions

Undeclared variables are not allowed:

Examples

<!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>

Run Instance»

Click the "Run Instance" button to view the online instance

NoteThe object is also a variable.

Instance

<!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>

Run Instance»

Click the "Run Instance" button to view the online instance

Deletion of variables or objects is not allowed.

Instance

<!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>

Run Instance»

Click the "Run Instance" button to view the online instance

Deletion of functions is not allowed.

Instance

<!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>

Run Instance»

Click the "Run Instance" button to view the online instance

Duplicate variable names are not allowed:

Instance

<!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>

Run Instance»

Click the "Run Instance" button View online instance

Octal is not allowed:

Instance

<!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>

Run instance»

Click the "Run Instance" button to view the online instance

Escape characters are not allowed:

Instance

<!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>

Run Instance»

Click the "Run Instance" button to view the online instance

Assignment of read-only attributes is not allowed:

Instance

<!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>

Run instance»

Click the "Run instance" button to view the online instance

Does not allow reading using the getter method Assign values ​​to the attributes

Instance

<!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>

Run instance»

Click the "Run instance" button to view the online instance

Not allowed to delete an attribute that is not allowed to be deleted:

Instance

<!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>

Running instance»

Click the "Run Instance" button to view the online instance

Variable names cannot use the "eval" string:

Instance

<!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>

Run instance»

Click the "Run instance" button to view the online instance

The variable name cannot use "arguments" string:

Example

<!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>

Run Instance»

Click the "Run Instance" button to view the online instance

The following statements are not allowed:

Instance

<!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>

Run Instance»

Click the "Run Instance" button to view the online instance

Due to some security reasons, in Variables created by scope eval() cannot be called:

Instance

<!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>

Run instance»

Click "Run" Instance" button to view online instances

This keyword is prohibited from pointing to the global object. 

function f(){
	return !this;
} 
// 返回false，因为"this"指向全局对象，"!this"就是false

function f(){ 
	"use strict";
	return !this;
} 
// 返回true，因为严格模式下，this的值为undefined，所以"!this"为true。

Therefore, when using the constructor, if you forget to add new, this will no longer point to the global object, but an error will be reported. 

function f(){
	"use strict";
	this.a = 1;
};
f();// 报错，this未定义

Reserved Keywords

In order to transition to new versions of Javascript in the future, strict mode has added some new reserved keywords:

  • implements

  • interface

  • let

  • package

  • private

  • protected

  • public

  • static

  • yield

Instance

<!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>

Run instance»

Click "Run" Instance" button to view online examples


##"use strict" command only appears when running at the beginning of a script or function.
Note