Using strict mode in JavaScript

Time:2019-11-25

Preface

The strict mode introduced in ecmascript5 enables developers to have a “better” JavaScript language by making the JavaScript running environment handle some of the most common and hard to find errors in the development process differently from the current ones. For a long time, because only Firefox supports strict mode, I doubted strict mode. But today, all major browsers support strict mode in their latest versions (including ie10, opera 12 and Android 4, ios5). It’s time to start using strict mode.

What role can strict models play?

Strict patterns introduce a lot of changes to JavaScript, and I divide them into two categories (obvious and subtle). The goal of minor improvement is to fix some detail problems in current JavaScript. I won’t go into details about these problems here. I’ll mainly introduce the obvious changes introduced by strict mode, the concepts you should know before you use strict mode and the changes that will help you the most.

Before you start learning about specific features, remember that one of the goals of strict mode is to make debugging faster and easier. It is better for the runtime environment to throw errors explicitly when it finds problems than to fail silently or act strangely (as is often the case in JavaScript runtime environments that do not turn on strict mode). Strict mode will throw out more errors, but this is a good thing, because these errors will arouse your attention and fix many potential problems that were hard to find before.

1. Remove with keyword

First, the with statement is removed from strict mode, and the code containing the with statement will throw an exception in strict mode. So the first step in using strict patterns: make sure you don’t use with in your code.

//In strict mode, the following JavaScript code throws an error
with (location) {
alert(href);
}

2. Prevent accidental assignment of global variables

Secondly, local variables must be declared before they are assigned. Before strict mode is enabled, a global variable with the same name is automatically created when copying an undeclared local variable. This is one of the most common errors in a JavaScript program, with explicit exceptions thrown when trying to do so in strict mode.

//Exception thrown in strict mode
(function() {
someUndeclaredVar = "foo";
}());

3. This in the function no longer points to the global by default

Another important change in strict mode is that this which is not defined or empty in the function does not point to global by default. This will cause code execution errors that depend on the default this behavior in some functions, such as:

window.color = "red";
function sayColor() {
alert(this.color);
}
//Error will be reported in strict mode, if not in strict mode, prompt "red"“
sayColor();
//Error will be reported in strict mode, if not in strict mode, prompt "red"“
sayColor.call(null);

This will remain undefined until it is assigned, which means that when a constructor is executing, if there is no explicit new keyword before, an exception will be thrown.

function Person(name) {
this.name = name;
}
//Error reporting in strict mode
var me = Person("Nicholas");

In the above code, because there is no new before the person constructor runs, this in the function will remain undefined. Because you cannot set the property for undefined, the above code will throw an error In the non strict mode environment, this that has not been copied will point to the window global variable by default, and the result of running will be to accidentally set the name attribute for the window global variable.

4. Prevent duplicate names
When writing a lot of code, it’s easy to inadvertently set object properties and function parameters to a duplicate name. Strict mode explicitly throws errors in this case

//Duplicate variable name, error will be reported in strict mode
function doSomething(value1, value2, value1) {
//code
}
//Duplicate object property name, error will be reported in strict mode:
var object = {
foo: "bar",
foo: "baz"
};

The above code will be considered as a syntax error in strict mode and will be prompted before execution.

5. Safe Eval ()

Although the eval () statement has not been removed in the end, some improvements have been made to it in strict mode. The biggest change is that the declaration of variables and functions executed in eval() will not directly create corresponding variables or functions in the current scope, for example:

(function() {
eval("var x = 10;");
//In non strict mode, alert 10
//In strict mode, an exception is thrown because x is not defined,
alert(x);
}());

Any variables or functions created during the execution of Eval () remain in Eval (). However, you can explicitly obtain the execution result in Eval () from the return value of the eval () statement, for example:

(function() {
var result = eval("var x = 10, y = 20; x + y");
//Run the rest of the statements correctly in strict or non strict mode. (resulst is 30)
alert(result);
}());

6. Throw an exception when modifying the read-only property

Ecmascript5 also introduces the ability to set specific properties of an object to read-only or make the entire object immutable But in the non strict mode, trying to modify a read-only property will only silence the failure This is likely to happen when you are dealing with some browser native APIs. Strict mode will explicitly throw an exception in this case to remind you that modifying this property is not allowed.

var person = {};
Object.defineProperty(person, "name" {
writable: false,
value: "Nicholas"
});
//In non strict mode, silence fails, and in strict mode an exception is thrown

Person.name = “John”; in the above example, the name attribute is set to read-only. The modification of the name attribute in non strict mode will not cause an error, but the modification will not succeed. Strict mode, however, explicitly throws exceptions.

Note: it is strongly recommended that you turn on strict mode when using any ECMAScript attribute specification.

How to use it?

It’s very easy to turn on strict mode in modern browsers. You only need the following instructions in JavaScript code:


"use strict";

Although it seems that the above code is just a string that is not given a variable, it actually instructs the JavaScript engine to switch to strict mode (browsers that do not support strict mode will ignore the above code and will not have any impact on subsequent execution). Although you can apply this instruction to the global or a function, you should be reminded not to enable strict mode in the global environment.

//Please don't use it like this
"use strict";
function doSomething() {
//This part of the code will run in strict mode
}
function doSomethingElse() {
//This part of the code will also run in strict mode
}

Although the code above doesn’t look like a big problem. But when you are not responsible for maintaining all the code introduced into the page, using strict mode in this way will make you face the problems caused by the third-party code not being prepared for strict mode Therefore, it is better to use the instruction to turn on strict mode in the function, for example:

function doSomething() {
"use strict";
//The code in this function will run in strict mode
}
function doSomethingElse() {
//The code in this function does not run in strict mode
}

If you want strict mode to be turned on in more than one function, use execute now function expression

(immediately-invoked function expression ,IIFE):
(function() {
"use strict";
function doSomething() {
//This function runs in strict mode
}
function doSomethingElse() {
//This function also runs in strict mode
}
}());

conclusion

I strongly recommend that you enable JavaScript strict mode from now on, which can help you find errors in your code that you haven’t noticed. Do not enable it in the global environment, but you can use Iife (execute function expression immediately) as much as possible to apply strict mode to multiple function scopes.

In the beginning, you will encounter error prompts that you haven’t encountered before, which is normal. When strict mode is enabled, make sure you test in a supported browser to find new potential problems.

Make sure you don’t just add a line of “use strict” to your code to assume that the rest of the code will work. Finally, start writing better code in strict mode.

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.