A detailed summary of the front-end JavaScript ‘strict mode’

JQuery is in ‘use strict’ mode. So I went to look up some data to supplement my understanding of the strict model. The following is a reference to javascript Advanced Programming (3rd edition).

1. Strict Mode

1.1 What is strict Mode

Strict mode was first introduced with ECMAScript5. Strict mode allows strict global or local error condition detection within a function.

❝

Introduction to the history of ECMAScript by Ruan Yifeng

❞

1.2 Benefits of using strict patterns

Errors in your code can be known early, and ECMAScript behavior that can lead to programming errors can be caught early.

1.3 Browsers that support strict mode

It is important to understand the rules of strict patterns, and browsers that support strict patterns have

• IE 10+
• Firefox 4+
• Safari 5.1 +
• Chrome

2. How to use strict mode

When we want to write code in strict mode, we can use pragma, which is a string that is not assigned to any variables: ‘use strict’. “This needs to be in the first sentence of wanting to be in strict mode.”

This syntax is backward compatible with javascript engines that do not support strict schemas.

• Engines that support strict mode start this mode
• Engines that do not support this pattern ignore this compilation instruction when encountering an unassigned string literal

If this compilation instruction is given in global scope, the entire script will be in strict mode. So that’s where this compile instruction goes, as long as there’s javascript code, it puts it in strict mode.

Use strict patterns in functions. Putting ‘use strict’ in the first place does what it does to the whole function

function fn(){

'use strict'

  // The code to implement

}

Copy the code

❝

Let a = 1; let a = 1; The ones on the left are called variables, and the ones on the right are called literals

❞

3. The difference between using strict mode and not using strict mode in pages

3.1 variable

In strict mode, there are restrictions on when and how variables are created.

3.1.1 Accidental creation of global variables is not allowed

Difference between undeclared variables in strict mode and non-strict mode:

• Non-strict mode: even ifmessageNot in front of thevarKeyword, also not defined as a property of the global object; It can also be created as a global variable
• Strict mode: If you assign a value to an undeclared variable or the variable name is spelled incorrectly. That code is thrown at execution timeReferenceErrorThis error

message = 'Hello World! '

console.log(window.message)  //'Hello World! '

Copy the code

'use strict'

message = 'Hello World! '

console.log(window.message);  //Uncaught ReferenceError: message2 is not defined

Copy the code

3.1.2 The delete operator cannot be called on variables

• Non-strict mode: AlloweddeleteDelete the element, but it will statically default to fail.
• Strict mode: Deleting variables also causes errors

var color = 'red';

delete color;

console.log(color); //'red'

Copy the code

'use strict'

var color = 'red';

delete color;

console.log(color); //Uncaught SyntaxError: Delete of an unqualified identifier in strict mode.

Copy the code

3.1.3 Restrictions on variable names

You cannot use implements, interface, let, package, private, protected, public, static, and yield as variable names. These are reserved words and may be used in future versions of ECMAScript.

• Non-strict mode: the above keyword does not generate an error, but it is best not to use it (there is a clause in the variable naming convention that cannot use JS keyword and reserved word)
• In strict mode: Using the above identifiers as variable names causes syntax errors.

var implements=1;

console.log(implements); / / 1

Copy the code

'use strict'

var implements=1;

console.log(implements);//Uncaught SyntaxError: Unexpected strict mode reserved word

Copy the code

3.2 object

Manipulating objects in strict mode is more likely to cause errors than in non-strict mode.

• Silent failure in non-strict mode
• An error is thrown in strict mode

Therefore, using strict patterns in development increases the likelihood of early detection of errors.

3.2.1 Manipulating an object’s properties will cause an error in the following cases:

• Assigning a read-only attribute throwsTypeError;
• This works with a non-configurable video systemdeleteThe operator throwsTypeError;
• Adding properties to nonextensible objects throwsTypeError.

"use strict";



// Assign a value to an unwritable attribute

var obj1 = {};

Object.defineProperty(obj1, "x", { value: 42.writable: false });

obj1.x = 9; // Throws TypeError



// Assign a read-only attribute

var obj2 = { get x() { return 17; }};

obj2.x = 5; // Throws TypeError



// Assign a new attribute to an unextensible object

