[hand tear front end examination paper] series (I)

① JavaScript How it works ？ What are the differences between interpretive languages and compiled languages ？

1. JS Code -> It can be interpreted as AST ( Lexical analysis first 、 Syntax analysis ) -> Generated bytecode （V8）-> Generate machine code （ compiler ）

2. A lot of information will say ,JavaScript、Python、Ruby All are " Explanatory language ", It's implemented through an interpreter . It's easy to misunderstand ： Language generally only defines its abstract semantics , It doesn't force a certain way of implementation .

For example, C Generally considered to be “ Compiler language ”, but C There is also an interpreter for , for example Ch. Again ,C++ There is also an implementation of the interpreter version , for example Cint.

In fact, many interpreters are built with “ compiler + virtual machine ” The way to achieve , First, convert the source code to AST Or bytecode , Then the virtual machine completes the actual execution .

summary ：

• So-called “ Explanatory language ” It's not that you don't have to compile , It just doesn't need users to explicitly use the compiler to get executable code .

• In fact, many interpreters are built with “ compiler + virtual machine ” The way to achieve . The general process is ： Source code -> compiler -> AST Or bytecode -> Virtual machine to complete the actual execution .

② Briefly describe Babel Compilation process ？

answer ： First ,Babel The role of is From one source code to another , Act as a conversion compiler , It can be briefly described as   analysis （ analysis JS Code ）-> transformation （ Parse and modify AST）-> The reconstruction （ Will modify the AST Convert to another JS Code ）

③ JavaScript How are arrays and functions stored in memory ？

answer ： ① Array ,JS The array in is mainly Stored in continuous memory FixedArray、 Stored as a hash table HashTable.

② function , The function belongs to the reference data type , Store in the pile , Only an address is stored in the stack memory to represent the reference to the heap memory . When the interpreter looks for a reference value , Will first retrieve its address in the stack , Get the address and get the entity from the heap .

** tips: **

• The storage of reference types in memory 【 Address in stack memory -> Entities in heap memory 】 as a result of ： The reference type entity is large , Compare memory space .
• Storage that exists within the value type 【 Stack memory 】

④ The event loop mechanism in the browser is ？

answer ： ① Event loop in browser ：

macrotasks( Macro task ):

• script( The overall code )
• setTimeout
• setInterval
• setImmediate
• I/O
• UI rendering
• event listner

microtasks( Micro task ):

• process.nextTick
• Promise.then
• Object.observe
• MutationObserver

In the browser , Whenever a monitored event occurs , The related tasks bound to the event listener will be added to the callback queue . The tasks generated by events are asynchronous tasks , Common event tasks include ：

• Event tasks generated by user interaction events , For example, input operation ;
• Event task generated by timer , such as setTimeout;
• Event task generated by asynchronous request , such as HTTP request .

When the main thread is running , There will be heaps （heap） And the stack （stack）, Where heap is memory 、 Stack is function call stack . We can see that ,Event Loop Responsible for executing code 、 Collect and process events and perform subtasks in the queue , Specifically, it includes the following processes .

• JavaScript There is a main thread and call stack , All tasks will eventually be put on the call stack and wait for the main thread to execute .
• The synchronization task will be placed on the call stack , Wait for the main thread to execute in sequence .
• There is a callback queue outside the main thread , The asynchronous task in the callback queue will eventually run as a call stack in the main thread .
• Synchronization tasks are performed on the main thread , The code in the stack will call the browser when executing API, At this point, some asynchronous tasks will be generated .
• Asynchronous tasks will have results （ For example, when the monitored event occurs ） after , Put the asynchronous task and the associated callback function into the callback queue .
• After the task in the call stack is executed , At this point, the main thread is idle , The task is retrieved from the callback queue for processing .
• The above process will be repeated , This is it. JavaScript Operation mechanism of , It's called the event loop mechanism （Event Loop）.

summary

1. Js There is one 【 Main thread and call stack 】, All tasks will eventually be put into 【 The call stack 】 wait for 【 Main thread execution 】.
2. Macro task -> Micro task - Macro task -> Micro task Go round and round

⑤ ES6 Modules be relative to CommonJS What are the advantages of ？

• CommonJS The output of the module is a copy of the value ,ES6 The module outputs a reference to a value . namely ES6 Module Read only , You can't change its value
• CommonJS Modules are run time loaded ,ES6 Module is a compile time output interface
• CommonJS Modular require() Is the synchronous load module ,ES6 Modular import The command is loaded asynchronously
• import The interface of is read-only（ Read only status ）, Cannot modify its variable value .commonJS You can reassign , But yes. ES6 Module The assignment will compile and report an error .

ES6 Modules advantage ： CommonJS It loads an object （ namely module.exports attribute ）, This object will only be generated after the script runs . and ES6 Modules Not object , Its external interface is just a static definition , It will be generated during the static parsing phase of the code .

⑥ 【 High level programming language 】 How is it? 【 compile 】 become 【 machine language 】 Of ？

answer ： High level language code -> It can be interpreted as AST ( Period accompanying lexical analysis 、 Syntax analysis )-> Generated bytecode （V8）-> Generate machine code （ compiler ）

* Which stages does a compiler usually consist of ？ At what stage does the data type check usually take place ？

5 Stages ：

1. 【 Data type checking 】 Lexical analysis , Syntax analysis
2. parse Stage ： V8 The engine will be js The code to AST
3. Ignition Stage ： The interpreter will AST Convert to bytecode , Parsing the execution bytecode will also provide the necessary information for the next stage of optimized compilation ;
4. TurboFan Stage ： The compiler takes advantage of the information collected in the last stage , Optimize bytecode to executable machine code ;
5. Orinoco Stage ： Garbage collection stage , Reclaim the memory space that is no longer used in the program .

