Let's start with an example

const { log } = console;
var name = 'lsh';

log(num1); // undefined
foo(); // Hello

function foo() {
    var m = 10;
    log('Hello');
};
var num1 = 10;

Similarly, they are executed first and then declared. Why can foo print out when num1 is undefined.

1, First, to execute the global code, a global object is created

var GlobalObject = {
    String: 'class',
    window: GlobalObject,
};

2, Compile

1. When compiling our current code, there will be a name in it. Although we have defined the assignment of var, the compiled name will not be assigned, because it is an ordinary basic data type and it is not special.

var GlobalObject = {
    String: 'class',
    window: GlobalObject,
    name: undefined
};

2. When it is a function, it is a special data type, but foo() will not be executed when compiling. When function foo() comes, it will help you create another function object in memory, which mainly contains two things

The first is our parent scope[[scope]]: parent scope，In this file, it is actually equivalent to the global scope
 The second is the executor of our function(Code block)，It will be preserved

3. Because it will help you create another function object in memory, which is equivalent to opening up another memory space, there will be a memory address, such as 0Xa00. Then, in our global GlobalObject object object, foo is actually its memory address

var GlobalObject = {
    String: 'class',
    window: GlobalObject,
    name: undefined,
    foo: 0Xa00
};

Summary: it can be understood that the attribute of foo function refers to 0Xa00;

3, Execute

1. The execution process is from top to bottom. name has been assigned, so it is lsh.

implement foo It'll come to us when we get there GlobalObject To find foo,And found our
foo Is a memory address, and then found, we opened up another memory space.

then foo hinder()If there is code execution, it will be put into our call stack at this time, but it will not be executed immediately.

It creates another function execution context(FEC)，But there is still a process, and another one will be created AO object(Active object)

2. If we improve our foo function, change it to this

function foo() {
    log(m); // undefined
    var m = 10;
};
At this time, our AO The object should be {
    m: undefined
};

3. After the function is executed, our stack will pop up, and then the execution context will be destroyed.

Summary: so that's why we can print out the contents before declaring this function. The function will create a new memory space address for storage.

4, Interview questions

1.

var name = 'lsh';
foo(123);
function foo() {
  console.log(m);
  var m = 10;
  var n = 20;
  var name = 'foo';
  console.log(name);
};

name prints out 'foo'.

var name = 'lsh';
foo(123);
function foo() {
  console.log(m);
  var m = 10;
  var n = 20;
  console.log(name);
};

But when we remove var name = 'foo'; 'lsh' will be printed out at this time. Because when we find a variable, the real search path is along the scope chain.

Example:

For example, our current function execution context, in addition to one AO In addition to the object, there is another
scope chain, It is AO object+Composed of parent scopes. What is the parent scope,
It was established when we compiled the function

The first is our parent scope[[scope]]: parent scope，In this file, it is actually equivalent to the global scope
 The second is the executor of our function(Code block)，It will be preserved

Summary: for example, for our current foo function, its parent scope is global, and only functions in js will generate scope, so we can print 'lsh';

2.

function foo() {
  console.log(n);  // undefined
  var n = 200;
  console.log(n); // 200
};

var n = 100;
foo();

foo The function first creates a AO object, {
  n: undefined
};
foo The function will first look in its own scope

Summary:

first n，A0 There is something in the object undefined,So the first one n by undefined
 the second n，because n It has been assigned 200, so 200 will be printed

3.

var a = 100;
function foo() {
    console.log(a); //undefined
    return;
    var a = 100
};
foo();

Summary: Although var a = 100 cannot be executed, there will be a in our AO where a is undefined

4.

function foo() {
    m = 100;
};
foo();
console.log(m); // 100

Summary: at first glance, this is a syntax error, but js is very special and can print out 100. That is, if you write this in foo, the js engine defaults to a global variable

5.

function foo() {
  var a = b = 10;
    // =>Convert to the following two lines of code
    //   var a = 10;
    //   b = 10;
};
foo();

Summary:

console.log(a); // defined
console.log(b); // 10