What is scope
- Generally speaking, the name used in a piece of program code is not always valid and available, and the scope of the code that limits the availability of the name is the scope of the name. The use of scope improves the locality of program logic, enhances the reliability of program, and reduces name conflict.
- There are two scopes in JavaScript (before es6):
- Global scope: it acts on the environment of all code execution (within the whole script tag) or an independent js file.
- Local scope (function scope): the code environment within a function is the local scope. Because it is related to functions, it is also called function scope.
<script>
// 1.JavaScript scope: it means that the code name (variable) plays a role and effect in a certain range. The purpose is to improve the reliability of the program, and more importantly, to reduce naming conflicts
// 2. Before the scope of JS (es6): global scope local scope
// 3. Global scope: the entire script tag or a separate js file
var num = 10;
var num = 30;
console.log(num);
// 4. Local scope (function scope) is the local scope inside the function. The name of this code only plays an effect and role inside the function
function fn() {
// Local scope
var num = 20;
console.log(num);
}
fn();
</script>- es6 has block level scope
The block scope is included by {}.
In other programming languages (such as java, c# etc.), variables created in if statements and loop statements can only be used in this if statement and loop statement
Ring statements, such as the following Java code:
if(true){
int num = 123;
system.out.print(num); // 123
}
system.out.print(num); // report errorsjs (es5) has no block level scope, which is the current syntax.
if(true){
var num = 123;
console.log(123); //123
}
console.log(123); //123Scope of variable
<script>
// Variable scope: according to different scopes, our variables are divided into global variables and local variables
// 1. Global variables: all variables in the global scope can be used in the global context
// Note that if there is no declaration inside the function, the directly assigned variable is also a global variable
var num = 10; // num is a global variable
console.log(num);
function fn() {
console.log(num);
}
fn();
// console.log(aru);
// 2. A local variable is a variable under the local scope, and the latter variable inside the function is a local variable
// Note: the formal parameters of a function can also be regarded as local variables
function fun(aru) {
var num1 = 10; // num1 is a local variable and can only be used inside a function
num2 = 20;
}
fun();
// console.log(num1);
// console.log(num2);
// 3. From the perspective of execution efficiency, global variables and local variables
// (1) Global variables are destroyed only when the browser is closed, which takes up more memory resources
// (2) Local variables will be destroyed after the execution of our program, which saves memory resources
</script>Scope chain
- Scope chain: use the proximity principle to find the final value of the variable
- As long as it is code, there is at least one scope
- Local scope written inside a function
- If there are functions in the function, another scope can be born in this scope
- According to the mechanism that internal functions can access external function variables, using chain search to determine which data can be accessed by internal functions is called scope chain
<script>
// Case 1: what is the result? The result is 0
function f1() {
var num = 123;
function f2() {
var num = 0;
console.log(num); // Starting from the target, look outward layer by layer, and the result is 0, because the scope of the nearest layer is in function f2
}
f2();
}
var num = 456;
f1();
// Case 2: what is the result?
var a = 1;
function fn1() {
var a = 2;
var b = '22';
fn2();
function fn2() {
var a = 3;
fn3();
function fn3() {
var a = 4;
console.log(a); //Value of a? The value of a is 4
console.log(b); //Value of B? The b value is 22
}
}
}
fn1();
</script>Pre analysis
- Javascript code is executed by a JavaScript parser in the browser. The JavaScript parser runs JavaScript code in two steps: pre parsing and code execution.
- Pre parsing: under the current scope, the browser will store variables with var and function declarations in memory by default before JS code execution
Make a declaration or definition in advance.
- Code execution: execute JS statements from top to bottom.
- Pre parsing only occurs on variables and functions defined through var. Learning pre parsing can let us know why the value of the variable accessed before the variable declaration is undefined and why the function can be called before the function declaration.
<script>
// 1 ask
console.log(num);
// 2 ask
console.log(num); // undefined Pit 1
var num = 10;
// This is equivalent to executing the following code
// var num;
// console.log(num);
// num = 10;
// 3 ask
function fn() {
console.log(11);
}
fn();
// 4 ask
fun(); // Error reporting Pit 2
var fun = function() {
console.log(22);
}
// Function expression calls must be written below the function expression
// This is equivalent to executing the following code
// var fun;
// fun();
// fun = function() {
// console.log(22);
// }
// 1. Our js engine runs js in two steps: pre parsing code execution
// (1) . the pre parsing js engine will promote all var and function s in js to the front of the current scope
// (2) Code execution is executed from top to bottom in the order of code writing
// 2. Pre parsing is divided into variable pre parsing (variable promotion) and function pre parsing (function promotion)
// (1) Variable promotion is to promote all variable declarations to the front of the current scope without promoting the assignment operation
// (2) Function promotion is to promote all function declarations to the front of the current scope without calling functions
</script>- Case list
<script>
// Pre analysis case
// Case 1
// var num = 10;
// fun();
// function fun() {
// console.log(num);
// var num = 20;
// }
// //This is equivalent to performing the following operations
// // var num;
// // function fun() {
// // var num;
// // console.log(num);
// // num = 20;
// // }
// // num = 10;
// // fun();
// //Case 2
// var num = 10;
// function fn() {
// console.log(num);
// var num = 20;
// console.log(num);
// }
// fn();
// //Equivalent to the following code
// // var num;
// // function fn() {
// // var num;
// // console.log(num);
// // num = 20;
// // console.log(num);
// // }
// // num = 10;
// // fn();
// //Case 3
// var a = 18;
// f1();
// function f1() {
// var b = 9;
// console.log(a);
// console.log(b);
// var a = '123';
// }
// Equivalent to the following code
// var a;
// function f1() {
// var b;
// var a;
// b = 9;
// console.log(a);
// console.log(b);
// a = '123';
// }
// a = 18;
// f1();
// Case 4
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
var a = b = c = 9;
console.log(a);
console.log(b);
console.log(c);
}
// Following code
// function f1() {
// var a;
// a = b = c = 9;
// //Equivalent to var a = 9; b = 9; c = 9; B and C are directly assigned without var declaration when the global variable is viewed
// //Collective declaration var a = 9, b = 9, c = 9;
// console.log(a);
// console.log(b);
// console.log(c);
// }
// f1();
// console.log(c);
// console.log(b);
// console.log(a);
</script>