Scope
1. What is scope
A scope is the accessibility of variables, functions, and objects in certain parts of the runtime code. In other words, the scope determines the visibility of variables and other resources in the code block. Maybe these two sentences are not easy to understand. Let's take a look at an example:
function outFun2() { var inVariable = "Inner variable 2"; } outFun2();//You have to execute this function first, or you don't know what's inside console.log(inVariable); // Uncaught ReferenceError: inVariable is not defined
The scope is an independent domain, so that variables will not be leaked and exposed. In other words, the greatest use of scopes is to isolate variables. Variables with the same name under different scopes will not conflict.
Before ES6, JavaScript had no block level scope, only global scope and function scope. The arrival of ES6 provides us with a 'block level scope', which can be reflected by adding the commands let and const.
- The outermost function and variables defined outside the outermost function have global scope
var outVariable = "I'm the outermost variable"; //Outermost variable function outFun() { //Outermost function var inVariable = "Inner variable"; function innerFun() { //Inner function console.log(inVariable); } innerFun(); } console.log(outVariable); //I'm the outermost variable outFun(); //Inner variable console.log(inVariable); //inVariable is not defined innerFun(); //innerFun is not defined
- All variables that are not defined and directly assigned are automatically declared to have a global scope
function outFun2() { variable = "No directly assigned variable is defined"; var inVariable2 = "Inner variable 2"; } outFun2();//You have to execute this function first, or you don't know what's inside console.log(variable); //No directly assigned variable is defined console.log(inVariable2); //inVariable2 is not defined
- The properties of all window objects have global scope
-
Function scope refers to variables declared inside a function. Contrary to the global scope, the local scope is generally accessible only in fixed code fragments, such as inside a function.
function doSomething(){ var blogName="Boating in the waves"; function innerSay(){ alert(blogName); } innerSay(); } alert(blogName); //Script error innerSay(); //Script error
The scope is hierarchical. The inner scope can access the variables of the outer scope, and vice versa. Let's take an example. It may be easier to understand the scope by using bubbles:
The final output results are 2, 4 and 12
- Bubble 1 is a global scope with identifier foo;
- Bubble 2 is the scope foo, with identifiers a,bar,b;
- Bubble 3 is the scope bar and has only identifier c.
3. Block level scope
The block level scope can be declared through the new command let and const. The declared variables cannot be accessed outside the scope of the specified block. A block level scope is created when:
- Inside a function
- Inside a code block wrapped in a pair of curly braces
The syntax of let declaration is consistent with that of var. You can basically use let to declare variables instead of VaR, but it will limit the scope of variables to the current code block. Block level scopes have the following characteristics:
- Declared variables are not promoted to the top of the code block
The let/const declaration will not be promoted to the top of the current code block, so you need to manually place the let/const declaration to the top to make the variables available within the whole code block.
No matter where the fn function will be called.
So don't use the above statement. In contrast, it is more appropriate to describe it in this sentence: go to the domain where the function is created ".
The value in the scope is "create" rather than "call". Remember - in fact, this is the so-called "static scope"
var a = 100 function fn() { var b = 200 console.log(a) // A here is a free variable here console.log(b) } fn()
var a = 100 function F1() { var b = 200 function F2() { var c = 300 console.log(a) // Free variable, find the parent scope along the scope chain console.log(b) // Free variable, find the parent scope along the scope chain console.log(c) // Variables in this scope } F2() } F1()
var x = 10 function fn() { console.log(x) } function show(f) { var x = 20 (function() { f() //10, not 20 })() } show(fn)//The call fn () is called in the global scope, so it is 10
var a = 10 function fn() { var b = 20 function bar() { console.log(a + b) //30 } return bar } var x = fn(), b = 200 x() //bar()
In depth understanding of JavaScript scope and scope chain - Fundebug - blog Garden