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

This article mainly explains "how to use scope and scope chain". The content of the explanation in this article is simple and clear, and it is easy to learn and understand. let's study and learn "how to use scope and scope chain".

I. scope

If the execution context is the execution environment of the code, then the scope is a set of execution rules in the execution environment. Since it is a rule, the JavaScript engine should follow this set of rules when executing code, and developers should also follow this set of rules when writing code.

1. What is the scope

Let's first look at an example like this:

Function foo () {var bar = 'xiaolu'} foo () console.log (bar)

The above running result is obvious that the console will report an error bar is not defined. Through this small example, we can find that the variables declared inside the access function outside the function are inaccessible. The reason behind this is the result of the existence of JavaScript scope.

2. What is lexical environment

When it comes to scope, what is scope? Let's first get to know the lexical environment of this old friend.

The description of lexical environment in ECMAScript specification is as follows: lexical environment is a type of specification used to define the relationship between identifiers, variable values and function values in ECMAScript code based on lexical nesting structure.

To put it bluntly, lexical environment is a set of norms and rules, which are used to define the accessible scope of certain functions and variables. We also call lexical environment "lexical scope".

Since lexical scope is a set of agreed rules, the scope of lexical scope is determined by developers when they write code.

When the code is executed, the JavaScript engine looks for the corresponding variables and functions through the identifier name according to this set of specifications.

All right, finally, give it a summary definition.

Scope: a scope is a set of agreed specifications and rules that specify the accessibility of certain functions and variables.

II. Domain chain

Now that we've figured out the scope, let's look at the scope chain. Scope chain and scope are very different, let's experience what a scope chain is from the "execution stack level" and "code level" respectively.

Var name = "xiaolu"; function fn () {console.log (name); function getName () {console.log (name);} getName ();} fn ()

Schematic diagram of the scope chain in the execution stack:

Picture

The diagram shows the execution of the above code, in which the accessible chain formed by the indentation of different color blocks is what we call the scope chain.

Although the above diagram is abstract, how is it implemented if we understand the scope chain at the code level?

As shared in the previous article, every time a new execution context is created, a "variable object" is created to hold variables and functions in the current execution context. (remember: this variable object is important)

If we associate these "variable objects" of the execution context, we form a chain, and we call the implementation of this chain the "scope chain".

Picture

The execution result of the above code is a printout:

1var name = "xiaolu"

2function fn () {

3 console.log (name)

4 function getName () {

5 console.log (name)

6}

7 getName ()

8}

9fn ()

When the internal getName is executed, the JavaScript engine looks for the variable name in the getName scope, and finds that it does not have it. It will look for the name variable along the scope chain in the above figure, and no name variable has been found in the scope of the fn. Then it continues to search along the scope chain to the upper level, until the existence of the variable name is found in the global scope, and then the value of name is output.

Thank you for your reading. the above is the content of "how to use scope and scope chain". After the study of this article, I believe you have a deeper understanding of how to use scope and scope chain. the specific use also needs to be verified by 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.