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

The purpose of this article is to share with you about the exploration triggered by JavaScript's with. The editor thinks it is very practical, so I share it with you. I hope you can get something after reading this article. Let's take a look at it.

1. Background

When I was having dinner one day, I suddenly thought that there would be a problem with with, so what was the problem and how did it cause it? Know but do not know why, driven by curiosity, from with, all the way back to VO, AO. So let's review what with does first.

2. With

Js's with provides namespace access for object access. With creates an object namespace in which you can directly access the object's properties without having to access them through the object:

Const o = {a: 1, b: 2}; with (o) {console.log (a); / / 1 b = 3; / / o: {a: 1, b: 3}}

Looks convenient, huh?

Const o = {a: 1, b: 2}; const p = {a: 3}; with (o) {console.log (a); / / 1 with (p) {console.log (a); / / 3 b = 4; / / o: {a: 1, b: 4} c = 5; / / window.c = 5}

Well, he also has the nature of the domain chain. However, if you assign a value to an attribute that does not exist, the variable will be assigned along the scope chain, and when the variable is not found, a variable will be automatically created globally in non-strict mode. This leads to data leaks.

So what is the cause of the data leak? You need to know about LHS queries, which we'll talk about later.

Let's take a look at how js is queried: when the with object o, the scope of the with declaration is o, from which the LHS query for c is made. The scope and global scope of o cannot find c. In non-strict mode, the failed LHS will automatically implicitly create an identifier c globally, and if it is strict mode, ReferenceError will be thrown.

2.1. Performance problems of with

Use with:

Function f () {const o = {a: 1} console.time (); with (o) {for (let I = 0; I < 1000000; iTunes +) {a = 2;}} console.timeEnd ();}

Normal situation:

Function f () {const o = {a: 1} console.time (); for (let I = 0; I < 1000000; iTunes +) {o.a = 2;} console.timeEnd ();}

Nearly 10 times the gap.

What is the reason?

The optimization that will be carried out in the precompilation phase of js, because with creates a new lexical scope, the an attribute and o of o are separated from two different scopes, the identifier cannot be found quickly, and the engine will not do any optimization.

It's like when you go to a store, the engine gives you a good boss, and the boss knows what to do at a glance; after putting on with, the boss doesn't know who your boss is and takes the time to find it, so the time is wasted.

3. LHS and RHS

LHS: who is the target of the assignment operation

RHS: who is the source of assignment operations

So let's take a look at this code:

Var a = 1

When executed, this code is split into two parts

Var a Tian a = 1

When we use a

Console.log (a)

An is queried by RHS to get the value of a, and is implicitly assigned to the formal parameter of the console.log function. The search of the assigned object is also a LHS query.

Of course, the more straightforward LHS is also a = 1 as written above.

The two query behaviors are different in cases where the variable has not been declared (the variable cannot be found in any scope).

Both LHS and RHS queries start in the current execution scope and look up the scope chain to the global scope.

An unsuccessful RHS throws a ReferenceError, and an unsuccessful LHS automatically implicitly creates a global variable (non-strict mode) as the query result of the LHS (strict mode also throws a ReferenceError).

So, review the search for scope chains.

4. Execution context and scope chain

There are three types of code runtime environments in js:

Global execution environment

Function execution environment

Eval execution environment

When js code executes, different execution contexts (Execution context,EC) are entered to distinguish the runtime environment, and these execution contexts form an execution context stack (Execution context stack,ECS).

For each EC, there are three main attributes: variable object (Variable object,VO), chain of scope (Scope chain), and this.

4.1. VO

Variable objects (Variable object) are EC-related scopes that store variable and function declarations defined in EC. The following information is generally included in the VO:

Variable

Function declaration

The formal parameter of a function

Function expressions and variables that are not declared with var, let, and const (global variables, which exist in the VO of the global EC) do not exist in VO. For global VO, there is VO = this = global.

4.2. AO

In the function EC, VO cannot be accessed directly, so the role of VO is replaced by the active object (Activation Object,AO). AO is created when entering the function EC, which is initialized by the function's arguments. At this point, VO = = AO.

Such as:

Function foo (b) {const a = 1;} foo (1); / / AO: {arguments: {...}, a: 1, b: 1} 4.3. Domain chain

Understand EC, AO, VO, and then look at the scope chain

Var x = 10 X function foo () {var y = 20; function bar () {var z = 30; console.log (x + y + z);}; bar ()}; foo ()

The orange arrow points to VO/AO.

The blue arrows are the domain chain (VO/AO + All Parent VO/AOs)

After understanding the search process, it is easy to think of the prototype chain in js, while the scope chain and the prototype chain can be combined into a two-dimensional lookup: first find an object through the scope chain, and then find the attributes on that object.

Const foo = {} function bar () {Object.prototype.a = 'Set foo.a from prototype'; returnfunction () {console.log (foo.a);}} bar () (); / / the above is what the exploration initiated by JavaScript's with is like. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please 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.