Front-end-JavaScript scope and operation analysis

Scope

The scope in JavaScript is divided into global scope , function scope , block scope .

Global scope

Variables declared in the global scope can be accessed anywhere.

var messge = 'Hello'
function say(){
  console.log(message)
}
say(); // Hello

Function scope

Variables declared in a function can only be accessed from within the function.

function say() {
  var messge = 'Hello';
  console.log(messge);
}
say(); // Hello
console.log(greeting); // ReferenceError: messge is not defined

Block scope

ES6 introduced the let and const keywords, and the variables declared by them can only be accessed from within this code block.

{
  let messge = 'Hello';
  console.log(messge);
}
console.log(messge); // ReferenceError: messge is not defined

Static scope

It is determined at the time of lexical analysis (compile time).

let number = 42;
function printNumber() {
  console.log(number);
}
function log() {
  let number = 54;
  printNumber();
}

log(); // 42

Scope chain

When JavaScript is running, the engine will first look for the variable in the current scope. If it can’t find it, it will look up the parent scope layer by layer to find the top-level global scope. If it still cannot find it, it will return undefined .

var g = 'Global hello'
function f1() {
    var g1 = 'G1 hello';
    function f2() {
        var g2 = 'G2 hello'
        function f3() {
            console.log(g, g1, g2)
        }
          f3()
    }
      f2();
}
f1(); // Global hello G1 hello G2 hello

Run analysis

Execution context

execution context is an environment for executing a piece of JavaScript, which stores some necessary information for executing the code. The execution context is divided into global execution context and function execution context .

• global execution context , there will only be one in a program, the code outside the function is run global execution context
• function execution context , the function will create a corresponding function execution context every time the function is called.

The execution context includes variable environment ( Variable environment ), scope chain ( Scope chain ), and this points to it.

• Variable environment, all variables and object references and call parameters inside the function.
• The scope chain is composed of references to variables outside the current function.
• this points.

From the perspective of the memory structure of JavaScript runtime, the call stack is a collection of execution context

Case study

Case number one

This is an ordinary JavaScript example, running process analysis:

var msg = 'Global hello'

function say() {
    var msg = 'Hello'
      return msg;
}

var s = say();
console.log(message) // Hello

1. Create global execution context , and then put it on the call stack.
2. Call the function say() , create say() of function execution context , incorporated into the call stack.
3. After executing the say() function, the result is returned, and the s variable in the global execution context is updated.
4. say the execution context of the 0617c1383817fc function from the stack.

Case two

The difference is that with the above example, the return value is a function of this anonymous function, also known as closures, which accesses the variables outside the function, even if the external function execution context after being popped off the stack, it can still hold an external variable references. The running analysis is as follows:

var msg = 'Global hello'

function say() {
    var msg = 'Hello'
    return function() {
        console.log(msg)
    };
}

var s = say();
s()

1. Create global execution context , and then put it on the call stack.
2. Call the function say() , create say() of function execution context , incorporated into the call stack.
3. After executing the say() the result is returned, and the s variable s is the function type, and it still holds the say var = msg reference.
4. say the execution context of the 0617c1383819dd function from the stack.
5. Execution s() , create s() of function execution context .
6. s() the execution context of the 0617c138381a25 function from the stack.

Questions

Dynamically execute the following code in your mind.

Topic 1:

var msg = 'Global hello'

function getMsgFunc() {
    var msg = 'Hello';
    function getMsg() {
        return msg;
    }
    return getMsg();
}
console.log(getMsgFunc());

Topic 2:

var msg = 'Global hello'

function getMsgFunc() {
    var msg = 'Hello';
    function getMsg() {
        return msg;
    }
    return getMsg;
}
console.log(getMsgFunc()());

Topic Three:

     var msg = 'Global hello'

　　var obj = {
　　　　msg : 'Hello',

　　　　getMsgFunc : function(){
　　　　　　return function(){
　　　　　　　　return this.msg;
　　　　　　};
　　　　}
　　};
　　console.log(obj.getMsgFunc()());

Topic 4:

     var msg = 'Global hello'

　　var obj = {
　　　　msg : 'Hello',

　　　　getMsgFunc : function(){
              var that = this
　　　　　　return function(){
　　　　　　　　return that.msg;
　　　　　　};
　　　　}
　　};
　　console.log(obj.getMsgFunc()());