Detailed explanation of Strict mode in JavaScript

Introduction

In ES5, strict mode was introduced, which we can call strict mode. The corresponding sloppy mode can be called non-strict mode.

Strict mode is not a subset of non-strict mode. On the contrary, strict mode has some semantic differences from non-strict mode, so we must conduct rigorous testing during use. To ensure that the execution of the program in strict mode is consistent with the execution in non-strict mode.

Using Strict mode

Strict mode changes some of the behavior of JavaScript, which we will explain in detail in the next section.

Let’s take a look at how to use strict mode.

Strict mode is mainly used in a complete script or function, and does not apply to block {}. If you use strict mode in a block, it will not take effect.

In addition, the code in eval, the Function code, the event handler attribute, and the string passed to WindowTimers.setTimeout() can all be considered a complete script. We can use Strict mode in it.

If you use strict mode in a script, you can add "use strict" directly at the top of the script:

// Strict mode for the entire script 'use strict';
var v = "Hi! I'm a strict mode script!";

Similarly, we can also use strict mode in function:

function strict() {
  // Function's strict mode 'use strict';
  function nested() { return 'And so am I!'; }
  return "Hi! I'm a strict mode function! " + nested();
}
function notStrict() { return "I'm not strict."; }

If you are using modules introduced in ES6, then the modules are already in strict mode by default, and we do not need to use "use strict" additionally:

