Written in front, this is I will begin to write a series, mainly in the framework of time, although USES the framework to work, but for the interview, and advanced technology, the basics of JS bedding is the icing on the cake, also had to learn a piece of knowledge, though the car does not need to be very good car, you just need to master automobile commonly used functions. But if you know cars, you can drive better, same thing. Of course, an article will not only talk about a knowledge point, generally will be linked to the knowledge point series, while recording their own learning, while sharing their own learning, mutual encourage! If possible, please also give me a like, your like can also make me work harder to update!

An overview of

  • Serving time: 5-10 minutes
  • Difficulty: Easy, don’t run, watch before you walk

JS compilation principles

Let’s start with a line of code

var name='jack';
Copy the code

In our eyes, this is a one-line, one-statement thing, but in JS’s eyes, the code for this sentence should look like this

var name;    // Compile phase processing
name='jack';    // Execute phase processing
Copy the code

JS compilation is divided into two phases, the compile phase and the execution phase. Let’s take a look at what the two phases do respectively.

  • Compilation phase

    The main player at this stage is the so-called compiler, which searches the current scope to see if there is already a variable called name. If it already exists, then do nothing, ignore the var name declaration and continue compiling. If not, a new variable named name is added to the current scope. The compiler then generates the code for the engine to run, and the program enters the execution phase

  • Execution phase

    The protagonist of this phase is everyone acquaint with of JS engine, JS engine at run time, will look for The Times the current scope, see if there was a name is the name of the variable, and if so, then just good, direct assignment, if not, that is the current scope, how to do that, then consider go out, Go to the outside (parent scope) to see if there is no, no, then go to the outside to find, layer after layer (of course, if there is a parent layer), if the JS engine is unable to find, then throw an exception to others to see, indicating that they have tried.

    The above mentioned to look outside, layer after layer, from the current scope to the parent scope, and then to the parent of the parent scope, and so on, is the so-called scope chain, as the chain, a section of a section up, is not the description can be said to be very appropriate. In summary, scope sets scope, and there is a chain of scopes

scope

  • define

    As we all know, the basic ability of a variable is to store the value of the variable, and allow us to access and modify the value of the variable, and the set of rules for variable storage, access, is called scope

  • classification

    • Global scope

    The top-level scope outside of any function or code block is the global scope, and the variables inside are global variables

    var name='jack';   // Global scope

function showName(){    // Function scope
  console.log(name);
}
 {  name='test'; // Block level scope }  showName(); //test Copy the code

    You can see that global variables are accessible in global, function, or block-level scope

    • Function scope

    The scope within a function is the scope of the function

    function showName(){
  var name='jack';    // Function scope
}

showName();   // Method call
 {  console.log(name); // Block level scope,Uncaught ReferenceError: name is not defined }  console.log(name); // Global scope,Uncaught ReferenceError: name is not defined Copy the code

    You can see that the variables inside the function are not accessible in the global scope or the block-level scope, but only inside the function, so the variables inside the function are also called local variables

    • Block scope

    In ES6, the two new keywords, let and const, come with block-level scope. Block-level scope applies only to a block of code. If it is surrounded by braces {}, then the braces are a block of code

     {
   let name='jack';
 }

 console.log(name);    //Uncaught ReferenceError: name is not defined
  function showName{  console.log(name);  }   showName(); //Uncaught ReferenceError: name is not defined Copy the code

    You can see the variables in the block-level scope, but out of that block of code, you can’t find them

In fact, the above three cases, combined with the JS compilation principle and scope chain to the outside not to the inside of the search, think about it, it is not difficult to understand

The scope chain

Going back to scope chains, which I’ve already explained more or less, scopes and the nesting of scopes give rise to scope chains. Another feature to keep in mind is that the search for scope chains is outward, not inward. Just look out, not into the pot

Variable ascension

Let’s start with a piece of code

name='jack';
console.log(name);    //jack
var name;
Copy the code

You can see that this code does not report errors, and it works normally, combined with the above mentioned JS compilation principles, you can think, in the eyes of JS, its code actually looks like this, this is called variable promotion, basically that is the declaration of the code mentioned in the first part of the code

var name;
name='jack';
console.log(name);    //jack
Copy the code

In fact, this variable promotion should be written down according to the principle of compilation, why put it in the last, because if you forget, just scroll up, re-heat JS compilation principle

After that, let’s take a look at the let and const set of variables that don’t need to be raised

name='jack';
console.log(name)    //Uncaught ReferenceError: Cannot access 'name' before initialization
let name;
Copy the code

Black question mark?? Let and const are not allowed to promote variables. This is also a feature of ES6, which is deliberately designed to make the unavailable variables strong. In conclusion, ** var is promoted, let and const are not promoted **

Now that we’ve mentioned const, we should also mention that it declares operations that must be assigned later

const name;    //Uncaught SyntaxError: Missing initializer in const declaration
Copy the code

Temporary dead zone

On top of that, let’s look at what is called a temporary dead zone, so let’s look at a piece of code, right

var name='jack';

{
  name='bob';
  let name;    //Uncaught ReferenceError: Cannot access 'name' before initialization
} Copy the code

Remember a feature in ES6 that if there are let and const commands in a block, the variables declared by the block to those commands are initially scoped. Because JS clearly recognizes that name is declared in the current block of code with a let, it places a temporary deadzone on the variable name, so it doesn’t stick its head out.

So, if we take the let name above; Remove it, and the program will run normally, and the value of name will be successfully changed to Bob, which is to stick its head out of the scope chain.

Series directory

  • This article understands JS series (a) compilation principle, scope, scope chain, variable promotion, temporary dead zone

  • This article understands JS series (2) JS memory life cycle, stack memory and heap memory, depth copy

    JS series (3) to understand the garbage collection mechanism, memory leaks, closures

    Understand JS series (four) closure application – Currie, partial function

    Understand JS series (five) closure application – tremble, throttling

    JS series (6) micro task and macro task, Event Loop

    JS series (7) constructor, new, instance object, prototype, prototype chain, ES6 class

This article was typeset using MDNICE