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

This article mainly explains "what is scope and scope chain", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let Xiaobian take you to learn "what is scope and scope chain"!

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, JavaScript engine must abide by this set of rules when executing code, and developers must also abide by this set of rules when writing code.

1. What is scope?

Let's start with an example:

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

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

2. What is Lexical Environment

Speaking of scope, what is scope? Let's first get to know our old friend's lexical environment.

Lexical environments are described in the ECMAScript specification as follows: Lexical environments are specification types used to define associations between identifiers and variable and function values within ECMAScript code based on lexical nesting structures.

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

Since lexical scope is a set of agreed rules, the scope of lexical scope is determined by the developer when writing the code.

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

Well, let's wrap it up.

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

2. scope chain

Now that we understand the scope, let's look at the scope chain. Scope chain and scope are very different, let's experience what scope chain is from "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 scope chain in execution stack:

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

Although the diagram above is abstract, if we understand scope chains at the code level, how do we implement them?

As shared in the previous article, whenever a new execution context is created, a "variable object" is created to store variables and functions in the current execution context. (Remember: this variable object is important)

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

The result of executing the above code is a printout:

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

When the internal getName is executed, the JavaScript engine looks for the variable name in the getName scope, and if it does not find it, it will look up along the scope chain in the above figure, and it will not find the name variable in the scope of fn, and then continue to look up along the scope chain until it finds the variable name in the global scope, and then outputs the value of name.

At this point, I believe everyone has a deeper understanding of "what is scope and scope chain," so let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

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.