function myModule() {
    // The default is strict mode}
export default myModule;

New features of strict mode

The strict mode has some differences in syntax and runtime performance compared to the non-strict mode. Next, let's take a look at them one by one.

Force exception to be thrown

In js, there are many cases where the operation may be wrong, but due to the characteristics of the language, no exception is thrown, resulting in the final running result not being what you expected.

If strict mode is used, an exception will be thrown directly.

For example, in strict mode, undefined global variables are not allowed:

'use strict';

globalVar = 10; //ReferenceError: globalVar is not defined

This can actually avoid problems caused by typing the wrong variable name by mistake.

Let me look at some other examples:

'use strict';

// Assign to a non-writable global variable,
var undefined = 5; // throws a TypeError
var Infinity = 5; // throws a TypeError

// Assigning a value to a non-writable property var obj1 = {};
Object.defineProperty(obj1, 'x', { value: 42, writable: false });
obj1.x = 9; // throws a TypeError

// Assign a value to a get method var obj2 = { get x() { return 17; } };
obj2.x = 5; // throws a TypeError

// Assigning to an object that does not allow extension var fixed = {};
Object.preventExtensions(fixed);
fixed.newProp = 'ohai'; // throws a TypeError

Strict mode can restrict the deletion of non-deletable properties, such as the prototype of the constructor:

'use strict';
delete Object.prototype; // throws a TypeError

Disallow duplicate properties in objects and function parameters:

'use strict';
var o = { p: 1, p: 2 }; // Duplicate declaration

function sum(a, a, c) { // Duplicate declaration
    'use strict';
    return a + a + c;
}

Setting properties of primitive types is prohibited:

(function() {
'use strict';

false.true = ''; // TypeError
(14).sailing = 'home'; // TypeError
'with'.you = 'far away'; // TypeError

})();

Simplify the use of variables

Using Strict mode can simplify the use of variables and make the program code more readable.

First, strict mode prohibits the use of with.

with is very powerful. We can pass an object to with to affect the scope chain of variable lookup. That is to say, when we need to use a certain attribute in the with block, in addition to searching in the existing scope chain, we will also search in the object passed by with.

with (expression)
  statement

Using with is usually to simplify our code, such as:

var a, x, y;
var r = 10;

with (Math) {
  a = PI * r * r;
  x = r * cos(PI);
  y = r * sin(PI / 2);
}

In the above example, PI is a variable in the Math object, but we can use it directly in the with block. It feels a bit like import in java.

The following example will show the problem of using with:

function f(x, o) {
  with (o) {
    console.log(x);
  }
}

We output the x variable in the with block. From the code, we can see that the f function passes in an x ​​variable. However, if the object used by with also has an x ​​attribute, unexpected problems will arise.

Therefore, in strict mode, with is prohibited.

The second is the change to eval.

In traditional mode, variables defined in eval will be automatically added to the scope containing eval. Let’s look at an example:

var x = 17;
var evalX = eval("var x = 42; x;");
console.log(x);

Because the new variable x is introduced in eval, the value of x will overwrite the initially defined x=17. Finally, we get the result 42.

If use strict is added, the variables in eval will not be added to the existing Scope, and we will get result 17.

var x = 17;
var evalX = eval("'use strict'; var x = 42; x;");
console.log(x);

The benefit of doing this is to avoid the impact of eval on existing program logic.

In strict mode, delete name is not allowed:

'use strict';

var x;
delete x; // !!! syntax error

eval('var y; delete y;'); // !!! syntax error~~

Simplify arguments

In js, arguments represents an array of parameters. First of all, in Strict mode, arguments cannot be assigned as variable names:

'use strict';
arguments++;
var obj = { set p(arguments) { } };
try { } catch (arguments) { }
function arguments() { }
var f = new Function('arguments', "'use strict'; return 17;");

The above execution will report an error.

In addition, in normal mode, arguments is bound to the named parameters, and arguments[0] and arg change synchronously, both indicating the first parameter.

But if in strict mode, arguments represents the actual parameters passed in.

Let’s take an example:

function f(a) {
    a = 42;
    return [a, arguments[0]];
}
var pair = f(17);
console.log(pair[0]); // 42
console.log(pair[1]); // 42

In the above example, arguments[0] is bound to the named parameter a. No matter what value is passed to f, the final value of arguments[0] is 42.

If you switch to strict mode:

function f(a) {
    'use strict';
    a = 42;
    return [a, arguments[0]];
}
var pair = f(17);
console.log(pair[0]); // 42
console.log(pair[1]); // 17

In this mode, arguments[0] receives the actual parameters passed in, and we get the result 17.

In strict mode, arguments.callee is disabled. Generally speaking, arguments.callee points to the currently executed function, which prevents the virtual machine from optimizing inlining, so it is prohibited in Strict mode.

Making JavaScript more secure

In normal mode, if we call this in a function f(), then this refers to the global object. In strict mode, the value of this is undefined.

If we call it through call or apply, if the primitive value (basic type) is passed in, in normal mode this will automatically point to its box class (the Object type corresponding to the primitive type, such as Boolean, Number, etc.). If undefined or null is passed in, this refers to the global Object.

In strict mode, this refers to the passed value and no conversion or transformation is done.

The following values ​​are all true:

'use strict';
function fun() { return this; }
console.assert(fun() === undefined);
console.assert(fun.call(2) === 2);
console.assert(fun.apply(null) === null);
console.assert(fun.call(undefined) === undefined);
console.assert(fun.bind(true)() === true);

Why is it safe? This means that in strict mode, you cannot use this to point to the window object, thus ensuring the security of the program.

In addition, in normal mode, we can obtain the caller and parameters of the function through fun.caller or fun.arguments, which may access some private properties or unsafe variables, thus causing security issues.

In strict mode, fun.caller or fun.arguments are prohibited.

function restricted() {
  'use strict';
  restricted.caller; // throws a TypeError
  restricted.arguments; // throws a TypeError
}
function privilegedInvoker() {
  return restricted();
}
privilegedInvoker();

Reserved keywords and function positions

In order to ensure the subsequent development of JS standards, keywords are not allowed to be used as variable names in strict mode. These keywords include implements, interface, let, package, private, protected, public, static and yield.

function package(protected) { // !!!
  'use strict';
  var implements; // !!!

  interface: // !!!
  while (true) {
    break interface; // !!!
  }

  function private() { } // !!!
}
function fun(static) { 'use strict'; } // !!!

As for functions, in normal mode, functions can be defined anywhere, but in strict mode, functions can only be defined at the top level of the script or inside a function:

'use strict';
if (true) {
  function f() { } // !!! syntax error
  f();
}

for (var i = 0; i < 5; i++) {
  function f2() { } // !!! syntax error
  f2();
}

function baz() { // kosher
  function eit() { } // also kosher
}

Summarize

Strict mode has played a very important role in the subsequent development of JS and the standardization of existing programming models. However, if we use it on the browser side, we still need to pay attention to the compatibility of the browser and do rigorous testing.

The above is a detailed explanation of the strict mode in javascript. For more information about the strict mode in javascript, please pay attention to other related articles on 123WORDPRESS.COM!