About how to use the with statement in JavaScript_javascript tips

Students who have used Java and .NET should be familiar with the concept of packages or namespaces. Because of this concept, the simplicity and readability of the code are guaranteed. I don’t know how the with statement was positioned at the beginning of JavaScript design. Personally, I think There is a certain degree of similarity between them. For example:

Copy code The code is as follows:

apple .banana.candy.dog.egg.fog.god.huh.index = 0;
doSomething(apple.banana.candy.dog.egg.fog.god.huh.index);

Using the with statement, it can be written as the following code.

Copy the code The code is as follows:

with(apple.banana.candy.dog.egg.fog.god.huh) {
c = 0;
doSomething(index);
}

Looks great It's wonderful, but it has fatal flaws. Let's do some small tests.

1. Modify the value through internal variables inside the with statement

Copy Code The code is as follows:

var root = {
branch: {
node: 1
}
};

with(root.branch) {
node = 0;
// Display 0, correct!
alert(node);
}
// Display 0, correct!
alert(root.branch.node);

2. Modify the value through the object node inside the with statement

Copy code The code is as follows:

var root = {
branch: {
node: 1
}
};

with(root.branch) {
root.branch.node = 0;
// Display 0, correct!
alert(node);
}
// Display 0, correct!
alert(root.branch.node);

After test 1 and test 2, there is no problem at first glance, but... Please look at test 3.

3. Modify the value through the object parent node inside the with statement

Copy the code The code is as follows:

var root = {
branch: {
node: 1
}
};

with(root.branch) {
root.branch = {
node: 0
};
// Display 1, wrong!
alert(node);
}
// Display 0, correct!
alert(root.branch.node);

It can be seen from the above test 3 that after the parent node of the node inside the with statement is modified, it will not be synchronized to the node itself. In other words, the consistency of the internal and external values ​​cannot be guaranteed. This may become a problem in the project A highly hidden bug.
So what should we do? Accept the long series of step-by-step access, or is there another way?

There is a method. We can reference it through aliases Call the node object as the parent node, such as:

Copy the code The code is as follows:

var root = {
branch: {
node: 1
}
};

var quote = root.branch;
quote.node = 0;
/ / Displays 0, correct!
alert(root.branch.node);

I believe that few people will use the with statement, and not many people know this keyword, but I I feel that this is a problematic statement and should not be used at all, so I wrote a short article to record it.