What's under the hood of JavaScript?

Basic Data Types of JavaScript

The basic data types of JavaScript include: numbers, strings, Boolean values, null, undefined. Among them, the number type can be an integer or floating point number, the string type is represented by single quotes or double quotes, the Boolean value only has two values of true and false, null represents an empty value, and undefined represents an undefined value.

In the underlying implementation of JavaScript, each data type has a corresponding internal representation and operation method. For example, numeric types are internally represented using the IEEE 754 standard, string types are represented using the Unicode character set, boolean values are represented using 1 and 0, and null and undefined are special values.

JavaScript variables and scope

JavaScript variables are declared using keywords such as var, let, and const, and can store values of various data types. The scope of JavaScript is divided into global scope and function scope. The scope of a variable determines its visibility and life cycle.

In the underlying implementation of JavaScript, the implementation of variables and scopes involves concepts such as lexical scope, execution context, and variable objects. The JavaScript engine will compile before the code is executed, and generate execution context and variable objects, which are used to store information about variables and functions. When the code is executed, the JavaScript engine looks for variables and functions in the order of the scope chain, and performs corresponding operations.

JavaScript functions and closures

A JavaScript function is a special object that can be used as a parameter, return value, variable, etc. JavaScript functions can be defined using the function keyword, or they can be defined using arrow functions. JavaScript functions support closures, variables and functions that can access external functions.

In the underlying implementation of JavaScript, the implementation of functions and closures involves concepts such as function objects, scope chains, and variable objects. The JavaScript function object includes function code and function scope, and the function scope includes the function's own scope and external scope. In the closure, the JavaScript engine will save the variables and functions of the outer function in the closure for use by the inner function.

JavaScript Objects and Prototypes

A JavaScript object is a composite data type that can store multiple properties and methods. JavaScript objects can be created using object literals, constructors, Object.create, etc. JavaScript objects support prototypal inheritance, and the inheritance and rewriting of properties and methods can be realized through the prototype chain.

In the underlying implementation of JavaScript, the implementation of objects and prototypes involves concepts such as objects, prototypes, constructors, and inheritance. JavaScript objects are composed of constructors and prototype objects. Constructors are used to create object instances, and prototype objects are used to store shared properties and methods. In inheritance, the JavaScript engine looks for properties and methods in the order of the prototype chain, and operates accordingly.

JavaScript events and asynchronous programming

JavaScript events are an interactive method that can respond to user operations and system events. JavaScript events can be registered and canceled by methods such as addEventListener and removeEventListener. Asynchronous programming in JavaScript is a way to deal with time-consuming operations and callback functions, which can be implemented using methods such as setTimeout, setInterval, Promise, async/await, etc.

In the underlying implementation of JavaScript, the implementation of events and asynchronous programming involves concepts such as event queues, event loops, and callback functions. JavaScript's event queue is used to store events and callback functions, and the event loop is used to execute events and callback functions in order. In asynchronous programming, the JavaScript engine will save asynchronous operations and callback functions in the event queue, and perform corresponding operations during the event loop.

operating mechanism

From the perspective of operation, JS is a parser, executor, and garbage collector provided by JavaScript operating environments such as browsers or Node.js. These low-level components work together to allow JavaScript code to be parsed, executed, and memory managed.

A parser is the first step in JavaScript, which converts JavaScript code into executable computer instructions. A parser reads the code and turns it into an Abstract Syntax Tree (AST), which is then converted into bytecode or machine code for the computer to execute. The parser also checks the syntax and semantics of the code to ensure it is correct.

The executor is the second step in JavaScript, which executes the bytecode or machine code generated by the parser. The executor executes each instruction in code order and stores the result in memory. The executor also has some optimization strategies, such as just-in-time compilation (JIT) and pre-parsing (Pre-Parsing), to improve code execution efficiency.

The Garbage Collector is the third step in JavaScript, which is responsible for reclaiming memory that is no longer used. JavaScript uses an automatic garbage collection mechanism. The garbage collector periodically scans memory to find variables and objects that are no longer used, and releases them so that other variables and objects can use these memory spaces. There are many algorithms for garbage collectors, such as mark clearing, reference counting, etc.

In addition to parsers, executors, and garbage collectors, there are some features at the bottom of JavaScript, such as prototype inheritance, closures, and event loops. These characteristics make JavaScript a powerful programming language and make JavaScript widely used in different fields such as web applications, server-side applications, and desktop applications.

Single-threaded execution: JavaScript is executed on a single thread, that is, only one task can be executed at a time. This is due to the runtime environment of JavaScript, for example, the browser has only one UI thread.

Event-driven: JavaScript is event-driven, that is, by listening to events to trigger the execution of corresponding code. For example, clicking a button triggers a click event, which executes the corresponding JavaScript code.

Dynamic Type: JavaScript is a dynamically typed language, that is, the type of variables can be changed dynamically at runtime.
Prototype inheritance: JavaScript uses prototype inheritance to realize the inheritance relationship between objects, rather than traditional class inheritance. This makes JavaScript more flexible and extensible.

Knowing and being able to use JavaScript is the first step, and the second step is to understand it better. Knowing the underlying implementation of JavaScript can better understand the characteristics and behavior of JavaScript, help us optimize code, improve application performance and reliability

Why do you want to understand the bottom layer of javascript?