How to use with in JavaScript

Speaking of the with keyword in js, the first impression of many friends may be that the function of the with keyword is to change the scope, and the most important point is that the use of the with keyword is not recommended. After hearing that the with keyword is not recommended, many of us will ignore the with keyword, thinking that we can just ignore it and just use it. But sometimes, when we look at some code or interview questions, there will be questions related to the with keyword. There are many pitfalls that you have never been exposed to, so it is still necessary to talk about the with keyword.

Basic usage of

The original intention of the with statement is to provide a namespace-style shortcut for hierarchical object access. That is, in the specified code area, directly through the node The name of the calling object.
with is usually used as a shortcut to repeatedly reference multiple properties in the same object without repeatedly referencing the object itself.
For example, there is currently an object like this:

var obj = {
    a: 1,
    b: 2,
    c: 3};

If you want to change the value of each item in obj, the general writing method may be like this:

// 重复写了3次的“obj”obj.a = 2;
obj.b = 3;
obj.c = 4;

and use with In this code, the with statement is used to associate the obj object, which means that inside the with code block, each variable is first considered to be a Local variable, if the local variable has the same name as a property of the obj object, then this local variable will point to the property of the obj object.

Disadvantages of with

Leads to data leakage

Let's look at the following part of the code

with (obj) {
    a = 3;
    b = 4;
    c = 5;
}

 First, let's analyze the above code. In the example, two objects o1 and o2 are created. One of them has the a attribute, the other one does not.

The function accepts a formal parameter of obj, which is an object reference, and performs with(obj) {...} on the object. Inside the with block, there is a lexical reference to a, which is actually an LHS reference, and 2 is assigned to it. When we pass o1 in, a = 2
The assignment operation finds o1.a and assigns 2 to it. When o2 is passed in, o2 does not have a property, so this property will not be created, and o2.a remains undefined.

Here we need to return to the mechanism of
LHS query
(for details, please refer to LHS and RHS queries in JavaScript). When we pass o2 to with, the scope declared by with is o2, and LHS query
is performed on a starting from this scope. The identifier a is not found in the scope of o2, the scope of foo(…) and the global scope, so in non-strict mode, a global variable will be automatically created in the global scope), in Strict mode will throw a ReferenceError exception.

Performance degradation

 with will modify or create new scopes at runtime, thereby tricking other lexical scopes defined at writing time. with can make the code more scalable. Although there is the possibility of data leakage above, it can be avoided with a little attention. Isn't it possible to create good functions?

function foo(obj) {
    with (obj) {
        a = 2;
    }
}var o1 = {
    a: 3};var o2 = {
    b: 3}
foo(o1);
console.log(o1.a);  //2foo(o2);
console.log(o2.a);  //underfinedconsole.log(a);     //不好，a被泄漏到全局作用域上了

Copy after login

Then, test the effect:

In the code that handles the same logic, the running time without with is only 4.63 ms. The usage time of using with is as long as 81.87ms.


Why is this?
 The reason is that the JavaScript engine will perform several performance optimizations during the compilation phase. Some of these optimizations rely on being able to statically analyze the code based on its lexicon and predetermine where all variables and functions are defined so that identifiers can be found quickly during execution.
 But if the engine finds with in the code, it can simply assume that any judgment about the position of the identifier is invalid, because there is no way to know the contents of the object passed to with to create the new lexical scope. What.
The most pessimistic case is that if with appears, all optimizations may be meaningless. Therefore, the simplest approach the engine will take is to not do any optimization at all. If the code uses a lot of with or eval(), it will definitely run very slowly. No matter how clever the engine is in trying to minimize the side effects of these pessimistic situations, it can't avoid the fact that without these optimizations, the code will run slower .

This article explains the usage of with in JavaScript. For more related content, please pay attention to the php Chinese website.

Related recommendations:

js and php nesting

##js prevents default events and js prevents event bubbling examples to share js prevents bubbling events

Common writing and calling methods of js functions

The above is the detailed content of How to use with in JavaScript. For more information, please follow other related articles on the PHP Chinese website!