Pre analysis
Pre parsing: read through and explain the code before all the code is executed, and then execute the code after the explanation is completed
Function call problem:
- When a function is defined, the code put into the "box" will not be executed
- The code is executed only when the function is called
Pre parsing has two parts:
- Global pre parsing: when the page is opened, the global code will be pre parsed, but the code in the function body is ignored
- Local pre parsing: when you call a function, pre parsing will be performed under the private scope of the function. After parsing, the code in the function body will be executed
What does the pre parsing explain:
- var
- Declarative function
Pre parsing of var:
- Declare to the browser memory that a variable is defined but not assigned
- Assignment is only performed during code execution
console.log(num) var num //Output undefined
analysis:
When you use a variable
- If an error is reported: xxx is not defined, it indicates that this variable is not defined
- If undefined appears, it means that this variable has been defined but not assigned a value
console.log(num)
Contains two operations
1. var num
2. num = 100
var num = 100
code:
console.log(num)
var num = 100
Pre parsing after opening the browser:
Line 1 code, No pre parsing is required
Line 2 code, have var keyword
Perform pre parsing, var num The browser declares a num Variable of, However, no assignment is performed at this time
Start code execution:
Line 1 code, console.log(num) visit num This variable
Because it has been declared during pre parsing num variable
So there are variables at this time, But there is no value
So appear undefined
Line 2 code, because var num It has been executed in pre parsing
Only here num = 100 That's the code
to num Assign values to variables
console.log(num)
var num = 100
Equivalent to
var num
console.log(num)
num = 100
console.log(num) //undefined
console.log(num2) //An error is reported. var num2 = 200 does not participate in pre parsing, and there is no pre parsing in the function
var num = 100
function fn(){
var num2 = 200
}
console.log(num)//undefined
if(false){
var num = 100
}
console.log(num)//Undefined, fold is not executed
Pre parsing - function
Declarative functions are pre parsed
When the code finds a declarative function = > the variable name (function name) will be declared in the browser memory and assigned as a function
Assignment function (function expression) = > execute according to the rules of var
fn()
function fn() {
console.log('hello world')
}
fn()
/*
1 fn()
2 function fn() { console.log('hello world') }
3 fn()
Open browser
+ Pre resolution:
=> Line 1 not required
=> Line 2 requires
-> Declare a variable name called FN in the browser and assign it to a function fn() {console. Log ('Hello world ')}
=> Line 3 not required
=> End of pre parsing
-> At this time, there is a function called fn in the browser
+ Code execution
=> Line 1, fn()
-> Call fn as a function once
-> Because the fn variable has been declared and assigned as a function during pre parsing
-> So it's called normally here
=> Line 2, because it has been defined in the pre parsing, skip it directly
=> Line 3, fn()
-> Same as line 1
1 fn()
2 function fn() { console.log('hello world') }
3 fn()
Equivalent to
1 function fn() { console.log('hello world') }
2 fn()
3 fn()
*/
//fn()
var fn = function () { console.log('Hello world') }
fn()
/*
1 fn()
2 var fn = function () { console.log('Hello world ')}
3 fn()
Open browser
+ Pre resolution:
=> Line 1, not required
=> Line 2, required
-> Tell the browser to define a variable called fn, but do not assign a value
=> Line 3, no
=> At the end of pre parsing
-> There is only one variable called fn in the browser, but it has not been assigned, that is, undefined
+ Code execution
=> Line 1, fn()
-> Call the fn variable as a function once
-> Because fn is only undefined during pre parsing
-> Here, undefined is called as a function
-> Error reporting: xxx is not a function
1 fn()
2 var fn = function () { console.log('Hello world ')}
3 fn()
Equivalent to
1 var fn
2 fn()
3 fn = function () { console.log('Hello world ')}
4 fn()
*/
Pre resolved duplicate name problem:
When the function name and variable name in the code are the same
- The function shall prevail, only in the pre parsing
- Do not duplicate the function name and variable name
fn()
function fn (){console.log('fn function') }
fn()
var fn = 100
fn()
/* At this time, fn is a value, 100 covers the function, calls a value as a function, and reports an error fn is not a function */
/*
1 fn()
2 function fn() { console.log('fn Function ')}
3 fn()
4 var fn = 100
5 fn()
Open browser
+ Pre analysis
=> In line 2, a variable called fn is declared in the browser and assigned as a function
=> In line 4, a variable called fn is declared in the browser without assignment
=> In the pre parsing process, the variable and function have the same name, and the function shall prevail
-> At the end of pre parsing There is only one fn variable in the browser memory, which saves the function
+ Code execution
=> Line 1, fn()
-> Because when pre parsing, fn is a function
-> Normal call
=> Line 2: pre parsing has been defined. Skip directly
=> Line 3, fn()
-> Same as line 1
=> In line 4, var fn has been executed in pre parsing
-> fn = 100 remains
-> Assign a new value to the fn variable, and 100 will overwrite the function
=> Line 5, fn()
-> Call a value as a function
-> Error reporting: fn is not a function
*/
fn()
var fn = 100
fn()
function fn() { console.log('fn function') }
fn()
/*
1 fn()
2 var fn = 100
3 fn()
4 function fn() { console.log('fn Function ')}
5 fn()
Open browser
+ Pre analysis
=> In line 2, declare a variable called fn in the browser without assignment
=> In line 4, declare a variable called fn in the browser and assign it as a function
=> In the pre parsing process, the function and variable have the same name, and the function shall prevail
=> At this time, there is only one fn variable in the browser, and the value is a function
+ Code execution
=> Line 1, fn()
-> Because during pre parsing, fn is a function, which is called normally
=> In line 2, var fn pre parsing has been performed
-> fn = 100 remains
-> Assign fn a new value of 100 and overwrite the function saved by itself
=> Line 3, fn()
-> Call a numeric type as a function
-> Error reporting: fn is not a function
*/
Pre parsing in function
What does pre parsing teach us
- Do not duplicate the function name and variable name
- Whether it is a function or a variable, it is declared before use
- In a function, do not define the same function name as the formal parameter
What are the two stages of the function doing
Function definition stage
- Open up a section of storage space in heap memory
- Put the code in the function body as a string in the opened storage space
- Put the function name in the stack memory and assign the space address in the heap memory to the variables in the stack memory
Function call phase
-
Find the storage space of the function according to the address of the variable in the stack memory
->If this space is not a function storage space, the error xxx is not a function will be reported directly
-
Open up a new function execution space in the call stack
->Copy all the formal parameters and codes in the function storage space
-
In this execution space, the formal parameters are assigned
->The assignment is performed in the function call space
-
In this execution space, the code in the function is pre parsed
- > read through and interpret a string stored in the function body
-
The string in the function body is executed as js code
- > if it is legal js code, execute it directly
- > if it is illegal, an error will be reported at this time
- After the code is executed, the function execution space opened this time will be destroyed
Variable assignment: copy 100% of the data stored in one variable to another variable
var a = 100
var b = a
console.log(a)
console.log(b)
a = 200
console.log(a)
console.log(b)
During the call of a function
+ whether the formal parameter is assigned or pre parsed first
+ conclusion: assign formal parameters first and then pre parse
= > do not define the same function name as the formal parameter in the function
= > then your formal parameters are meaningless
function fn(a) {
console.log(a)
function a() { console.log('I am a function') }
}
fn(100)
/*
function fn(a) {
console.log(a)
function a() { console.log('I am a function ')}
}
fn(100)
Open browser
+ Pre analysis
=> A variable called fn is declared globally in the browser and a function is saved
+ Code execution
=> Function definition direct call
=> fn(100)
=> fn Function code execution process
-> It is assumed that the formal parameter is assigned first and then pre parsed
+ First, assign the value 100 to the parameter a
+ Next, when pre parsing in the function, a variable called a is defined and assigned as a function
+ When assigned as a function, 100 will be overwritten
+ When executing the code later, console Log (a) prints out the function body
-> Suppose that the formal parameter assignment is pre resolved first
+ First, pre parsing in the function
+ In the pre parsing process, a variable called a is defined in the function and assigned as a function
+ Next, in the process of formal parameter assignment, assign a value of 100, and the function will be overwritten
+ When executing the code later, console Log (a) prints out 100
*/
this: no matter where the function is defined or how the function is defined, go directly to see how it is called
Variable: no matter how the function is called, you can view it layer by layer according to the defined position
Interview questions
//Interview question 1:
var a = b = 10
a = 20
b = 20
console.log(a)//20
console.log(b)//20
/*
var a = b = 10
a = 20
b = 20
console.log(a)
console.log(b)
Pre resolution:
+ A variable called a is defined in the browser
Code execution:
+ b = 10
=> The mechanism involved is called variable assignment mechanism
=> There is no b variable until the global. Define b as a global variable and assign a value
+ a = b
=> Because of the execution of b = 10, there is a global b variable
=> Assign the value saved by the b variable to a
=> At this time, a is also 10
+ ...
*/
var a = b //report errors
a = 20
b = 20
console.log(a)
console.log(b)
/*
var a = b
a = 20
b = 20
console.log(a)
console.log(b)
Pre resolution:
+ A variable called a is defined in the browser without assignment
Code execution:
+ a = b,
=> Access the value of the b variable and assign it to a
=> Involving variable access mechanism, b has not been defined, and an error is reported
=> b is not defined
*/