The commonplace JavaScript scope problem

In the front-end learning, the scope of the problem has been widely mentioned, what is the scope, what is the scope chain? In JavaScript, how to understand these concepts is the key to learn this language, so in the process of learning the front-end development, I need also very necessary to learn and summarize the JavaScript----scope.

The scope is not difficult, but to few people can be a little more in-depth explanation of what is the scope, know that it is not clear why it is not enough, so we have to understand,

　　This blog post is designed to deepen the analysis of the scope, if there is a summary is not in place, please readers Haihan and in the comment area point out.

When it comes to scopes, you have to talk about a noun----execution environment. What do you mean, the execution environment?

The execution environment is the most important concept in JavaScript, which defines what variables or functions have access to other data and determines their behavior. In each execution environment there is an object called " Variable Object ", and all variables and functions in the execution environment are stored in this object, which cannot be accessed, it can only be accessed by the JavaScript interpreter in the background.

When parsing JavaScript code, the browser creates an execution environment for each function and generates a variable object in the execution environment to store variables and their internal functions. The window that we often use is the outermost execution environment, also called the Global execution environment, after each execution environment's code executes, the environment is destroyed, and the variable objects are destroyed, and the global execution environment is destroyed only when the browser or Web page is closed. The other execution environment (or internal) is the Local execution Environment (function).

Each function has its own execution environment, then when the execution flow of the code enters a function, it pushes the execution environment into an environment stack, ejects it after the function is executed, and returns control of the execution environment to the previous execution environment, when the code executes in an execution environment. The variable objects in the environment are attached to the scope chain . The role of a scope chain is to ensure an orderly access to variables and functions that have access in the execution environment. Speaking of which, you may be a little confused, then use a bit of code and pictures to explain it.

Window Scopevar NAME0 = ' SCOPE0 '
Console.log (NAME0)  //can be accessed here to Name0function Scope1 () {
var name1 = ' Scope1 '
Console.log (NAME0,NAME1)  //Here can access to Name0,name1function scope2 () {var name2 = ' Scope2 '
Console.log (name0,name1,name2)//can be accessed here to Name0,name1,name2 function Scope3 () {var name3 = ' Scope3 '
Console.log (NAME0,NAME1,NAME2,NAME3)//can be accessed here to Name0,name1,name2,name3}}}

When the JS interpreter executes this code, it generates 4 execution environments, namely window,scope1,scope2,scope3. Then when the JS code is executed, each execution environment is pushed into the execution stack, and the variable object is generated to connect to the scope chain (top to bottom), and the resulting scope chain is:

Window→scope1→scope2→scope3

For a variable object in each execution environment, its scope chain is the variable object that it was born with (for example, the scope chain of Scope2 is scope2 and its previous scope1 and window). As we said earlier, the variable object in each execution environment is that the execution environment has access to variables and functions, and as the individual understands that this function is the variable object on the scope chain of the variable object, it is well understood that we analyze what is on the variable object above the code scope2, The first is the parameter array (arguments, []) and the name2 variable, followed by the Scope1 variable object and the global variable object.

Speaking so much, mentioning so many concepts and nouns, we seem to just talk about the scope chain, but did not mention the scope, this is not nonsense!!!! Well, let's talk about scopes now.

　　

Let's start by pulling the concept. Is that each execution environment can access the other execution environment of this his scope chain up through the scope chain, but cannot be accessed down. This is the scope ...

Or take the Scope2 function, he can access the NAME2,NAME1,NAME0 but not access Name3, this is the scope of the qualification, he can only access to the Scope1 and window execution environment (and it itself). Well, just a little bit, I'm drunk, but personally I think the scope of this thing, the key is in the execution environment, variable objects and scope chain understanding. These are the keys to a solid understanding of the JavaScript scope.

　　

Actually speaking here I feel already almost, the first time to write so long blog post, the article level has yet to be improved, this article is mainly I look at the "JavaScript Advanced Program Design" see the scope of this section, feel the author wrote too Good, and then added some personal understanding on this blog. Very much hope to have a deep understanding of web development to provide criticism and insight.

　　

The commonplace JavaScript scope problem