JS advanced part

If you are little white , This set of information can help you become a big bull , If you have rich development experience , This set of information can help you break through the bottleneck
2022web Full set of video tutorial front-end architecture H5 vue node Applet video + Information + Code + Interview questions .

JS Advanced part

• Judge
• Object reference type
• undefined And null To explore
• Distinguish between variable types and data types
• data , Variables and memory
• js The function parameters of are passed as values
• JS How the engine manages memory
• JS object
• • When you need to use [‘ Property name ’], When you need to use .
• JS Function object
• • call and apply The difference between
  • Callback function
  • Immediate execution function
• JS Function this Point to
• JS Semicolon problem
• The prototype object of the function
• Show prototype and implicit prototype
• Prototype chain
• The attribute problem of prototype chain
• instanceOf How to judge
• summary
• • • The function object is Function Instance object of , There are also implicit prototype properties , However, generally speaking, the instance object does not include the function object
    • The implicit prototype of the instance object points to the display prototype of the constructor object that constructs the instance object
    • All the functions we define , They are all Object Instance of constructor ,Object Except myself
    • Function Constructors are used to construct Object Constructor object , therefore Object The implicit prototype of the constructor object points to fucntion, Its display prototype is not function
  • Test questions
• Variable promotion and function promotion
• Execution context
• Execution stack
• Scope
• • Scope chain
• Closure
• • Definition of closure
  • The advantages of closures
  • The function of closures
  • The life cycle of closure
  • Application of closures —JS modular
  • Disadvantages of closures
  • Memory overflow and memory leak
  • Variables save external this
• JS Object creation method
• • Mode one ： Object Constructor Pattern
  • Mode two ： Object literal pattern
  • Mode three : Factory mode
  • Mode 4 : Custom constructor mode
  • Mode 6 : Constructors + Combination mode of prototype
• Inherit
• • Inheritance of prototype chain
  • Borrow constructor to implement pseudo inheritance
  • Combination inheritance
• JS It's single-threaded
• • Code classification and JS The basic flow of code execution
• The event loop model
• Web Worker Implement multithreading
• summary

Judge

• instanceof Is used to distinguish the specific types of objects , Because all objects belong to Object type
• typeof It returns a string
• "== “ Will first try to convert the variables at both ends to the same type , Then compare ;”===" Will directly compare whether the types are the same , If the types are the same, continue to compare whether the values are the same .

---

Object reference type

Both function objects and array objects belong to Object object ,Object The object is a large scope , The latter two are two special objects

---

undefined And null To explore

---

Distinguish between variable types and data types

---

data , Variables and memory

---

js The function parameters of are passed as values

When it comes to Basic type parameters ： It's just a copy of the content

When a parameter of reference type is passed in : What is copied is the address of the reference type parameter

---

JS How the engine manages memory

---

JS object

---

When you need to use [‘ Property name ’], When you need to use .

---

JS Function object

call and apply The difference between

difference

---

Callback function

---

Immediate execution function

---

JS Function this Point to

---

JS Semicolon problem

---

The prototype object of the function

---

Show prototype and implicit prototype

---

Prototype chain

---

The attribute problem of prototype chain

Prototype chains are used to find attributes , Unless you add attributes to the prototype chain , Otherwise, set the attribute value of the object to , I don't care about the prototype chain

---

instanceOf How to judge

---

summary

Prototype :

 When it comes to archetypes , We should remember the following points first , These are the key to understanding archetypes ：

1、 All reference types （ Array 、 function 、 object ） You can extend properties freely （ except null outside ）.

2、 All reference types have one ’_ _ proto_ _' attribute ( Also called implicit prototype , It's a common object ).

