----------------------------------- Summary of JS Advanced Skills ----------- -------------------------
1. Precompilation of js code
When the js engine executes the js code, a pre-parsing will be performed first, and the declaration will be improved during the pre-parsing, which is an important issue.
The function that will promote the var variable name and function, there are some precautions when promoting, var only promotes the function name, and function promotes the function name and the value stored in the function.
1) var promotion, variables without var will not be promoted
2) There is an exception when the function is promoted. In the new version of the browser, if the function is in the conditional if, only the function name will be promoted and the function value will not be promoted.
3) When you get a piece of js code, the first thing you should think of is pre-parsing, which is the improvement of the declaration
4) When there are both variable names and function names that need to be promoted, generally you will not notice which one is promoted first
5) When the function name and the variable name are the same, the declaration of the function should be promoted first, and then the declaration of the variable should be promoted. The latter may overwrite the former name, which can be regarded as no need to promote
Two.js execution process
The execution process of js: When the js engine starts to execute the js code, a global execution context is generated.
In the global execution context: 1) hoisting of declarations, 2) execution of code
Note that the code is executed from top to bottom (because the current tasks are all synchronous, from top to bottom), and ignore it if it has been promoted. For example, if the variable name has been promoted, it will be assigned directly. If it is a function directly Ignored, since it is promoted with the value.
3) When a function is called during code execution. At this time, a local execution context is generated, 1) The assignment of formal parameters, the assignment of formal parameters can be directly regarded as a local variable declared inside the function. 2) The promotion of the declaration, here pay attention to the promotion of the var variable name, or the function name and value, which is promoted at the top of the function. 3) The execution of the code is executed sequentially from top to bottom.
3. Notes on var let const and function declarations
The difference between var and no var:
In the global scope: both adding var and not adding var can be regarded as an attribute of the window object
In the global scope: adding var will be promoted, not adding var will not be promoted
Under local scope: not adding var will not be regarded as a property of the window object
Under local scope: without adding var, it can only be a global variable, not a local variable
Variables with var cannot be deleted, variables without var can be deleted
Note on let declaring variables:
Variables declared with let cannot be hoisted
cannot be applied to properties of the windows object
Cannot be reassigned, an error will be reported
let{} will form a block-level scope, the block-level scope can access the outside, and the outside cannot access the data of the block-level scope.
Note on const:
Variables declared using const cannot be reassigned, which is equivalent to declaring a constant.
Using const cannot directly add variable names to const, so it must be assigned immediately when declaring
ps: When we are working on a project, we give priority to using const. If the variable needs to be dynamic, then we choose to use let, and finally var.
4. Scope and scope chain
scope:
The scope in js is divided into local scope and global scope. Local scope: When a function is declared, a local scope is generated. The scope outside the local scope is the global scope. The scope is Oh static. It is different from the local execution context and the global execution context, and the context is only available at the time of execution.
Scope chain:
The scope in js is divided into local scope and global scope. When a function is declared, a local scope is generated.
The local scope has a superior scope, and the superior scope sees the declaration of the function.
When a function is called, a local execution context is generated, and there is no relationship between the local context and the local execution context.
A local context will do three things, parameter assignment, declaration promotion, and code execution. When accessing a variable x in a local execution context, first look for it in your own scope, if you can’t find it, go to the upper level to look for it, not only one level, but if you can’t find it, go to the global one Execution context.
This process is called the scope chain, also known as the scope lookup mechanism.
Five.arguments pseudo-array
arguments is a pseudo-array, which can also be called a pseudo-class. In a function, it can receive the data of actual parameters. The reason why it is called a pseudo-array is that it has the characteristics of an array, and the array can be obtained through arguments.length length.
In this array, you can understand that it corresponds to the formal parameter one by one. When the formal parameter changes, it also changes, and vice versa.
If there are two formal parameters, it corresponds to the first two items of arguments.
If there are too many actual parameters to be passed in, you can use arguments to receive them, depending on the situation.
Six. IIEF
IIEF is an immediate execution function expression, which means that it does not need to be executed manually, and it will be called by itself when it is declared. This problem was introduced to protect the interior of the function from contamination. There are three ways to execute function expressions immediately.
There are three forms:
First form:
;（function（）{}）()
The second way:
；（function（）{}()）
The third way:
+function（）{}();
-function（）{}();
!function（）{}();
~function（）{}();
7. Allocation and release of heap and stack memory, closure
Allocation and release of heap memory:
When a piece of data is a reference data type, a heap space will be created in the memory to store the value of the data. This object needs a variable to refer to. If there is no variable to refer to the heap space, the browser will use the appropriate time to release it.
Allocation and release of global stack memory:
When the js code starts to execute, a global stack memory is generated.
When the js code is executed, the global stack space is released when the tab is closed.
Allocation and release of local stack space:
During code execution, calling a function creates a local stack. The local stack is protective.
Release: When the function is executed, the browser will release the stack space at the right time.
When the function calls itself internally, if there is no exit, it will keep opening up local stack space, and finally explode the stack, also called dead recursion
Closure: When the function call ends and there are other variables referencing this address, this stack space will not be released, and the data in it will be permanently saved, which creates a closure, the advantages of closure Protect the data in the function and extend the life cycle of the variable. Cons: Leaks memory.
Eight. Common errors in js
(1) let cannot be declared repeatedly
(2) let and {} will generate a block-level scope
(3) The variable name declared by let cannot be promoted
(4) The variables declared by let do not belong to the properties of the window object
Nine. Small details in the process of code execution
There are some problems with using var and not using var with let. Using let statement is not executed until it is in memory, but it is not promoted. So some problems still need to be paid attention to.
Several kinds of errors can be tasted slowly: syntax errors, reference errors, scope errors, and type errors.
There are two kinds of ReferenceError reference errors: the first one: Uncaught ReferenceError: a is not defined
console.log(a)
a=110; //There is no memory, output a variable that does not exist
ReferenceError refers to the second type of error: Uncaught ReferenceError: Cannot access 'a' before initialization
console.log(a);
let a=110;//The variable a already exists in the memory, but the statement of let will not be promoted, and it will prompt that the memory has been defined but cannot be referenced when outputting
SyntaxError syntax error demonstration 1: Uncaught SyntaxError: Unexpected token ')'
if(a>=3)){
console.log(a)
} //Common syntax error
SyntaxError syntax error demonstration 2: Uncaught SyntaxError: Identifier 'a' has already been declared
let a=110;
var a=123;
console.log(a) //let declared variables cannot be declared repeatedly
TypeError type error demonstration 1: Uncaught TypeError: a is not a function
var a=110;
a();
TypeError type error demonstration 2: Uncaught TypeError: a is not a function
var arr=[1,2,3,4]
arr()
RangeError range error demonstration 1: Uncaught RangeError: Invalid array length
var arr=new Array(1000000000000000000000000000)
console.log(arr)//The range of the array length cannot be too large, beyond the range of the array length
RangeError range error demonstration 2: Uncaught RangeError: Invalid array length
var arr=new Array(-2);
console.log(arr)//The range of the length of the array does not include negative values. Besides, how can the length be a negative value, which exceeds the range of the length of the array
Ten. Strict mode
(1) Add use strict at the beginning of the entire file
(2) The very beginning of the function
(3) In es6, it is in strict mode by default
Why set strict mode?
(1) Eliminate some unreasonable and imprecise places in js syntax, and reduce some weird behaviors
(2) Eliminate some unsafe parts of the js code to ensure the safe operation of the js code
(3) Strict mode can run faster than non-strict mode .
There are many strict mode syntax notes:
(1) Missing declarations are not allowed, without var
(2) Octal not allowed: a syntax error will be reported
(3) It is not allowed to write the function in if
(4) Formal parameter names are not allowed to be repeated (declare formal parameters with the same name)
(5) It is not allowed to declare the same attribute for the object
(6) There is no one-to-one correspondence between arguments and formal parameters
(6) this in function no longer points to window
Execution details of eleven logical operators in js code
Logical AND: Returns the first operand if the value of the first one is true, and returns the second operand (both are the numbers before conversion) if the first number is false
Logic and summary: If the first number is false, return the first operand, if the first number is true, return the second operand (both before conversion)
0 || false //false
false || 0 //0
1 || false//1
1 || true //1
"" || fals//false
1 || false//1
"" || true//true
true || ""true
true || 4 //true
"" && 123//""
123 && 0//0
123 && NaN//NaN
-0 && NaN//-0
12. Recursion
The programming trick where a program calls itself is called recursion.
Simplify large-scale problems layer by layer to obtain small-scale problems, then solve small problems, and then solve large problems layer by layer
Recursive function: Inside a function, he calls himself again and needs an exit
function f(){
f();//Remember to export
}
Remember to solve these few small examples
利用递归思想，求100的累加利用递归思想，求斐波那契数列中的第20项利用递归思想，求数组中元素的和利用递归思想，求1,3,5,7,9,... 的第N项的值。索引从0开始。利用递归思想，求1,3,5,7,9,... 前N项的和利用递归思想，求0,2,4,6,8,... 的第N项的值利用递归思想，求0,2,4,6,8,... 前N项的和