var fixed = {};

Object.preventExtensions(fixed);

fixed.newProp = "ohai"; // Throws TypeError

Copy the code

Another limitation of using objects has to do with declaring objects through object literals. Attribute names must be unique when using object literals.

“In ECMAScript6, this is no longer a problem. Strict mode is the same as non-strict mode, and no errors are reported“

• Non-strict mode: No errors, the second property prevails
• Strict mode: Throws syntax errors

"use strict";

var person = { 

  name: "Nicholas".

  name: "Greg" 

}; 

Copy the code

The object person here has two properties, both named Name. In non-strict mode, the name property value of the Person object is the second, and in strict mode, such code would result in syntax errors.

3.3 the function

3.3.1 Parameters of named functions must be unique

• Non-strict mode: No errors, only the second parameter can be accessed. Only the second argument can be accessed through the argument name. To access the first argument, you need to access the arguments object
• Strict mode: Throws syntax errors

function sum(num,num){

  / / the function body

  return num + num; Return arguments[0] + num;

}

console.log(sum(10.20)); / / 40

Copy the code

'use strict';

function sum(num,num){

  / / the function body

  return num + num;

}

console.log(sum(10.20)); // Uncaught SyntaxError: Duplicate parameter name not allowed in this context

Copy the code

3.3.2 Modifying the mapping between values of namespace parameters and Arguments

• Non-strict mode: Changes are reflectedargumentsIn the
• Strict mode: Changes are not reflectedargumentsIn the

function sum(num){

   num=20;

   console.log(arguments[0]); / / 20

   console.log(num);  / / 20

}

sum(10);

Copy the code

'use strict';

function sum(num){

   num=20;

   console.log(arguments[0]); / / 10

   console.log(num);  / / 20

}

sum(10);

Copy the code

In the above code, the function sum() has only one named argument, num. This function is called with an argument 10, which is assigned to num. Inside the function, num is changed to 20. In non-strict mode, this modification also changes the value of arguments[0], but in strict mode, the value of arguments[0] is still the passed value.

3.3.3 Eliminated arguments.callee and arguments.caller

• In non-strict mode: one of these attributes refers to the function itself and the other refers to the calling function.
• In strict mode: TypeError is raised for any property accessed.

function factorial(num) {

   if (num <= 1) {

      return 1;

   } else {

      return num * arguments.callee(num - 1)

   }

}

var result = factorial(5);

console.log(result); / / 120 = > 5 * 4 * 3 * 2 * 1

Copy the code

'use strict';

function factorial(num) {

   if (num <= 1) {

      return 1;

   } else {

      return num * arguments.callee(num - 1)

   }

}

var result = factorial(5);

console.log(result); / / 120 = > 5 * 4 * 3 * 2 * 1

Copy the code

Arguments. callee is deprecated; properties are used to call themselves when a function is executed (the idea of recursion). Although arguments.caller is no longer available, you can also use function. caller.

3.3.4 Restrictions on function names

Like variables, strict mode limits function names, disallowing implements, interface, let, package, private, protected, public, static, and yield.

3.3.5 Syntax Errors May Occur when declaring functions in if/for statements:

• Non-strict mode: promotes the function toif / forStatements outside
• Strict mode: Throws syntax errors

if (true) {

   function f() { console.log(1); }

}

f(); // The function executes output 1



for (var i = 0; i < 5; i++) {

   function f2() {console.log(1); }

   f2();  // Output 5 times 1

}

f2();  / / output 1

Copy the code

"use strict";

if (true) {

   function f() { console.log(1); }

}

f(); //Uncaught ReferenceError: f is not defined at



for (var i = 0; i < 5; i++) {

   function f2() {console.log(1); }

   f2();  // Output 5 times 1

}

f2();  //Uncaught ReferenceError: f2 is not defined at

Copy the code

3.4 the eval ()

The much-maligned eval() function has also been improved in strict mode. The biggest change is that it no longer creates variables or functions in the inclusion context.

3.4.1 Creating variables using eval()

• Non-strict mode: a dialog box is displayed indicating 10
• Strict mode: ReferenceError is raised when alert(x) is called

function doSomething(){ 

  eval("var x=10"); 

  alert(x); 

}

