JavaScript study notes (3): JavaScript also has an entrance Main function_javascript skills

In C and Java, there is an entry function or method for the program, that is, the main function or main method. In JavaScript, the program starts running from the head of the JS source file. But in a sense, we can still make up a main function as the starting point of the program. In this way, not only can it be unified with other languages, but maybe you will have a deeper understanding of JS.

1. Actual entrance

When a JavaScript file is handed over to the JS engine for execution, the JS engine executes each statement one by one from top to bottom until all the code is executed.

2. Scope chain, global scope and global object

We know that every function in JS will create a new scope when executed. Specifically, a new scope will be created when the execution process enters the function, and this scope will be destroyed when the function execution completes and exits. The formal parameters and local variables of the function will be bound to this scope. When the function call completes the scope destruction, they will be destroyed accordingly. Of course, in special cases, if some variables in the scope are still referenced when the function returns, the scope and these referenced variables will not be destroyed, forming a so-called closure.

On the other hand, we know that functions can be nested, so scopes can also be nested. When a function is defined, the JS engine will set a built-in attribute called [[scope]] for each function, which points to the lexical scope of the external function. In this way, multiple scopes form a chain structure called a scope chain. Normally, there is only one scope chain at any time, that is, starting from the scope of the executing function and tracing upward layer by layer until the outermost global scope.

[Note]: Functions on the scope chain are functions nested layer by layer in the JS source code. They have nothing to do with the order in which the functions are executed or the function call stack. This is also the origin of the name lexical scope.

The global scope is a special scope. It is not a function scope, but it is the outer scope of all function scopes and the end point of all scope chains. Therefore, as long as the program does not exit, the global scope always exists, and the variables in the global scope are always valid.

[Scope of function 3]-->[Scope of function 2]-->[Scope of function 3]-->[Global scope]

In addition, corresponding to the global scope, there is a global object. In the browser, the global object is the window object. The global object is a special object:

Variables defined in the global scope will be bound to the global object.

Variables defined in any scope, if defined without the var keyword, will be bound to the global object.

In the global scope, this points to the global object.

It can be seen from the characteristics listed above that if the global scope is regarded as an object, then it is actually the global object. In addition, this also explains why the following four statements are equivalent in the global scope:

var a = 1;
a = 1;
window.a = 1;
this.a = 1;

3. Imaginary main function

Since they are all scopes, why do we need a special global scope? We always prefer simplicity and consistency and try to avoid complexity and specificity. So naturally, we wonder if we can make the global scope look the same as the function scope? The answer is yes. We can think of this:

We imagine that when the JS engine executes the source file, it will wrap the code in the file into a function called main. Then use this main function as the entry point of the program.
That is, suppose there is code like this in a JS file:

var a = 1;
var b = 2;

function add(x, y) {
  var z = x + y;
  return z;
}
console.log(add(a, b));

The JS engine will wrap the program into a main function before it starts executing:

// 虚构的main函数
function main() {
  var a = 1;
  var b = 2;

  function add(x, y) {
    var z = x + y;
    return z;
  }

  console.log(add(a, b));
}

Then, call this main function:

main._current_scope_ = window; // 将全局作用域(对象)设为window
main.call(window) // 将this指向window

4. What’s the significance?

(1) JS also has the entry function main, which is consistent with other languages.

(2) The concept of global scope is omitted, or the global scope becomes the function scope.

(3) Through the above calling process of the main function, we can understand the origin of the special properties in the global scope.

(4) The last point is to treat all JS source code as a function to pave the way for the event queue and event loop later.

The above are the JavaScript study notes (3) introduced by the editor to you: JavaScript also has the entrance Main function, I hope you like it.