This is the 8th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021
Hey, guys, I’m a quack. I’m a professional. 🦞
Read the catalog may be big guys will feel that I write are some of the platitudes of the problem, basic above test summary of the article have. No, I didn’t write something that everyone knows, something that the nuggets have already summarized in great detail. The following contents are written from a different perspective of some common problems, such as what kind of knowledge this knowledge depends on, and there may be some unexpected points that we might not think of when reviewing by ourselves. I believe there will always be one or two that you have not thought of before, if it is really helpful to anyone, I hope the big guys give a thumbs-up, haha. ⚽ ️ ⚽ ️ 🌶 ️
Variable declarations
Three keywords: var, let, const
Tipes: Var is available in all ECMAScript versions, let and const are available only in ECMAScript6 and later versions.
Q&a:
❓❓❓ what’s the difference between the three keywords
- Var is declared in function scope, let and const are declared in function scopeBlock-level scope.
- Var declaration variables are raised to the top of the function scope, let, const becauseTemporary dead zoneSo it doesn’t happenVariable ascension.
- Var (let, const) {var (let, const) {var (let, const) {var (let, const) {var (let, const) {var (let, const) {var (let, const)}}
- Var and let can be declared uninitialized and can be changed at any time. Const must be initialized and cannot be changed. (Reference datatypes cannot modify Pointers, they can modify contents)
- When declared globally,var declarations hang on the window object, let, const because ES6 decouples the properties of the global object from the global variable, so there is no active object on the window in the corresponding block-level scope.
- Let, const compared to VAR, can help garbage collection to improve performance in cases where block-level scope terminates earlier than function scope.
❓❓❓ What is block-level scope? And then there’s the global scope, the function scope. The block-level scope is added in ES6. The block-level scope is wrapped in a pair of {}. The block-level scope is used with let and const, but there is no block-level scope for var.
❓❓❓ Why did you introduce block-level scopes? In order to solve the problem that var declaration variables have variable promotion properties.
❓❓❓ How is variable promotion caused? Because the JS engine does not analyze and execute the program line by line, but section by section. When executing a piece of code, there is a “preparatory work”. When js executes the context, there are two phases: 1. Analysis 2. Execution. When entering the execution context, function declarations are processed first, and variable declarations are processed second.
❓❓❓ How to solve variable promotion? When a variable is declared using let or const instead of var, it is called a temporary dead zone in the block-level scope until it is declared. References to a variable declared later in the block scope will result in an error. ❗️ Temporary dead zones cause typeof, which was previously 100% secure, to become unsecure.
The data type
Basic data types: String, Number, Boolean, Null, Undefined, Symbol, Bigint Reference data types: Object, Array, Function
Tipes: Symbol and Bigint were added in ECMAScript6 and later versions.
Q&a:
❓❓❓ What is the difference between a base data type and a reference data type? The basic data type contains only itself and is generally stored in stack memory. No method can modify the value of the basic data type itself, but only returns a new one. Reference data types include Pointers, which are stored in stack memory, and content, which is stored in heap memory.
❓❓❓ How to determine the type of data?
- typeof: through the search of js underlying implementation, so can only judge the back of these several. < 000: object, 010: floating point, 100: string, 110: Boolean, 1: integer >Determine null as an object: All machine codes are 0, so null is considered an object.
- instanceof: Judge whether the left prototype chain has the same pointer as the right prototype along the prototype chain. If so, it is equal; if not, it is not equal.So you can’t tell if it’s an object or an array.
- Array.isArray(): encapsulates the Object. The prototype. ToString. Call (), specifically determine whether array.
- Object.prototype.toString.call(): A primitive datatype is created with an internal attribute [[class]], which indicates the type of datatype. Object.prototype.toStrin returns this internal attribute if it is accessible. Use [NativeBrand] to achieve more compatible effects).
❓❓❓ array length is the number of elements, does the function have length? What’s length? The length of the function is the number of parameters before the first parameter with a default value, or the number of parameters that must be worn.
❓ ❓ ❓ const a = {}; const b = Symbol(123); const c = Symbol(123); a[b] = ‘b’; a[c] = ‘c’; console.log(a[b]); What is the output? Why is that? B. Analysis: Look at this first:
// Preloading problem
const a = {};
const b = {key: 123};
const c = {key: 123};
a[b] = 'b';
a[c] = 'c';
console.log(a[b]); // c
/ / the topic
const a = {};
const b = Symbol(123);
const c = Symbol(123);
a[b] = 'b';
a[c] = 'c';
console.log(a[b]); // b
Copy the codeThe key of an Object can only be a string, so any data type used as the key of an Object will be converted to a string by default. Therefore, both b and C of the preceding problem are converted to [Object, Object], so there is no need to print c. So why do they print c? Because Symbol declares a unique value, they are not equal even when converted to strings.
Closures and scope chains
Closure: A function that has access to variables in the scope of another function and can break through the chain of action. Implement unordered access to variables and functions. Scope chain: When accessing a variable, the interpreter first looks for an identifier in the current scope. If it doesn’t find one, the interpreter looks in the parent scope until the identifier is found or not in the parent scope. This is the scope chain, which consists of a series of variable objects in the current and upper-level environments. It ensures orderly access by the current execution environment to variables and functions that qualify for access permissions.
Tipes: Closure can be used to break through the chain of action, and the chain of scope can reasonably explain the principle of closure.
Q&a:
❓❓❓ why does the closure cause a memory leak when variables are not collected? First of all, we all know that closures are functions that have access to another function’s scope variable. What does that say? A closure contains a reference to a variable inside the scope of another function. The js garbage collection mechanism increases the number of references to a variable when it is used. When the number of references to a variable is zero, the variable is reclaimed. If the closure is always referenced, then the variable and the function scope of the variable will not be reclaimed. There is only so much memory in JS running, and the number of closures will leak.
❓❓❓ Why can closures break scoped chains? We need to know what a breakthrough means, okay? When accessing a variable, the interpreter first looks for an identifier in the current scope. If it doesn’t find one, the interpreter looks in the parent scope until the identifier is found or not in the parent scope. This is the scope chain, which consists of a series of variable objects in the current and upper-level environments. It ensures orderly access by the current execution environment to variables and functions that qualify for access permissions. What if I don’t want to access it in order, and I want to access the variables inside the function that are my peers? This is where the closure comes in. Because a closure keeps a reference to a function scope, the function scope is never destroyed, and we can use the closure anywhere, as long as the closure is created, breaking the scope chain.
Asynchronous processing scheme
Development: Callback -> Promise-> Generator -> Async/await
Tipes: Promise, Generator, Async/await are new in ECMAScript6 and later versions.
Q&a:
❓❓❓ Why is there asynchronous programming? First of all, we need to know what is synchronous and asynchronous. Synchronous means that one task can be executed only after the next task is completed. Asynchronous means that multiple tasks can be executed simultaneously. From a conceptual point of view, if a task takes a lot of time to execute, only synchronization will definitely block the execution of the code, so asynchronous programming is to optimize the operation because of the large amount of calculation and long time, to ensure the stability of the system.
❓❓❓ The relationship between asynchronous programming and Eventloop and why does Eventloop exist? We know the concept of asynchronous programming, where multiple tasks are executed at the same time, but the results of the execution are always fed back to the system in a uniform queue. So what does Eventloop do? To keep these events organized, the JS engine needs to arrange the order in which they are executed. For example, the timing of our macro and micro tasks.
Did ❓❓❓ Promise really solve callback hell? What is callback hell? The original asynchronous execution scheme, Callback, required a lot of nesting when executing complex event logic, resulting in poor code reading. So did Promise really solve the problem of callback hell? Not in my opinion, as promise’s constant then chain calls can be a bit convoluted when it comes to complex logical operations, but in some ways the promise code is a bit more elegant than Callback, so promise just alleviates Callback hell.
What is the significance of ❓❓❓Generator? In my opinion, the emergence of Generator functions allows us to control the execution and termination of functions. We all know that promise state changes cannot be terminated, and the emergence of Generator functions provides us with the possibility of termination.
Does ❓❓❓async/await block code execution? The purpose of async/await is to make our asynchronous code look more like synchronous code, or to make our synchronous code run asynchronously. Will async/await block code execution? After all, we have to wait for the result of the code behind “await” before we can go further. So async/await will block the execution of the code, but it will block only the code inside the scope of the function, that is, the code after the await keyword. It has no effect on the whole execution context outside, because the async keyword will make the function return a promise object.
The Http request
Common solutions: Ajax and FETCH
Tipes: Ajax and FETCH are native apis that are not in the same hierarchy as Axios and JQ’s Ajax.
Q&a: ❓❓❓ Why upgrade FETCH on top of Ajax? Ajax is based on XMLHttpRequest objects, the architecture of XHR itself is not clear, Ajax is too cumbersome to use, and callback functions can cause callback hell. Upgrade to FETCH, the detached XHR syntax is more concise, based on the standard Promise implementation, and supports async/await.
❓❓❓Http What do some uncommon status codes mean? Just say 304, and when the negotiation cache hits 304 will be returned, telling the client that the cache is available.
❓❓❓ Cookies in HTTP requests? In addition to local storage, cookies can be used for local storage. Because HTTP is stateless, the client cannot determine the identity of the object according to HTTP in the process of communication with the server. Therefore, another function of cookies is to save the state and let the server know what the client has done. That’s why cookies are automatically taken every time you send a request.
Js engine single thread
A process consists of one or more threads, which are the units of a program run based on the process.
Q&a: why is ❓❓❓ designed to be single-threaded? Remember that JS is mainly about user interaction with the browser and dom manipulation. If js is multi-threaded and multiple threads modify the same DOM, which result will the browser follow? So to avoid unexpected complex operations, JS can only be single threaded. Although HTML5 proposes that Web Worker standards allow multi-threading, child threads are not allowed to modify dom and are completely controlled by the main thread.
Common built-in error encoding
1.ReferenceError: The referenced variable does not exist. 2.TypeErroe: error of incorrect data type. 3.RangeError: The data value is not in the allowed range (out of bounds). 4.4.SyntaxErroe: Syntax error
conclusion
I have been writing for a long time. In the process, there are a lot of things that I thought I had mastered very well before I actually found that I understood only half of them when I expressed them. The article also did not write those we all know, at least I did not know before met things, also be to check for their own shortcomings, ha ha. The article has what mistake or understanding deviation place, hope big guy people point out, 🙏 thank. If you have a summary of the basic knowledge of React, you can add me vx lp_18714, and also ask a react big guy to teach me. React is very difficult. 😭
Finally, I wish you study and progress, a successful career! 🎆 🎆 🎆