Basic summary in-depth

Classification and judgment of data types

• Basic (value) types
  • Number —– Any value ——– typeof
  • String —– Any character String —— typeof
  • Boolean —- true/false —– typeof
  • undefined — undefined —– typeof/===
  • null ——– null ———- ===
• Object (reference) type
  • Object —– typeof/instanceof
  • Array —— instanceof
  • Function —- typeof

Data, variables, memory understanding

• What is data?
  • Readable, transferable ‘something’ that holds specific information in memory
  • Everything is data, and functions are data
  • The target of all operations in memory: data
• What is a variable?
  • Its value is how much it is allowed to change while the program is running
  • A variable corresponds to a small piece of memory in which its value is stored
• What is memory?
  • Storage space created when a memory module is powered on (temporary)
  • A piece of memory contains two aspects of data
    • Internally stored data
    • Address value data
  • Classification of memory space
    • Stack space: global and local variables
    • Heap space: objects
• The relationship between memory, data and variables
  • Memory is a container for storing different data
  • Variables are memory identifiers through which we can manipulate (read/write) data in memory

Understanding and using functions

• What is a function?
  • A package of n statements used to implement a particular function
  • Only function-type data can be executed, nothing else
• Why use a function?
  • Improved reusability
  • Easy to read and communicate
• Functions are objects
  • instanceof Object===true
  • The function has the attribute: prototype
  • The function has methods: call()/apply()
  • New properties/methods can be added
• Three different roles for a function
  • General function: direct call
  • Constructor: called by new
  • Object: Yes. Invoke internal properties/methods
• This in the function
  • Explicitly specify who: obj.xxx()
  • Use call/apply to specify who calls: xxx.call(obj)
  • Does not specify who calls: XXX () : window
  • Callback function: see who calls it from behind: window/ other