technological process ：

js -> word / Syntax check -> ast ( adopt v8 engine ) -> Bytecode （ Through the interpreter ）-> Machine code （ By compiler ）-> Garbage collection stage （ Reclaim memory that is no longer used ）

Ⅷ Release / What is the difference between subscription mode and observer mode ？

answer ： In observer mode , The observed usually maintains a list of observers . When the state of the observed changes , Will inform the observer .

In publish and subscribe mode , The specific publisher will dynamically maintain a list of subscribers ： The event notification published to the corresponding subscriber can be started or stopped at runtime according to the needs of the program .

The difference is that publishers themselves do not maintain subscription lists （ It doesn't actively maintain a list like an observer ）, It delegates work to specific publishers （ Equivalent to a secretary , Anyone who wants to know about me , Just ask my secretary directly ）; After the subscriber receives the message from the publisher , Specific subscribers will be assigned to carry out relevant processing .

⑨ When will decorator mode be used ？【： Extend the functionality of existing objects 】

answer ： Decorator mode generally refers to allowing new functions to be added to an existing object dynamically , Without changing its structure , It is equivalent to wrapping an existing object .

There are many scenarios to use , For example, I used to write jQ project , You can quickly and dynamically expand yourself jQ The above method , perhaps vue Custom instructions for , The main purpose is to extend the old functions through inheritance .

Ten List the programming paradigms you know ？

answer ： declarative 、 imperative ( object-oriented oop)、 Functional expression fp

11. What is a sandbox ？ What is the role of the browser sandbox ？

answer ： Sandbox is designed to let untrusted code run in a certain environment , This limits the code's access to resources outside the quarantine area .

12. Hash and History Differences, advantages and disadvantages of routing ？

answer ： hash The implementation of routing mode is mainly based on the following features ：

• URL in hash Value is just a state of the client , That is, when a request is made to the server ,hash Part will not be sent ;
• hash Change in value , Will add a record to the browser's access history . So we can go back through the browser 、 Forward button control hash Handoff ;
• Can pass  a  label , And set up  href  attribute , When the user clicks this tab ,URL  Of hash Values change ; Or use  JavaScript Come on  loaction.hash  Assign a value , change URL Of hash value ;
• We can use hashchange Events to monitor hash Change in value , To jump to the page （ Rendering ）. stay vue/react Detected in hash Change, just load different components .
• hashchange Event triggered , There will be hash Before the change URL（oldURL） and hash After the change URL（newURL） Two attributes ：

demo

www.baidu.com/#a=0 When you modify # After hash When the value of ：

window.addEventListener('hashchange',function(e) { console.log(e.oldURL);  console.log(e.newURL) },false);
 Copy code 

history The implementation of routing mode is mainly based on the following features ：

• pushState and repalceState Two API To operate the implementation URL The change of ;
• We can use popstate Events to monitor url The change of , To jump to the page （ Rendering ）;
• history.pushState() or history.replaceState() Not trigger popstate event , At this time, we need to manually trigger the page Jump （ Rendering ）.

13.JavaScript Medium const Arrays can be used for push Operation ？ Why? ？

answer ： Sure , It can also be done splice() operation .

const Declaration creates a read-only reference to a value . But that doesn't mean that the value it holds is immutable , Only the variable identifier cannot be reassigned . for example , When the reference is an object , This means that the content of the object can be changed .

14. A simple comparison Callback、Promise、Generator、Async Several asynchronous API The advantages and disadvantages of ？

answer ： First callback It's not asynchronous API, It was early JS A means of asynchronous programming .

Promise The community is trying to solve the problem of callback hell in ES6 A solution proposed by version ;

Generator It is also an asynchronous programming solution , Its biggest feature is that it can hand over the execution right of the function ,Generator The function can be seen as a container for asynchronous tasks , Where you need to pause , Use both yield Grammar to mark ;

Async/await yes ES7 A new asynchronous solution proposed in ,async yes Generator Grammatical sugar of function ,async/await The advantages of Clear code （ It's not like using Promise I need to write a lot then Method chain ）.async/await not only JS A way of asynchronous programming , Its readability is also close to synchronous code , Make it easier for people to understand .

async/await It comes with its own actuator , and generator Generator There is no actuator . Manual call required next()

15. Object.defineProperty and ES6 Of Proxy What's the difference? ？

answer ： Proxy The advantages are as follows

• Proxy You can listen directly to the entire object instead of the attribute .
• Proxy Can directly monitor the changes in the array .
• Proxy Yes 13 Interception method in , Such as ownKeys、deleteProperty、has Is such as Object.defineProperty Do not have the .
• Proxy Returns a new object , We can only manipulate new objects to achieve the goal , and Object.defineProperty You can only traverse the object properties and modify them directly ;
• Proxy As a new standard, browser manufacturers will focus on continuous performance optimization , That is, the legendary performance bonus of the new standard .

Object.defineProperty The advantages are as follows

• Compatibility is good. , Support IE9, and Proxy There are browser compatibility issues with , And it doesn't work polyfill Grinding .

Object.defineProperty The disadvantage lies in ：

• Object.defineProperty Only the properties of the object can be hijacked , So we need to traverse every attribute of every object .
• Object.defineProperty Can't listen to arrays . It's by rewriting the data 7 A way to change the data to listen to an array .
• Object.defineProperty Not right es6 A new creation Map,Set These data structures make listening .
• Object.defineProperty You can't listen to add and delete operations , adopt Vue.set() and Vue.delete To achieve responsive .