JavaScript scope (chain) Learning notes

The scope is a cliché of JavaScript, and is often seen in interview questions. This article records my understanding of JS scope. This paper explores the JS scope and the JS scope chain from the following three aspects.

　　1. What is a scope?

　　2. What is a scope chain?

　　3, common face questions.

　　

　　What is a scope?

　　　　People who are familiar with programming are exposed to scopes such as global variables and local variables. Scopes are scopes that variables and functions can access, that is, scope controls the visibility and life cycle of variables and functions.

var name = "Aralic"; function Person () {    // local variable      var age = "$";         // "China"    Console.log (name);  //   ' aralic '    console.log (age);   //    }person ();    

In this code, the function person creates a scope in which the variable age is defined and cannot be accessed outside of the function person. But inside the function person is accessible to the variable name,

Because name is defined outside the function person, the relative function person is a global variable.

　　Second, what is the scope chain?

　　　　In fact, the above example has already appeared the scope chain. Originally wanted to draw the explanation, unfortunately the drawing Foundation is too poor. Let's just go to the code.

 var  country = "China"  function   China () { var  name =" Aralic ";  function   person () { //  var  age =" $ ";    Console.log (country)  //  "China"   Console.log (name); //    ' Aralic '  console.log (age); //     } person (); }china ();  

In the function person, the process of accessing country: first from the inside of the function, found that there is no country this variable, that play the outer function of China to find, the results still did not find, then continue to find, the results found, not easy ah, hey, that this is the scope chain, tied up, very powerful, There's Wood there!

extension: see here, have a small partner to ask, if in the function person also define a variable country= "American", what will be the result? Will the variable conflict?

Loudly tell you, will not conflict, the result is directly print out American. Does not look for the outer layer. This creates a complete scope chain, and if the top window of the browser is found, the target variable and function are not accessed.

That directly returns the script error!

performance-related tips: if the function is nested deep, then we use the native method in the innermost function such as document.getElementById (ID); So this document, do we need to look out a layer at a level,

That considering the performance problem, whether we can directly in the function to assign the document to a variable, that every time as long as the access to this variable terminates the search!

Three, Common interview questions:

We have learned the scope and scope of the chain of knowledge, then look at a few face questions.

First question:

var  Name = "Aralic"; function Person () {   console.log (name);    var name = "Aralic";
}person ();

When the blogger first saw this topic, he thought the answer was Aralic, did anyone think the same as I did?

JavaScript has a pre-compilation process before the function executes.

When a function person is called, it is precompiled, the variable and function declarations are promoted, and the

function Person () {  var// does not assign an initial value of   console.log (name); // input undefined  var name = "Aralic";   // Output Aralic } person ();

The second question:

  var name = ' Aralic ';   function Person () {        console.log (name);   }     function Test () {       var name = ' Tom ';       Person ();   }    Test ();

This topic looks a bit around, first execute the test function, then call the person function inside the test function, execute the person function, print the name variable, whether the name variable is from the test function, or directly access the outermost name global variable. This topic is related to the scope chain, saying that the person and the test function are the same position, so the name is looked up directly from the outermost.

For more questions: Please read the second section of the single page Web application for more detailed information.

JavaScript scope (chain) Learning notes