• Anonymous function call:

  Function (w, obj){// implement code})(window, obj)Copy the code

  • The technical term is: IIFE (Immediately Invoked Function Expression) Invokes the Function Expression Immediately
• Understanding the callback function
  • What is a callback function?
    • You define
    • You didn’t call
    • But it was eventually executed (under certain conditions or at a certain time)
  • Common callback functions

    • Dom event callback function

    • Timer callback function

    • Ajax request callback functions (explained below)

    • Lifecycle callback functions (explained later)

Function senior

Prototype and prototype chain

The prototype

Object’s invisible prototype points to NULL. Funciton’s display prototype and invisibility prototype point the same

Display prototype and stealth prototype

• Display prototype (all functions have a special attribute) :
  • Each function has a prototype property that by default points to an empty Object (called: prototype Object).
  • The prototype object has a property constructor that points to the function object
  • To add attributes (usually methods) to a prototype object, all instances of the function automatically have attributes in the prototype (methods).
• All instance objects have a special property:
• __proto__: implicit stereotype property, used to find properties of objects (methods)

The relationship between explicit and implicit archetypes

• Prototype: the function is automatically assigned when it is defined. The default value is {}, i.e. the prototype object
• __proto__ of an instance object: added automatically when the instance object is created and assigned to the constructor’s Prototype value
• The implicit stereotype of an object is the explicit stereotype of its corresponding constructor

Summary of the relationship between display archetypes and invisible archetypes

• Function prototype property: added automatically when a function is defined. The default value is an empty Object
• Object’s __proto__ property: Automatically added when the object is created, defaults to the constructor’s Prototype property value
• Programmers can directly manipulate explicit stereotypes, but not implicit stereotypes (prior to ES6)

Prototype chain

The process of finding properties for objects:

• First look in their own properties, find the return
• If not, look up the __proto__ chain and return
• If not found, return undefined

Prototype chain

• All instance objects have a __proto__ attribute, which points to the prototype object
• This creates a chain structure through the __proto__ attribute —-> prototype chain
• When looking for properties/methods inside an object, the JS engine automatically looks along the prototype chain
• The stereotype chain is not used when assigning values to object properties, but only in the current object

Execution context and execution context stack

Variable promotion and function promotion

• Variable promotion: Access to the variable (undefined) before the variable definition statement.
• Function promotion: A function declared by function can be called directly before the function definition statement
• There’s variable promotion, then there’s function promotion

Execution context and execution context stack

• Execution context: An object automatically created by the JS engine that contains all variable properties in the corresponding scope

  Executing a function produces a function execution context, such as calling b(), which produces a function execution context

• Execution context stack: Used to manage the multiple execution contexts generated

  1. Before global code execution, the JS engine creates a stack to store and manage all execution context objects
  2. After the global execution context (Window) is determined, add it to the stack (pushdown)
  3. After the function execution context is created, add it to the stack (pushdown)
  4. After the current function completes, remove the object at the top of the stack (unstack)
  5. When all the code has been executed, only Window is left on the stack

Classification:

• Global execution context: window
  • Identify the window as a global execution context before executing global code
  • Preprocessing global data
    1. The global variable defined by var ==>undefined is added as the property of window
    2. Function declared global function ==> assignment (fun), added as window method
    3. This = = > assignment (Windows)
  • Start executing global code
• Function execution context: Transparent to the programmer
  • Create the corresponding function execution context object (virtual, on the stack) before calling the function and preparing to execute the function body
  • Local data is preprocessed
    1. Parameter ==> Assignment (argument)==> added as an attribute of the execution context
    2. Arguments ==> Assign (argument list) to add as an attribute for the execution context
    3. The local variable defined by var ==>undefined is added as an attribute of the execution context
    4. Function declared function ==> assignment (fun), added as an execution context method
    5. This ==> Assignment (the object calling the function)
  • Start executing the function body code

The life cycle

• Global: Generated before global code is ready to execute and dies when the page is refreshed/closed
• Function: generated when a function is called, dead when the function is finished

Performs the context creation and initialization process

• Global:
  • Create a global execution context first before global code execution (Window)
  • Collect some global variables and initialize them
  • Set these variables to properties of the window
• Function:
  • When a function is called, a function execution context is created before the function body is executed
  • Collect some local variables and initialize them
  • Set these variables to properties of the execution context

Scope and scope chain

Definition of scope

• It’s a piece of territory, an area where a piece of code is located
• It is static (as opposed to a context object) and is determined at code writing time
• Effect: Isolate variable, different scope under the same name variable will not conflict
• Scope: an area of code that is defined at coding time and does not change
• Scope chain: An inside-out structure of nested scopes used to find variables

. Rules for finding a variable

1. Finds the corresponding property in the execution context of the current scope, if any, and otherwise goes to 2
2. Find the corresponding attribute in the execution context of the upper scope, return it directly if any, otherwise go to 3
3. Do the same for 2 again, up to the global scope, and throw an exception if not found

The difference between scope and execution context

1. The difference between 1
   • Outside of global scope, each function creates its own scope, which is defined when the function is defined. Not when the function is called
   • The global execution context is created after the global scope is determined and immediately before the JS code executes
   • A function execution context is created when a function is called and before the function body code executes
2. The difference between two
   • The scope is static, existing as long as the function is defined and does not change
   • The execution context is dynamic, created when a function is called and released automatically when the function call ends
3. contact
   • The execution context (object) is subordinate to its scope
   • Global context ==> Global scope
   • Function context ==> Corresponding function usage field
4. Summarize their relationship
   • Scope: static, determined at code time (not at run time), once determined it does not change
   • Execution context: dynamic, created dynamically when code is executed and disappears when execution ends
   • Connection: The execution context is in the corresponding scope

Classification:

• global
• function
• Js has no block scope (prior to ES6)

role

• Scope: Isolate variables. Variables with the same name can be defined in different scopes without conflict

• Scope chain: Find variables

closure

concept

• Closures occur when nested inner functions refer to variables of external functions (external functions must be called)
• Using chrome tools, you can see that a Closure is essentially an object Closure within an internal function that contains referenced variable properties

Function:

• Extends the life cycle of local variables
• Allows the outside of a function to manipulate local variables inside

Closure application:

• Modularity: Encapsulate some data and the functions that manipulate it, exposing some behavior
• Loop through plus listen
• The JS framework (jQuery) makes extensive use of closures

Disadvantages:

• Variables may occupy too much memory
• Memory leaks may occur
• Solution:
  • F = null; // make the internal function object junk

Memory overflow and memory leak

Out of memory

• A program execution error
• An out-of-memory error is thrown when the program runs on more memory than is available

Memory leaks

• The occupied memory was not released in time. Procedure
• If memory leaks accumulate too much, they tend to overflow
• Common memory leaks:
  • Unexpected global variables
  • No timer or callback function to clean up in time
  • closure

Object.

Object creation mode

• Object constructor pattern

  var obj = {};
  obj.name = 'Tom'
  obj.setName = function(name){this.name=name}
  Copy the code

• Object literal schema

  var obj = {
    name : 'Tom',
    setName : function(name){this.name = name}
  }
  Copy the code

• Constructor pattern

  function Person(name, age) { this.name = name; this.age = age; this.setName = function(name){this.name=name; }; } new Person('tom', 12);Copy the code

• Constructor + prototype combined pattern

  function Person(name, age) { this.name = name; this.age = age; } Person.prototype.setName = function(name){this.name=name; }; new Person('tom', 12);Copy the code

Object inheritance pattern

• Prototype chain inheritance: get method

function Parent(){} Parent.prototype.test = function(){}; function Child(){} Child.prototype = new Parent(); / / a subtype of prototype to Child. The parent type instance prototype. The Child var Child constructor = = new Child (); / / a test ()Copy the code

• Borrow constructors: get attributes

  function Parent(xxx){this.xxx = xxx} Parent.prototype.test = function(){}; function Child(xxx,yyy){ Parent.call(this, xxx); This.parent (XXX)} var child = new child ('a', 'b'); //child. XXX is 'a', but child does not test()Copy the code

• combination

  function Parent(xxx){this.xxx = xxx} Parent.prototype.test = function(){}; function Child(xxx,yyy){ Parent.call(this, xxx); Constructor this.parent (XXX)} Child. Prototype = new Parent(); Test () var child = new child (); //child. XXX = 'a', also test()Copy the code

• What does new do behind an object?
• Create an empty object
• Set __proto__ to the constructor object’s prototype property value this.proto = fn. prototype
• Execute the constructor body (add attributes/methods to the object)

Threading versus event mechanisms

Threads and processes

• Process:
  • An execution of a program that occupies a unique piece of memory
  • You can view the process in Windows Task Manager
• Thread:
  • Is an independent unit of execution within a process
  • Is a complete flow of program execution
  • Is the smallest scheduling unit of the CPU
• Relationship between
  • A process has at least one thread (main)
  • A program is executed on a thread within a process
  • It is also possible to run multiple threads in a process at the same time, and we would say that a program is multithreaded
  • Data within a process can be directly shared by multiple threads within it
  • Data between multiple processes cannot be shared directly

*. Does the browser run single-process or multi-process?

• Some are single processes
  • firefox
  • Original IE
• There are multiple processes
  • chrome
  • A new version of IE

*. How do I check if the browser is running multi-process?

• Task Manager ==> process

*. Does the browser run single-threaded or multi-threaded?

• It’s all multithreaded

Browser kernel module composition

• The main thread
  • Js engine module: responsible for the compilation and running of JS programs
  • HTML, CSS document parsing module: responsible for page text parsing
  • DOM/CSS module: responsible for DOM/CSS related processing in memory
  • Layout and rendering module: responsible for the layout and rendering of pages (objects in memory)
• Points thread
  • Timer module: Manages timers
  • DOM event module: responsible for event management
  • Web request module: Responsible for Ajax requests

Js thread

• Js is executed single-threaded (the callback function is also on the main thread)
• H5 proposes a scheme to realize multi-threading: Web Workers
• Only main thread update interface

The timer module, Dom time module, and network request module in threading are all executed in the main process. They can only be called after the initialization code has finished executing, so if a long operation is performed on the main thread, it may cause a delay in processing

Code classification:

• Initialization code
• The callback code

The JS engine executes the basic flow of code

• Initialize code first: contains special code callbacks (execute asynchronously)
  • Set timer
  • Bind event listener
  • Sending ajax Requests
• The callback code will be executed at a later point

Event handling mechanism

• Code classification
  • Initialization execution code: contains code for binding DOM event listeners, setting timers, and sending Ajax requests
  • Callback execution code: Handles the callback logic
• The basic flow of code executed by the JS engine:
  • Initialization code ===> callback code
• There are two important components of the model:
  • Event Management module
  • The callback queue
• The flow of the model
  • Execute the initialization code, handing the event callback function to the corresponding module to manage
  • When an event occurs, the management module adds the callback function and its data to the callback queue
  • The callback function execution in the read-fetch callback queue is traversed only after the initialization code has finished executing (which may take some time)

H5 Web Workers

• You can have JS execute in split threads
• Worker

  var worker = new Worker('worker.js'); Worker.onmessage = function(event){event.data} : callback worker.postMessage(data1) : sends data to another threadCopy the code

• Question:
  • Code in worker cannot manipulate DOM to update UI
  • Not every browser supports this new feature
  • JS cannot be loaded across domains