当前位置：网站首页>JS variable scope

JS variable scope

2022-06-12 06:08:00 【Sadness from all ages】

1. Scope

Generally speaking , The names used in a piece of program code are not always valid and available , The scope of the code that defines the usability of the name is the scope of the name . The use of scope improves the locality of program logic , Enhance the reliability of the program , Reduced name conflicts .

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script> // 1.JavaScript Scope  ：  It's the code name （ Variable ） Function and effect in a certain range   The purpose is to improve the reliability of the program, and more importantly, to reduce the naming conflict  // 2. js Scope of action （es6） Before  ：  Global scope   Local scope   // 3.  Global scope ：  Whole script label   Or a separate js file  var num = 10; var num = 30; console.log(num); // 4.  Local scope （ Function scope ）  Inside the function is the local scope   The name of this code only works inside the function  function fn() {
       //  Local scope  var num = 20; console.log(num); } fn(); </script>
</head>

<body>

</body>

</html>

JavaScript（es6 front ） There are two kinds of scopes in ：

Global scope

The environment that acts on all code execution ( Whole script The label inside ) Or an independent js file .

Local scope （ Function scope ）

Act on the code environment within the function , It's a local scope . Because it has something to do with functions , So it is also called function scope .

Block scope

Block scope is defined by { } Include . In other programming languages （ Such as java、c# etc. ）, stay if sentence 、 A variable created in a loop statement , Only in Ben if sentence 、 Used in this loop statement , Like the one below Java Code ：

if(true){
      
	int num = 123; 
    system.out.print(num); 
    // 123}system.out.print(num); 
    //  Report errors

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script> // js There is no block-level scope in  js Scope of action ：  Global scope   Local scope   At this stage we js  No,   Block level scope  //  We js  Also in  es6  The new block level scope  //  Block level scope  {} if {} for {} // java  // if(xx) {
       // int num = 10; // } //  The outside cannot call num Of  if (3 < 5) {
       var num = 10; } console.log(num); </script>
</head>

<body>

</body>

</html>

2. Scope of variable

stay JavaScript in , Depending on the scope , Variables can be divided into two types ：

Global variables

Variables declared under the global scope are called global variables （ Variables defined outside functions ）.
Global variables can be used anywhere in the code
In global scope var Declared variables Global variable
Under special circumstances , Don't use... In functions var Declared variables are also global variables （ Not recommended ）

local variable

Variables declared under local scope are called local variables （ A variable defined inside a function ）
Local variables can only be used inside the function
var The declared variable is a local variable
The formal parameters of a function are actually local variables

difference

Global variables ： It can be used anywhere , It will only be destroyed when the browser is closed , So it takes up more memory
local variable ： Use only inside functions , When its code block is executed , Will be initialized ; After the contemporary code block runs , Will be destroyed , Therefore, it saves more memory space

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script> //  Scope of variable ：  According to different scopes, we divide variables into global variables and local variables  // 1.  Global variables ：  Variables under global scope   Can be used globally  //  Be careful   If it's inside a function   Variables that do not declare direct assignment are also global variables  var num = 10; // num It's a global variable  console.log(num); function fn() {
       console.log(num); } fn(); // console.log(aru); // 2.  local variable   Variables under local scope   The latter variable inside the function is   local variable  //  Be careful ：  The formal parameters of a function can also be regarded as local variables  function fun(aru) {
       var num1 = 10; // num1 It's a local variable   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 , Compare memory resources  // (2)  local variable   When our program is completed, it will be destroyed ,  Save memory resources  </script>
</head>

<body>

</body>

</html>

3. Scope chain

Just the code , At least one scope is written in the local scope inside the function
If there are functions in the function , Then a scope can be created in this scope
According to this mechanism that external function variables can be accessed in internal functions , Use chain search to determine which data can be accessed by internal functions , It's called the scope chain

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script> //  Scope chain  ：  Internal functions access variables of external functions , The method of chain search is adopted to decide which value to take   This structure is called scope chain   Nearby principle  var num = 10; function fn() {
       //  External function  var num = 20; function fun() {
       //  Internal function  console.log(num); } fun(); } fn(); </script>
</head>

<body>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script> //  Case study 1 ：  The result is a few ？ function f1() {
       var num = 123; function f2() {
       var num = 0; console.log(num); //  Stand on the target and start , Look out layer by layer  } f2(); } var num = 456; f1(); //  Case study 2 ： The result is a few ？ 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); //a Value  ? console.log(b); //b Value  ? } } } fn1(); </script>
</head>

<body>

</body>

</html>