The preface

Let’s start by reviewing the previous section: we introduced JavaScript syntax, variable declarations, data types, operators, statements, and functions. Fourth level of knowledge for today. Take notes. Here we go.

MIND

Raw and reference values

ECMAScript variables include both original and reference values, with the following differences:

  • Composition: Primitive values are the simplest data, while reference values are objects composed of multiple values
  • Access: the variable that holds the original value is accessed by value, operating on the actual value stored in the variable; A variable that holds a reference value is accessed by reference; the actual operation is a reference to the object
  • Dynamic properties: Raw values cannot have properties, whereas reference values do, and properties (and methods) can be added, modified, and removed dynamically
  • Copy value: When a variable is assigned to another variable, the value in the variable is copied to the location of the new variable, but the original copied value is a copy of the value, and the reference value is a pointer to an object stored in heap memory.

Passing parameters

When a parameter is passed to a function, it is passed by value, either as an original value or as a reference value. That is, a value outside the function is copied to an argument inside the function. In ECMAScript, function parameters are local variables, so values passed by value are copied to a local variable.

Confirm the type

The typeof operator used in the previous section does a fine job of detecting raw values, but only “object” and even null values. Instanceof solves the problem.

const colorList = ['green'.'yellow'.'cyan'];
console.log(colorList instanceof Array); // true
Copy the code

Note that checking the raw value with instanceof returns false

Execution context

This is the most important knowledge point in this chapter, which may require a better understanding of the following knowledge. Here are just some concepts.

Execution Context (EC)

  • Before executing executable code, the JS engine parses the code to create execution context
  • Definition: The JS execution environment that determines which data a variable or function can access and how it behaves
  • Categories: Global execution context, function execution context, Eval execution context (rarely used)
  • Component elements: Variable Object (VO), Scope chain, this (described in the following chapter)
  • Management: Execution Context Stack (ECS)

Execution context stack

  • Global execution context: The outermost context and the lowest level in the execution context stack. Any code that is not inside a function is in the global context
  • Each time a function is called, a new context is created for the function

Used to manage the execution context, when JS begins to explain the execution code, the first encounter global execution code, initialization will be the corresponding global execution context to the bottom of the stack, waiting for the completion of the program will be emptied. Program execution encountered function execution code, create the function execution context, push the execution context stack, wait for the completion of the function execution, follow the last in, first out rule of the stack, the function execution context will pop out from the stack

The variable object

The variable object holds all variables and functions defined in the context, is not accessible through code, and is used to process data in the background.

Global object

A variable object in a global context is a global object, depending on the host environment. In a browser, a global object is a Window object. Global objects are predefined objects that serve as placeholders for global functions and global properties of JS. You can access all other predefined objects, functions, and properties by using global objects.

Active objects

In the context of function execution, an activation object (AO) is used as a variable object. Active objects are created when the function execution context is entered and initialized via the function arguments property. The object itself is the same thing as the edge object, but the difference is that an active object is an active variable object on which various properties can be accessed.

The scope chain

A scope chain determines the order in which code in each level of context accesses variables and functions. It is essentially a list of Pointers to variable objects, with global variables always at the top of the scope chain. When a variable is looked up, it is looked up from the variable object of the current execution context, or if it is not found, from the variable object of the parent context until the global variable is found.

The scope chain is enhanced

In addition to the three execution contexts, the scope chain can be enhanced by adding a context temporarily to the front of the scope chain, usually in two ways:

  • The catch statement of a try/catch statement
  • With statement

recommended

This part needs to be understood well, and the following articles are recommended to be chewed over:

  • 冴 feather
    • The context stack
    • The variable object
    • The scope chain
    • Execution context
  • cavszhouyou
    • Execution context
    • The variable object
    • The scope chain
    • Perform context sample analysis

scope

Scope is the area of a program’s source code where variables are defined. Does it specify how to find variables and determine access to them by currently executing code

Variable ascension

When a var declares a variable, the variable is automatically added to the nearest context, the global or function context, and is carried to the top of the global or function scope, before all code in the scope, resulting in a variable promotion

Temporary dead zone

There is actually a variable promotion in the let declaration variable, but the block-level scope it creates has a temporary dead zone, and the let declaration variable cannot be used before the declaration, so it appears that the variable is not promoted.

The garbage collection

JS implements memory allocation and idle resource recycling through automatic memory management.

  • Identify a variable that is no longer in use, and then release the memory occupied by that variable.
  • Pitfalls: It is difficult to determine if a variable is no longer in use
  • Solution: Use tag strategy to track whether variables will still be used, mainly include: tag cleaning and reference counting

Mark sweep

In garbage collection, all variables stored in memory are marked first, and then all variables in context, as well as variables referenced by those variables, are marked off. Finally, the garbage collector cleans up memory, destroying all tagged values and reclaiming their memory.

Reference counting

Uncommon policies. The idea is to keep track of how many times each value is referenced. The initial declaration is 1, and this value varies with the variable holding the value. When a variable is assigned a value by reference, it is incremented by 1, and when overwritten by another value, it is subtracted by 1. If the reference value is 0, the value memory is freed at garbage collection time

performance

The periodical running of garbage collection program will affect the running of the program, resulting in performance loss. Each browser engine decides when to run based on the detection of the JS runtime environment, which varies from one browser engine to another. Chrome V8 is based on the number of active objects to increase some margin, and IE is allocated a fixed number, performance is poor.

Memory management

To avoid running a lot of JS and running out of memory, the memory allocated by the browser is limited. Need to optimize memory footprint:

  • Dereference: Unneeded data, set to null, waiting to be released
  • Declaration optimization: Don’t use var, use const first, then let, the latter two can go into garbage collection faster
  • Hidden classes: Avoid adding attribute assignments dynamically through hidden classes, declaring them once in advance in constructors
  • Avoid memory leaks: Avoid accidental declarations of global variables, timer with close statements, and use closures with caution
  • Static allocation and object pooling: Static allocation is an extreme form and is not considered. The object pool policy is to create an object pool to manage the recyclable objects without initializing them, avoiding garbage collection detection, and therefore not triggering the garbage collector frequently

conclusion

This chapter is quite empty, emmmm, but it’s all very important and needs to be read more, or summed up more easily if you know the other chapters of the Little Red Book. So, the next chapter: Basic reference types.