The third phase 2021.

This article continues with the JavaScript execution context covered in detail in the previous article and delves into scopes and scope chains.

The concept of scope and scope chain is based on the concept of execution context. If you do not understand the concept of execution context, you are not advised to read this article.

This article has been included in Github blog, welcome everyone ~ Star, if there are problems or issues in this article, welcome to leave a message below or Github!

First, scope

If the execution context is the execution environment of the code, then the scope is the set of execution rules within the execution environment. Since the rules are rules, the JavaScript engine must follow the rules when executing the code, and the developers must follow the rules when writing the code.

1. What is scope?

Let’s start with an example:

function foo () {
  var bar = 'xiaolu'
}
foo()
console.log(bar) 
Copy the code

The console error bar is not defined (bar is not defined, bar is not defined, bar is not defined, bar is not defined, bar is not defined)

2. What is lexical environment?

Speaking of scope, what is scope? Let’s first meet our old friend lexical environment.

The ECMAScript specification describes a lexical environment as follows: A lexical environment is a type of specification used to define associations between identifiers and variable and function values within ECMAScript code based on lexical nesting structures.

To put it bluntly, a lexical environment is a set of specifications and rules that dictate the accessible scope of certain functions and variables. We also call a lexical environment “lexical scope”.

Since lexical scope is an agreed set of rules, the scope of lexical scope is defined by the developer when he writes the code.

As the code executes, the JavaScript engine looks up the corresponding variables and functions by their identifier names according to the specification.

All right, so let me give you a final definition.

Scope: A scope is an agreed set of specifications and rules that govern the accessibility of certain functions and variables, etc.

2. Scope chain

So scoping is clear, so let’s look at scoping chains. Scoping chains are very different from scopes. Let’s see what scoping is at the stack level and the code level respectively.

var name = "xiaolu";
function fn () {
  console.log(name);
  function getName(){
    console.log(name);
  }
  getName();
}
fn();
Copy the code

Sketch of scope chain in execution stack:

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

Although the diagram above is abstract, how does it work if we understand scope chains at the code level?

As I shared in the previous article, whenever a new execution context is created, a “variable object” is created to hold the 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.”

The result of the above code is printed:

var name = "xiaolu";
function fn () {
  console.log(name); // "xiaolu"
  function getName(){
    console.log(name); // "xiaolu"
  }
  getName();
}
fn();
Copy the code

When the internal getName is executed, the JavaScript engine looks for the variable name in the getName scope. When the name variable is not found, the JavaScript engine looks for the variable name in the getName scope up the scope chain in the figure above. The name variable is also not found in the fn scope, and then continues to look up the scope chain. Until the global scope detects the presence of the variable name, and then prints the value of name.

❤️ Welcome quality three lian [likes + favorites + comments]

I am Xiaolu. This article is updated on Github simultaneously. You can also search “Xiaolu Animation Learning Programming” on wechat to receive the notification of article update in the first time, and reply “front-end” to get the preparation interview booklet prepared by Xiaolu.