Shulou(Shulou.com)05/31 Report--

This article mainly explains "what is the function of JavaScript scope". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the role of JavaScript scope".

The concept of scope

One of the most basic functions of modern programming languages is the ability to store values in variables so that they can be used later for modification. It is this feature that brings status to the program.

In JavaScript, scope is a set of well-designed rules for storing variables.

A brief introduction to the principle of compilation

Usually we classify JavaScript as a "dynamic" or "interpretive execution" language, but it is actually a compiled language. Different from the traditional compilation language, it is not compiled in advance, and the compilation results can not be migrated in distributed systems.

For example, the V8 engine, in order to improve the performance of the JavaScript code, will compile it into local machine code before running, and then execute the machine code to achieve the purpose of improving the speed.

Word segmentation / lexical analysis

This process breaks down code made up of characters into code blocks that are meaningful to the program, which are called lexical units.

For example, var foo = 'bar' is usually broken down into these lexical units: var, foo, =,' bar'

Parsing / grammatical analysis

This process converts lexical units into a "tree of successive nesting of elements that represents program syntax", which is called an "abstract syntax tree" (AST).

Image

Code generation

Convert the above abstract syntax tree to machine executable code

The JavaScript engine is much more complex than a compiler for a three-step language. For example, in the syntax analysis and code generation phase, there are specific steps to optimize the running performance, including the optimization of redundant elements.

For JavaScript, compilation occurs in most cases in the first few microseconds of code execution, and any code snippet is compiled before execution. So the JavaScript compiler first compiles var foo = 'bar', then is ready to execute it, and usually executes it right away.

Cooperation of engine, compiler and scope in assignment operation

Engine: responsible for the whole JavaScript program compilation and execution process from beginning to end

Compiler: responsible for syntax analysis and code generation

Scope: responsible for collecting and maintaining a series of queries consisting of all variables

For the code var foo = 'bar', you probably think of it as a simple declaration. In fact, JavaScript executes it into two completely different declarations.

The compiler first decomposes this code into lexical units and then parses it into a tree structure. (this code will be handled differently than expected during the next step of code generation.)

When var foo is encountered, the compiler checks to see if a variable with the same name already exists in the scope. If so, the compiler ignores the declaration and continues to compile. Otherwise, it generates code to declare a new variable in the collection of variables in the current scope, named foo

The compiler then generates the runtime code for the engine to handle the assignment of foo = 'bar'.

The engine runtime first queries whether there is a variable called foo in the current scope. This variable will be used if there is an engine, otherwise it will always look at the upper scope.

If the variable foo is finally found, 'bar' is assigned to it, otherwise an exception is thrown.

Summary: the assignment of a variable performs two actions: first, the compiler declares the variable in the current scope (if the variable has not been declared); then the runtime engine looks for the variable in scope and assigns a value to it when it can find it.

LHS query vs RHS query

When the engine executes the code generated by the compiler, it looks for foo to determine whether it has been declared. The process of finding is assisted by scope. In our example, when the engine does a LHS query for the variable foo, there is another lookup type called RHS query. As the name implies, they mean Left hand side and Right hand side

LHS: the variable appears to the left of the assignment operation (find out who is the target of the assignment operation)

RHS: variables appear elsewhere (find the source of the value)

/ / consider the following code console.log (foo)

The reference to foo in this example is the RHS query, where there is no value assigned to foo. Instead, we need to look up the value of foo before passing it to the log method.

/ / by comparison, foo = 'bar'

The query for foo here is a LHS query, and we don't care what the current value of foo is, we just want to find a target for this assignment.

/ / reanalyze the following code function foo (a) {console.log (a)} foo ('bar')

There are both LHS query and RHS query in this code

The last line, foo (...) The call to the function needs to RHS the foo to find the value of foo by querying →

There is an implicit a = 'bar' when entering the parameter, and it is necessary to query a by LHS.

Console.log (a) makes a RHS query for a

Console.log (...) You also need to query the console object with RHS.

Nesting of scope

As we said at the beginning of the article, scope is a set of rules for finding variables by name. In practice, several scopes need to be taken into account at the same time.

Nesting of scopes occurs when one block or function is nested within another block or function. So when no target variable is found in the current scope, it looks up layer by layer to the global scope.

/ / consider the following code function foo (a) {console.log (a + b)} var b = 258; foo (369)

The RHS query for b cannot be done within foo, but can be done in the scope of the previous level (in this case, the global scope).

LHS,RHS queries are searched layer by layer within the scope until they are found (or reach the global scope).

ReferenceError

As mentioned in the previous section, LHS,RHS looks for variables layer by layer within the scope, but what if you reach the global scope and still don't find the variable?

At this point, the significance of distinguishing LHS from RHS queries is realized.

If the RHS query does not find the required variable in all nested scopes, the engine throws a ReferenceError.

If the LHS query does not find the desired variable in all nested scopes, the engine creates a variable with that name in the global scope and returns it to the engine.

Note: strict mode is introduced in ES5. One of the differences between strict mode and normal mode is that the binary automatically or implicitly creates global variables. Therefore, when a LHS query fails in strict mode, a global variable is not created and returned, and the engine also throws a ReferenceError.

Thank you for your reading, the above is the content of "what is the role of JavaScript scope". After the study of this article, I believe you have a deeper understanding of what the role of JavaScript scope is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.