Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how to use with in javascript, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this javascript article on how to use with. Let's take a look at it.

In javascript, with is used to extend the scope chain of a statement and is usually used as a shortcut to repeatedly reference multiple attributes in the same object without having to refer to the object itself; the syntax is "with (expression) {execute statement.}".

The operating environment of this tutorial: windows7 system, javascript1.8.5 version, Dell G3 computer.

The basic usage of javascript with

The original intention of the with statement is to provide namespace sketches for hierarchical object access. That is, in the specified code area, the object is called directly through the node name.

The with statement is used to extend the scope chain of a statement. The syntax is as follows:

With (expression) {statement}

Expression

Adds the given expression to the scope chain used in the evaluation statement. Parentheses around the expression are required.

Statement

Any statement. To execute multiple statements, use a block statement ({.}) to group these statements.

With is often used as a shortcut to repeatedly refer to multiple properties in the same object without having to refer to 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, it might look like this:

/ / the "obj" obj.a = 2 / obj. B = 3 / obj.c = 4 repeated 3 times.

And using the with method, there will be a simple shortcut

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

In this code, the with statement is used to associate the obj object, which means that within the with code block, each variable is first considered to be a local variable, and if the local variable has the same name as an attribute of the obj object, the local variable points to the obj object property.

The disadvantages of with

In the above example, we can see that with can help us simplify the code very well. But why not recommend it? Let's talk about the disadvantages of with:

Lead to data leakage

Let's take a look at the following part of the code

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); / / 2Cool an is leaked to the global scope

First, let's analyze the above code. Two objects, o1 and O2, are created in the example. One of them has an an attribute, and the other one doesn't. The foo (obj) function takes a formal parameter of obj, which is an object reference, and executes with (obj) {...} on that object reference. Inside the with block, there is a lexical reference to a, which is actually a LHS reference that assigns 2 to it.

When we pass in o1, the a = 2 assignment finds o1.an and assigns 2 to it. When O2 is passed in, O2 does not have an attribute of a, so this attribute is not created, and o2.a maintains undefined.

But why does the operation on O2 lead to data leakage?

Here we need to return to the mechanism for querying LHS.

When we pass O2 to with, the scope declared by with is O2, from which the LHS query for a starts. The scope of O2, foo (…) The identifier an is not found in both the scope and the global scope, so a global variable is automatically created in the global scope in non-strict mode, and a ReferenceError exception is thrown in strict mode.

Another reason with is not recommended is. In strict mode, with is completely prohibited from using eval (…) indirectly or unsafely. It's also banned.

Performance degradation

With modifies or creates new scopes at run time to deceive other lexical scopes defined at writing time. With can make the code more extensible, although there is the possibility of data leakage above, but can be avoided with a little attention, can not create good functionality?

The answer is no, for specific reasons, let's take a look at the following part of the code.

The following code can be copied and run directly

Function func () {console.time ("func"); var obj = {a: [1,2,3]}; for (var I = 0; I

< 100000; i++) { var v = obj.a[0]; } console.timeEnd("func");}func();function funcWith() { console.time("funcWith"); var obj = { a: [1, 2, 3] }; with(obj) { for(var i = 0; i < 100000; i++) { var v = a[0]; } } console.timeEnd("funcWith");}funcWith(); 接着是，测试效果：

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

Why is that?

The reason is that the JavaScript engine does several performance optimizations during the compile phase. Some of these optimizations rely on the ability to statically analyze the code according to the morphology of the code and predetermine the definition location of all variables and functions in order to quickly find identifiers during execution.

But if the engine finds with in the code, it can simply assume that the judgment about the location of the identifier is invalid, because there is no way to know what is passed to the object that with uses to create a new lexical scope.

The most pessimistic scenario is that if with occurs, all optimizations may be meaningless. So the easiest thing the engine will do is not to do any optimization at all. If the code uses a lot of with or eval (), it must be very slow to run. No matter how smart the engine is, trying to minimize the side effects of these pessimistic situations cannot avoid the fact that without these optimizations, the code will run more slowly.

This is the end of the article on "how to use with in javascript". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to use with in javascript". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.