JavaScript Strict Mode


JavaScript strict mode is to run under strict conditions.


Use The "use strict" Directive

The "use strict" directive was added 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 a use strict ; expression to the head of a 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.

Screenshot 2021-12-03 162448.png

You can also view it by right-clicking the mouse and selecting "Check" . The Gif diagram is shown as follows:

Screenshot 2021-12-03 162706.png

Example

"use strict";
x = 3.14; // error (x is not defined)

 Try It! 

Example

"use strict";
myFunction();
function myFunction() {
     y = 3.14; // error (y is not defined)
}

 Try It! 

The declaration inside the function is local scope (strict mode is used inside the function):

Example

x = 3.14; // No error is reported
myFunction();

function myFunction() {
    "use strict";
     y = 3.14; // error (y is not defined)
}

 Try It! 


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 operation;

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

  • Pave the way for the new version of Javascript in the future.

"Strict mode" reflects the more reasonable, safer, and more rigorous development direction of Javascript. Mainstream browsers, including IE 10, have already supported it, and many major projects have begun to embrace it in an all-round way.

On the other hand, the same code may have different results in "strict mode"; some statements that can be run in "normal mode" will not run in "strict mode". 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:

"use strict";
x = 3.14; // error (x is not defined)

Try It! 

NoteThe object is also a variable.

"use strict";
x = (p1:10, p2:20); // error (x is not defined)

 Try It! 

It is not allowed to delete variables or objects.

"use strict";
var x = 3.14;
delete x; // error

 Try It!

It is not allowed to delete functions.

"use strict";
function x(p1, p2) {};
delete x; // error

 Try It! 

Duplicate variable names are not allowed:

"use strict";
function x(p1, p1) {}; // report an error

Try It! 

Octal is not allowed:

"use strict";
var x = 010; // error

 Try It! 

Escape characters are not allowed:

"use strict";
var x = \010; // error

 Try It! 

Assignment of read-only attributes is not allowed:

"use strict";
var obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});

obj.x = 3.14; // report an error

 Try It! 

It is not allowed to assign a value to a property read using the getter method

"use strict";
var obj = {get x() {return 0} };

obj.x = 3.14; // report an error

 Try It! 

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

"use strict";
delete Object.prototype; // report an error

 Try It! 

Variable names cannot use "eval" strings:

"use strict";
var eval = 3.14; // report an error

 Try It! 

The variable name cannot use the "arguments" string:

"use strict";
var arguments = 3.14; // error

 Try It! 

The following statements are not allowed:

"use strict";
with (Math)(x = cos(2)); // error

 Try It! 

For some security reasons, variables created in the scope of eval() cannot be called:

"use strict";
eval ("var x = 2");
alert (x); // report an error

 Try It! 

The this keyword is forbidden to point to the global object.

function f(){
    return !this;
}
// return false, because "this" points to the global object, "!this" is false

function f(){
    "use strict";
    return !this;
}
// Return true, because in strict mode, the value of this is undefined, so "!this" is true.      

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

function f(){
    "use strict";
    this.a = 1;
};
f();// An error is reported, this is not defined

Reserved Keywords

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

  • implements

  • interface

  • let

  • package

  • private

  • protected

  • public

  • static

  • yield

"use strict";
var public = 1500; // report an error

 Try It! 

NoteThe "use strict" directive is only allowed to appear at the beginning of a script or function.