I was looking at someone else’s code recently, and I found that the with statement was very strange. I looked in the documentation, and the first sentence I saw in the documentation was “It is not recommended to use the with statement because it can be a source of error confusion and compatibility issues”. Although not recommended to use, but feel at least still need to know!

grammar

Expression: new default object

Statement: One or more statements oject is the default object for this statement

with (expression) {
    statement
}
Copy the code

Query variable order in with statement:

Is a local variable in the with statement? If not, go to step 2

Is it a variable in expression? If not, go to ③

③ Find higher scope scope.

use

For example:

Math.pi, math.cos (x), math.sin (x), etc.

But when Math is specified as the new default object by the with statement, all subsequent references refer to the Math object so that the PI, cos, and sin functions can be used directly,

In a nutshell, with is shorthand for calling an object by its node name in a specified code area.

Use comes before definition because examples are easier to understand than words.

define

The with statement is used to: set the scope of code to a specific scope.

It is used to reference existing attributes of an object but cannot be used to add attributes to the object. To create new attributes for an object, you must explicitly reference the object.

As follows, obj. Y is undefined even if y is assigned in with

With the disadvantages of

1. Unclear semantics;

Because the with statement makes code hard to read, it also makes it difficult for the JavaScript compiler to look up a variable in the scope chain and decide which object to value on.

2. Performance problems;

The JS engine has a compilation phase before executing the code, and some of these optimizations rely on being able to statically analyze the code based on its lexology and pre-determine where all variables and functions are defined so that identifiers can be found quickly during execution.

But with WITH, the engine simply assumes that any judgments about the position of the identifier are invalid, because there is no way to know what is passed to the object with which the new lexical scope is created. So JS is not optimized.

The following example

The same code takes only 1s without using With, but 9s after using it.

“Note”

With automatically creates a global variable in the global scope and, in strict mode, raises ReferenceError.

2. With modifies or creates new scopes at run time to trick other lexical scopes defined at write time.

3. The with statement is a slow block of code, especially when property values are set. In most cases, it’s best to avoid it if possible.

4. Js compression tools cannot compress this code after using with, which is also a factor affecting performance.

conclusion

althoughwithThere are a lot of shortcomings, but still need to know about, or is not taobao home page first sentence can not understand! 😝

Reference: MDN Web Docs understand the with keyword in javascript

Xiao Ke love to finish click a “like” before leaving! 😗