doSomething();  // Function execution will pop up 10

Copy the code

'use strict';

function doSomething(){ 

  eval("var x=10"); 

  alert(x); 

}

doSomething(); Uncaught ReferenceError: x is not defined at doSomething

Copy the code

In non-strict mode, the above code creates a local variable x in the function doSomething(), and alert() also displays the value of that variable. But in strict mode, calling eval() in the doSomething() function does not create the variable X, so calling alert() causes a ReferenceError to be thrown because x is not defined.

3.4.2

Variables and functions can be declared in eval(), but these variables or functions are valid only in the special scope in which they are evaluated, and are then destroyed. Therefore, the following code can run without problem:

"use strict"; 

var result = eval("var x=10, y=11; x+y"); 

alert(result); / / 21

Copy the code

Here we declare the variables x and y in eval(), and then add them together to return their sum. Thus, the value of the result variable is 21, which is the result of adding x and y. When alert() is called, the value of the result variable is still valid, even though x and y no longer exist.

3.5 the eval and the arguments

Strict mode already explicitly disallows the use of eval and arguments as identifiers, as well as reading and writing their values.

3.5.1 Refer to Eval and arguments as variables

• Non-strict mode: No problem, no mistakes
• Strict mode: Throws syntax errors

var eval = 10; 

var arguments = "Hello world!";

console.log(eval.arguments); //10 "Hello world!"

Copy the code

'use strict'

var eval = 10; 

var arguments = "Hello world!";

console.log(eval.arguments); //Uncaught SyntaxError: Unexpected eval or arguments in strict mode

Copy the code

3.5.2 In non-strict mode, eval can be overridden and arguments can be assigned. In strict mode, however, this will result in syntax errors. The inability to use them as identifiers means that syntax errors will be thrown in any of the following ways:

• Use var declarations;
• Assign another value;
• Try to modify the included values, such as ++;
• Used as a function name;
• Used as a named function parameter;
• Used as an exception name in try-catch statements.

3.6 this inhibition

One of the biggest security issues in JavaScript, and one of the most confusing, is how to suppress the value of this in certain situations.

• Null or undefined values are converted to global objects when the apply() or call() methods of functions are used in non-strict mode.
• In strict mode, the function’s this value is always the specified value, no matter what the specified value is.

3.6.1 Accessing Properties

• Non-strict mode: Access global properties
• Strict mode: Throws an error because the value of this is null

var color = "red";

function displayColor() {

   console.log(this.color);

}

displayColor.call(null); //'red'

Copy the code

'use strict';

var color = "red";

function displayColor() {

   console.log(this.color);

}

displayColor.call(null); //Uncaught TypeError: Cannot read property 'color' of null at displayColor

Copy the code

The above code passes null to displaycolor.call (), which in non-strict mode means that the function’s this value is a global object. The result is the output “red”. In strict mode, the function’s this value is null, so an error is thrown when the attribute of null is accessed.

3.7 Other Changes

3.7.1 Statement usage of with

The first is the abandonment of the with statement.

• In non-strict mode: The with statement can change the path to parse identifiers, allowing
• In strict mode: with is simplified, throw syntax

with (location) {

  console.log(href);/ / http://127.0.0.1:5501/%E7%AC%AC%E5%85%AD%E5%91%A8/%E7%AC%AC%E4%BA%8C%E5%A4%A9/%E4%B8%A5%E6%A0%BC%E6%A8%A1%E5%BC%8F.htm l

}  

Copy the code

'use strict'

with (location) {

  console.log(href); //Uncaught SyntaxError: Strict mode code may not include a with statement

} 

Copy the code

Therefore, using with in strict mode results in syntax errors

3.7.2 Using octal literals

• Non-strict mode: The value is 8
• Strict mode: Throws syntax errors

var value = 010;

console.log(value);/ / 8

Copy the code

'use strict'

var value = 010;

console.log(value);//Uncaught SyntaxError: Octal literals are not allowed in strict mode.

Copy the code

4. Refer to books/websites

This article references javascript Advanced Programming (3rd edition) and the MDN web site. The content has been summarized, each of the differences are shown in the form of code, I hope to be helpful to the majority of friends. If you like this article, please give it a thumbs up. You can keep an eye on that