Ask yourself a few more whys every day, and you will always get unexpected results. The growth path of a rookie Xiaobai (copyer)

Episode 1: Understand the execution flow of js code

Think about it, when you get a website address and open it in a browser, a page will be displayed? why? What was the process like?

http://www.baidu.comto explain.

http://www.baidu.comthis is a domain name
When the website is opened in the browser, it will pass through DNSand resolve the domain name into aIP地址
Then it will IP地址find the corresponding one 服务器, and then the server will return aindex.html
This index.htmlfile is what the browser displays.

In the above process, the server returns one index.html, so how does the browser parse it?

pass浏览器的内核

index.htmlThe code in parsing linkwill be downloaded from the server when it encounters a tagcss的静态资源
If scripta tag is encountered, it will be downloaded from the serverjs的静态资源

browser kernel

Gecko : Early used by Netscape and Mozilla Firefox browsers
Trident : Started by Microsoft, used by IE4 ~ IE11 browsers, but Edge browser has turned toBlink
Webkit : for Safari, Google Chrome (formerly)
Blink : is a fork of Webkit, developed by Google, for Google Chrome, Edge, Opera

In fact, the browser kernel we often refer to refers to 浏览器的排版引擎
the typesetting engine , also known as the browser engine , page rendering engine , and template engine.

JavaScript engine

Advanced programming syntax needs to be converted into final machine instructions for execution
Regardless of whether the JavaScript we write is handed over to the browser or Node for execution , it needs to be executed by the CPU in the end.
But the CPU only knows its own instruction set, which is actually machine language , and can be executed by the CPU.
So we need a JavaScript engine to help us translate JavaScript code into CPU instructions for execution

Therefore, the commonly used engine now isV8引擎

The basic process of v8 engine parsing JavaScript code

JavaScript code -----> lexical analysis, generate tokens -----> generate abstract syntax tree (AST) -----> Ignition (interpreter), will convert AST into ByteCode (bytecode)

code execution process

var name = 'copyer'
function foo() {
    var name = 'james'
    console.log(name)
}
var a = 20
var b = 30
var res = a + b

console.log(res)

foo()

Execution context stack (call stack)

There is an execution context stack (Execution Context Stack, ECS for short) inside the js engine , which is a call stack for executing code

The code inside contains two parts of code: 全局代码（全局执行上下文）and函数（函数执行上下文）

Initialize the global object

The js engine will create a global object in the heap memory before executing the code: Global Object (GO)

All scopes of the object are accessible
It will contain Date, Array, String, Number, setTimeout, setInterval, etc.
There is also a window attribute pointing to itself

console.log(window.window.window)  // 都是指向这个全局对象

    var GlobalObject = {
        Date: function(){},
        Array: function(){},
        Number: function(){},
        setTimeout: function(){},
        window: GlobalObject
    }

And before the code is executed, GlobalObjectthe method is executed on the above stack, and in the process of parsing the lexical analysis of JavaScript code, global variables and functions will also be added to it BlobalObject.
This process is also called variable hoisting (hoisting)

    var GlobalObject = {
        Date: function(){},
        Array: function(){},
        Number: function(){},
        setTimeout: function(){},
        window: GlobalObject,
        
        name: undefined,
        foo: 0x123,
        a: undefined,
        b: undefined,
        res: undefined
    }

Summary: The global object (GO) is placed `执行上下文栈`in the bottom of the stack; when the code does not start to execute, it will be parsed first, and the variables and functions will be placed in the GO object, and then when the code starts to be executed, the variable will be executed assignment.

function execution

When a function is executed during execution, a function execution context (Function Execution Context, FEC for short) will be created according to the function body, and pushed into the execution context stack

The FEC consists of three parts:

The first part: when parsing the function into an AST tree structure, an Activation Object (AO), an active object, will be created
- AO contains formal parameters, arguments, function definition and function formation, defined variables
The second part: Scope chain: It consists of VO (AO object in the function) and parent VO, which will be searched layer by layer when searching
The third part: the value of this

Summary: When the function is executed, the function execution context is placed on the top of the stack execution context stack , and the stack operation is performed. After the function is executed, the stack operation will be performed.

Target

Understand what is the execution context stack
Understand GO, and the rules in it
Understand the function execution above the stack, the binding rules inside

JS Learning (1): Understand the execution process of js code