1, Global preprocessing
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>Global preprocessing: a lexical environment will be created first(Lexical Environment),Then sweep the surface and use it in the whole world var Declared variables and
//A function created declaratively is function xxx() {code snippet}</p>
<p>The function expression is var q=function(){Code segment}</p>
<p>After scanning, the variables are stored and written as a:undefined Write a function as xxx:A reference to or to a function</p>
<script>
alert(a);
alert(b);
alert(c);
alert(f);
//alert(d);//The error d in the pop-up message here is undefined, which affects the follow-up, so it is commented out
var a=1;
var b;
d=5;
alert(d);
function f(){
console.log('ff');
}
var c=function (){//In this case, the function created by the function expression can be used as var Declared variables
console.log('ccc');
}
</script>
</body>
</html>
2, Global preprocessing and execution
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>js Will scan from top to bottom js Code</p>
<p>Preprocessing scanning stage: scan first var=a Variable sum js Resolver stored as a:undefined,And declared functions as d:A reference to a function. At this time, after the scanning, several alert all
//After pop-up, var a is encountered=1;Then the previously saved undefined Change to value 1</p>
<p>Execution phase: different from preprocessing, scan directly to c=2 Direct deposit display c:2</p>
<script>
alert(a);
alert(b);//stay c It will be stopped because the scan fails to report an error and is not defined, so please note it first
//alert(c);
alert(d);
alert(e);
var a=1;
var b;
c=2;
alert(c);
function d(){
console.log('ddd');
}
var e=function(){
consolu.log('eee');
}
</script>
</body>
</html>
3, Function preprocessing and execution
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>For function preprocessing and execution: first, the parameters of the function will be scanned, then the function internal declarative function, and then the internal var variable</p>
<p>Therefore, the following lexical environment will store the parameters a: 1, B: 2 (since the parameters have been passed in, scan the stored parameters first. If two parameters are ab, and one parameter is passed in
The second parameter is undefined)</p>
<p>After preprocessing, the function name declared inside the function conflicts with the previous parameter, and the function is overwritten. Therefore, a changes from value 1 to reference to the function, and
If the variables declared by part var are ignored, the b value is still 2</p>
<p>Execution stage after preprocessing: the pop-up a is the reference of the function, and b is 2</p>
<script>
function f(a,b){
alert(a);
alert(b);
var b=100;
function a(){
console.log('gggg');
}
}
f(1,2);
</script>
</body>
</html>
4, Variable and function naming conflict
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>Function is the first priority. If there is conflict between function name and others, it will be overwritten. If there is conflict between variable and others, it will be ignored</p>
<script>
alert(a);
var a=1;//The handling of variables and function conflicts here is independent of the order before and after, and is function priority
function a(){
console.log('fff');
}
function a(){//When dealing with the conflict between two functions, the latter function will overwrite the function
console.log('ggg');
}
</script>
</body>
</html>
5, Scope
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>js It's not a block scope or a dynamic scope, js Is a lexical scope, also known as a static scope or closure</p>
<p>Add a member to the function when it is created scope</p>
<script>
var x=10;
function ff(){//(js When the parser parses from top to bottom) add a scope==Lexical environment when creating functions==window
alert(x);//A variable to pop up is resolved here x，and ff Function not defined x，So go to it. scope I can't find it window Look for
// window There is no global variable, so an error is reported at this time. The improved method is to add global variables var x=10;that will do
}
function ff1(){
var x=9;
ff();//In this place, when the function is executed, create a lexical environment of your own and scope Connected (and scope==window)
}
function ff2(){
var x=8;
ff();
}
ff1();//Improved pop-up 10
</script>
</body>
</html>
6, Scope chain
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function f(){//f stay js Created when the parser parses from top to bottom scope(Scope of action) == window
//f Create your own lexical environment when called( Lexical Environment) And f Of scope(Scope of action)Link up
var x=10;//hold x=10 join f Of Lx in
function g(){//Create function g Hour scope(Scope of action) == f Lexical Environment of( Lx)，That is to say, the preprocessing will add variables and functions at creation time f In this legal environment
//g Runtime g Will create their own Lexical Environment( Lx)== g Of scope(Scope of action)
}
g();//call g function
}
//The scope chain is: g(Lx)-->g[scope]-->f(Lx)-->f[scope]-->window
</script>
</body>
</html>
7, About new Function
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>How to create a function</p>
<p>First:function f(){Code segment}. Commonly used</p>
<p>Second:var g = function (){Code segment}. Commonly used</p>
<p>The other second:var g = function f(argument){Code segment}. here f Not frequently accessed</p>
<p>Third:var g = new Function ("parameter","Function body")</p>
<p>As mentioned before, scope chain new Function The created function scope always points to the global, not the parent function</p>
<script>
//The first situation
function f(){
var x=10;
var g=function (){
alert(x);
}
g();
}
f();//Final result pop up 10 due to scope chain
//The second situation
// var x=100;
// function f (){
// var x=10;
// var g = new Function ("","alert(x)");
// g();
// }
// f();//Because the function scope created with new Function always points to the global instead of the parent function, only when x is declared in the global can the value pop up
</script>
</body>
</html>