Commonly used concept

  • Closures, prototypes
  • Class, inheritance,
  • MVC, Flux,
  • Higher-order functions
  • Front-end engineering

JS engine

Example of JS engine

  • Chrome uses the V8 engine and is written in C++
  • Netscape uses SpiderMonkey, later used by Firefox, C++
  • Safari uses JavaScriptCore
  • IE uses Chakra (JScript9)
  • Edge uses Chakra (JavaScript)
  • Node.js runs on a V8 engine

The main function

  • Compilation: To translate JS code into bytecode or machine code that the machine can execute
  • Optimization: Rewriting code to make it more efficient
  • Execute: Execute the bytecode or machine code above
  • Garbage collection: Recycle the memory used up by JS for easy reuse

Executing JS code

The preparatory work

  • Provide API: Windows/document/setTimeout
  • These functions are called the Runtime env
  • Once you put JS into the page, start executing JS

JS memory map

Image credit: Hungry Man Valley

The red areas

  • role
    • It’s designed to store data
    • The red area does not hold variable names. The variable names are in the “I don’t know what” area.
    • The allocation rules are different for each browser
  • The Stack and Heap
    • The red area is divided into Stack and Heap
    • Stack area features: Each data is stored in sequence
    • The Heap area features: Each Heap is stored randomly
  • regular
    • There are two types of data: non-objects and objects
    • Stack exists for all non-objects
    • Objects have Heap
    • The = sign always copies things on the right to the left (there is no passing or addressing)

JS introduction to the prototype of the three mountains

Browsers are shipped before JS execution

  • window
  • console
  • document
  • Object (object)
    • Var person = {} equivalent to var person = new Object()
  • Array (Array)
    • Var a = [1,2,3] = new Array(1,2,3)
  • Function (Function)
    • Function f(){} = new function ()

Window is in the memory diagram

Image credit: Hungry Man Valley

  • Pointer/reference means: Save address
  • View the function structure:console.dir(window.Object)

details

  • On the window
    • The window variable and the window object are two different things
    • The window variable is a container that holds the address of the window object
    • The window object is a lump of data in the Heap
  • In the same way
    • Console and console object are not the same thing
    • Object and Object function objects are not the same thing
    • The former is a memory address, the latter is a lump of memory

JS prototype chain

Image credit: Hungry Man Valley

Pay attention to

  • Obj has a hidden property
  • The hidden property stores the address of the Object.prototype Object
  • Obj.tostring () finds no toStrong on obj
  • I’m going to look inside the object of the hidden property
  • So he found the Object. The prototype. ToString

Prototype and __proto___

  • They all have the address of the prototype
  • Prototype hangs on the function
  • __proto__ hangs on each newly generated object