Make writing a habit together! This is the second day of my participation in the “Gold Digging Day New Plan · April More text challenge”. Click here for more details.

preface

In the front end, JS code can run in the environment including “browser environment”, “App environment (based on WebView)”, “Node environment”, but no matter what environment to execute JS code, need to open up the relevant memory, It is used to store the value “Heap storage” and run the code “Stack Stack memory -> ECStack Execution environment Stack -> Execution Context Stack”.

GO

Our JAVASCRIPT code runs in the browser, which provides us with a lot of built-in apis and methods. These built-in apis and methods reside in the heap memory space. When we open a page, the first thing the browser does is create a space inside the browser for built-in apis and methods. For example, the GO (Global Object) global object: stores the browser’s built-in API and assigns it a hexadecimal memory address.

EC(G)

When we start executing a piece of JS code, we execute the global code first. There is a distinction between the global execution environment and the private function execution environment during code execution. To distinguish the global execution environment from the private function execution environment, each function execution creates its own private execution environment.

The global execution environment is called the global execution context, also known as EC(G), which is used for global code execution. The global variable object VO(G) is provided, which is used to store variable objects declared globally.

GO VS EC(G)

Here we need to distinguish between the global variable object VO(G) and the global object GO, which are two different things but related.

  • GO: memory opened in heap memory, used to store the global built-in API, method.
  • VO(G) : Memory opened on the stack to store variables declared in the global context.

However, in the browser environment, a variable window (depending on the execution environment) is declared in EC(G) by default to execute global objects in heap memory.

Stack memory VS heap memory

Function of stack memory

  1. The execution environment of the code, which places the code in different execution contexts.
  2. Stores a value of the original value type.
  3. The supplied variable object (VO/GO) stores variables declared in the current context.

The role of heap memory

  1. Storing the value of an object, as long as it is a reference type, creates space (hexadecimal address) in the Heap to store the key-value pair of the object (or the code string of the function).

For example

When you have the following code, execute it in the browser environment. When “declaring a variable equal to a value”. What does the browser do?

// global execution context let a = 1; var b = 2; let c = { name: 'stone', age: 13 };Copy the code

When let variable = value; , the browser performs three steps:

  1. Create values (primitive types are stored directly on the stack and object types are stored in the heap).
  2. Declare a variable in a variable object.
  3. The operation of associating variables and values is called defining.

When var = value; There is a difference between when and let:

In “global context”, variables declared based on let/const are stored in VO(G), but variables declared based on var/function are stored directly in GO, so strictly speaking, A variable declared based on var/function is not a global variable, just a property of a global object.

var a = 1; function b() {}; let c = 2; console.log(window.a); console.log(window.b); console.log(window.c); ƒ b() {} VM58:6 undefinedCopy the code

So for the above code, the JS code execution will do the following.

  1. First, create a value of 1 in stack memory, VO(G) and associate variable A;
  2. Then create a value of 2 in heap memory, GO, and associate variable B;
  3. Name: ‘stone’, age: 13; name: ‘stone’, age: 13
  4. And then in stack memory, declare variable C;
  5. Finally, associate the variable C with memory 0x 001.

Global context variable access and assignment

The global context accesses variables

  1. First check to see if there are any variables in VO(G), and if so, global variables.
  2. VO(G) no, check if GO is available based on the window, yes is an attribute of the global object.
  3. If it’s not in GO, it says “XXX is not defined.”

The global context assignment variable: A = 100

  1. First check whether the assigned variable is a global variable and modify the attribute value if so.
  2. If not, just add an attribute value to GO.

Interview exercises

Let’s look at an interview practice, and we’ll go through the code flow by drawing

let a = { n:1 };
let b = a;
a.x = a = { n: 2 };
console.log(a.x);
console.log(b);
Copy the code

let a = { n:1 };

When let variable = value; , the browser performs three steps:

  1. Create values (primitive types are stored directly on the stack, object types are stored in the heap), so create a new memory space in the heap memory, assuming the memory address is 0x001, to store n: 1.
  2. Declare a variable. Declare a variable a in the variable object.
  3. Associate variables and values to associate a with the memory address 0x001.

let b = a;

  1. Create the value (primitive type is stored directly on the stack, object type is stored in the heap) and find that the value is the value of A and the memory space address is 0x001.
  2. Declare a variable. Declare a variable B in the variable object.
  3. Associate variables and values to associate B with the memory address 0x001.

a.x = a = { n: 2 };

  1. Create values (primitive types are stored directly on the stack and object types are stored in the heap), so create a new memory space in the heap memory, assuming the memory address is 0x002, to store n: 2.
  2. Note the order in which the code is assigned. Under normal circumstances, when “x = y = 10; , the code executes from right to left y = 10; X = 10(or x = y), but priority matters here. Attribute access takes precedence over assignment, so the order of execution is different, a.x = {n:2}, followed by a = {n:2}. 3. Add attribute X to the heap memory 0x001 and assign the memory address of memory 0x002.
  3. Assign variable A to the new memory address 0x002;

Once you have drawn the stack memory diagram, the result of the output is obvious.

console.log(a.x); // undefined
console.log(b); // { n:1 x: { n: 2 } }
Copy the code

Did you get that right? In fact, the interview question about stack memory, at the beginning of the not very skilled when just need to draw a picture will certainly get the result, when you are skilled after this picture will clearly appear in your brain without drawing.

reference

  • Juejin. Cn/post / 684490…
  • www.javascriptpeixun.cn/course/3797…
  • Developer.mozilla.org/zh-CN/docs/…
  • Developer.mozilla.org/zh-CN/docs/…
  • Note.youdao.com/web/#/file/…