3、 All functions have one ’prototype’ attribute ( This is also called explicit archetype , It's also a common object ).

4、 All reference types , its ’_ _ proto_ _' Property points to its constructor ’prototype’ attribute .

5、 When trying to get the properties of an object , If the object itself does not have this property ,
 Then I'll go to it ’_ _ proto_ _' attribute ( That is, the constructor of it ’prototype’ attribute ) In search of .

6. Any object has one constructor attribute , Point to the constructor that created this object 

7. In prototype object constructor attribute , Also points to the constructor of the function object 

Prototype chain :

 When trying to get the properties of an object , If the object itself does not have this property ,
 Then it will go to its constructor ’prototype’ Find... In properties .
 That's because ’prototype’ Property is an object , The prototype object , So it also has one ’_ _ proto_ _' attribute .

for example :

//  Constructors 
		function Foo(name,age){
		 	this.name=name;
		 	this.age=age;
		}
		Object.prototype.toString=function(){
			//this What it is depends on who called this function during execution .
			console.log("I'm "+this.name+" And I'm "+this.age);
		}
		var fn=new Foo(' Xiao Ming ',19);
		fn.toString(); //I'm  Xiao Ming  And I'm 19
		console.log(fn.toString===Foo.prototype.__proto__.toString); //true
		
		console.log(fn.__proto__ ===Foo.prototype)//true
		console.log(Foo.prototype.__proto__===Object.prototype)//true
		console.log(Object.prototype.__proto__===null)//true

 First ,fn The constructor of is Foo(). therefore ：
fn._ _ proto _ _=== Foo.prototype
 Again because Foo.prototype It's a common object , Its constructor is Object, therefore ：
Foo.prototype._ _ proto _ _=== Object.prototype
 Through the code above , We know this toString() The method is in Object.prototype Inside ,
 When calling a method that does not exist on the object itself , It will go up layer by layer to find , Until null until .


 So when fn call toString() when ,JS Find out fn There is no such method in , So it went Foo.prototype Middle search ,
 It turns out that there is still no such method , And then go Object.prototype Middle search , eureka , Just call Object.prototype Medium toString() Method .


 This is the prototype chain ,fn To be able to call Object.prototype Because of the mechanism of prototype chain .

 in addition , When using prototypes , It is generally recommended to write the method that needs to be extended in the constructor prototype Properties of the , Avoid writing in _ _ proto _ _ Attributes inside .

The function object is Function Instance object of , There are also implicit prototype properties , However, generally speaking, the instance object does not include the function object

The implicit prototype of the instance object points to the display prototype of the constructor object that constructs the instance object

All the functions we define , They are all Object Instance of constructor ,Object Except myself

Function Constructors are used to construct Object Constructor object , therefore Object The implicit prototype of the constructor object points to fucntion, Its display prototype is not function

---

Test questions

explain :

---

Read an article _proto_ and prototype The relationship and difference between

---

Variable promotion and function promotion

---

Execution context

---

Execution stack

JavaScript  Execution on a single thread , All the code is queued to execute .

 When the browser starts executing global code , First, create a global execution context , Push into the top of the execution stack .

 Every time you enter the execution of a function, the execution context of the function is created ,
 And push it into the top of the execution stack . After the current function is executed , The execution context of the current function is out of the stack , And wait for garbage collection .

 Browser's  JS  The execution engine always accesses the execution context at the top of the stack .

---

Scope

Scope chain

---

Closure

Definition of closure

---

The advantages of closures

1、 Make it possible for external access to function internal variables

2、 Local variables are resident in memory

3、 You can avoid using global variables , Prevent contamination of global variables

4、 Memory leaks can occur （ There's a block of memory that's been occupied for a long time , Without being released ）

---

The function of closures

Variable f Get is fn1 The address value of the returned function ,fn3 The variable name is released , But the address it points to is f To receive the , So the function object at this address , No garbage objects are recycled , You can also use f To call

---

The life cycle of closure

---

Application of closures —JS modular

JS Module definition mode 1 ：

Write the above code to a js In file , stay html The page loads this js When you file ,js The code in the file will execute , Then call the return to get the return value and execute

JS Module definition mode 2 :

such js File loading , We go through myMoudle2. Property name () You can call the function directly

---

Disadvantages of closures

---

Memory overflow and memory leak

---

Variables save external this

---

JS Object creation method

Mode one ： Object Constructor Pattern

---

Mode two ： Object literal pattern

---

Mode three : Factory mode

---

Mode 4 : Custom constructor mode

---

Mode 6 : Constructors + Combination mode of prototype

---

Inherit

Inheritance of prototype chain

Inheritance points of prototype chain : Change the instance object of the corresponding parent type into the prototype object of the child type

When the prototype chain inheritance effect is realized , Of the subtype prototype constructor It refers to the one just added to the prototype chain Supper, We need to make the prototype of subtypes constructor Point to subtypes

---

Borrow constructor to implement pseudo inheritance

---

Combination inheritance

Here we use call Get the property , You can call properties without using prototype objects , It's through . To call properties

---

JS It's single-threaded

Code classification and JS The basic flow of code execution

---

The event loop model

---

Web Worker Implement multithreading

Web Worker Detailed explanation

---

summary