In the third year of front-end development, I suddenly found that I still had a lot of things I didn’t understand about JS. Taking advantage of the recent lack of demand, it was better to calm down and learn JS again from scratch.

This series uses two ebooks “JavaScript Tutorial” and “Modern JavaScript Tutorial” by Liao Xuefeng as clues. For the knowledge that needs to be further understood, more articles will be read and recorded as extended knowledge.

Beginners are advised to read the above two ebooks first. This series is more suitable for reviewing old knowledge and filling up gaps.

Why “use strict” appears

The ES5 specification modifies the features that are not perfect in the old ES standard.

However, these imperfect features are still available by default for compatibility with older browsers.

In order to use the new feature and avoid the imperfections of the old version, we can turn on the strict mode “Use Strict”.

In a nutshell, what strict mode does is:

  • Eliminate unreasonable features in the old STANDARD ES.
  • Keep your code safe and accurate.
  • Conducive to JS engine optimization, improve the running speed.

How do I open “Use strict”

To turn on strict mode, we can put “use strict” at the top of the file or function.

Strict mode is also automatically turned on if your code uses new standard features like “classes” and “modules”.

What changes does “Use Strict” make

What happens to our code if we turn on strict mode?

These changes, as long as we understand that they are intended to fill in the holes left by the old version, can be quickly remembered. We can look at the general picture first, and we will give specific examples below.

Specific instructions refer to strict mode MDN, for further understanding, you can see the STRICT mode in JS [classic front end questions] this video, the following example will be further convenient for everyone to understand.

Turn fault errors into exceptions

You cannot accidentally create global variables

// Create a global variable called message
message = "Hello JavaScript! "; // This line of code raises a ReferenceError
Copy the code

Silently failed assignment operations also throw exceptions

"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

Delete Cannot delete familiar throw exception

"use strict";
delete Object.prototype; // TypeError is thrown. In non-strict mode, it cannot be deleted but no error is reported
Copy the code

Unique attribute name, unique function parameter name

"use strict";
var o = { p: 1.p: 2 }; / /!!!!!! Syntax error, not in strict mode, overwrites previous property of the same name
function sum(a, a, c) { / /!!!!!! Grammar mistakes
  return a + a + c; // If the code is not in strict mode, it overwrites the previous parameter with the same name
}
Copy the code

Disallow octal digit syntax

"use strict";
var sum = 015 + / /!!!!!! Syntax error, because base 8 and complement zero conflict
          197 +
          142;
Copy the code
var a = 0o10; // ES6: octal
Copy the code

Disallow setting properties of raw data

(function() {
  "use strict";

  false.true = "";              //TypeError
  (14).sailing = "home";        //TypeError
  "with".you = "far away";      //TypeError}) ();Copy the code

Simplify the use of variables

Disable the with

"use strict";
var x = 17;
with (obj) { / /!!!!!! Grammar mistakes
  // If strict mode is not enabled, does the x in with refer to the x above with or obj.x?
  // We have no way of knowing if we don't run the code, so the code prevents the engine from optimizing and slowing down.
  x;
}
Copy the code

Eval no longer introduces new variables for upper-level scopes

In strict mode code where EVAL is executed, variables behave the same as in code where eval is not executed in strict mode.

var x = 17;
var evalX = eval("'use strict'; var x = 42; x"); // In strict mode, x is not assigned to 42 outside, but in non-strict mode
console.assert(x === 17);
console.assert(evalX === 42);
Copy the code

Do not delete declared variables

"use strict";

var x;
delete x; / /!!!!!! Grammar mistakes

eval("var y; delete y;"); / /!!!!!! Grammar mistakes
Copy the code

Make eval and argument easy

Eval and arguments cannot be used as variable names

"use strict";
eval = 17; / /!!!!!! Grammar mistakes
arguments+ +;/ /!!!!!! Grammar mistakes
Copy the code

Arguments do not map to arguments

function f(a) {
  "use strict";
  a = 42;
  return [a, arguments[0]];
}
var pair = f(17);
console.assert(pair[0= = =42);
console.assert(pair[1= = =17); The arguments / / strict mode [0] no mapping relationship, or 17, the strict mode will be changed to 42
Copy the code

Arguments.callee is not allowed

"use strict";
var f = function() { return arguments.callee; }; In normal mode, arguments.callee points to the currently executing function, f itself.
f(); // Throws a type error
Copy the code

It’s easier to write secure code

The value passed to a function by this is not forcibly converted to an object. The default is undefined

"use strict";
function fun() { return this; }
console.assert(fun() === undefined); // This ===window in normal mode
Copy the code

You cannot use caller and arguments to access upper-layer functions or to call local functions

function restricted() {
  "use strict";
  restricted.caller;    // Throws a type error
  restricted.arguments; // Throws a type error
}

function privilegedInvoker() {
  return restricted();
}

privilegedInvoker();
Copy the code

There is no longer a way to access the variables associated with calling this function

"use strict";
function fun(a, b) {
  "use strict";
  var v = 12;
  return arguments.caller; // Throws a type error
}
fun(1.2); // Does not expose v (or A, or B)
Copy the code

Paving the way for future features

Reserved keywords

These include implements, interface, let, package, private, protected, public, static, and yield keywords.

Disallow function declarations that are not at the script and function levels

"use strict";
if (true) {
  function f() {}/ /!!!!!! Grammar mistakes
  f();
}

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

function baz() { / / legal
  function eit() {}// Also legal
}
Copy the code

References:

  • Strict mode MDN
  • Modern JavaScript tutorial – “Use Strict” modern mode
  • Strict mode in JS