Talking about my understanding of scope in JavaScript

What is scope?

Scope: The scope in which a variable can take effect. Variables are not available everywhere, and the scope of use of this variable is the scope we are talking about.

Note: In JavaScript, the scope is also divided by curly braces, but the curly braces that can effectively limit the scope in JS are only function curly braces!

Classification of scope

- Global scope (not inside any function)

The global scope is the largest scope
Variables defined in the global scope can be used anywhere
When the page is opened, the browser will automatically generate a global scope window for us
This scope will always exist until the page is closed and destroyed

Please see the sample code below

var a = 10;
console.log(a);  //输出结果为  10
function fn(){
    console.log(a);   // 输出结果也是10
}
fn()

When the variable a is declared using var, there is no function braces wrapped at this time, then this variable is called a global variable

This global variable can be accessed anywhere.

- Local scope (inside a function)

The local scope is a relatively small scope opened up under the global scope
Variables defined in a local scope can only be used inside this local scope
In JS only functions can generate a local scope, nothing else
Every function is a local scope

Please see the sample code below

// 下面这个 num 是一个全局作用域下的变量  在任何地方都可以使用
var num = 100;

function fn(){
//    下面这个 num 变量就是一个 fn 局部作用域内部的变量 
//    只能在  fn  函数内部使用   
    var num = 200
    console.log(num)   // 输出结果：200
}
fn()
console.log(num)   // 输出结果：100

As can be seen from the above code:

Variables declared in function curly braces are called local variables

A local variable can only be used within the scope in which it is declared.

We are used to seeing the general case, now look at a special case:

Variables are declared without the var keyword:

Notice! This is an irregular way of declaring it! Do not use! Do not use! Do not use!

The result after use is: a declaration of a local variable can also be accessed globally! (Such declarations are called pseudo-global variables)

Please see the sample code below:

function fn(){
    a = 100;  //此时声明变量 a  没有使用  var  关键字进行声明
    console.log(a);   输出结果为 100
}
console.log(fn())   //输出结果为  100   竟然不会报错！！！

After reading the sample code above, I suddenly feel that this is not very good? , the variable a can be used casually, and no error will be reported. Here, you must have doubts in your mind? why is that? ? ?

Then, please read on, this way of writing is very dangerous! ! !

When turning a local variable into a pseudo-global variable:

You will find:

The life cycle has become longer, causing certain negative effects;
Occupies the global namespace, causing unpredictable errors

Here to explain, what is the life cycle ? ? What is a namespace ? ? ? please read on

Lifetime (how long this variable lives in memory)

That is, you can access this variable anytime!

The difference between the lifetime of global variables and local variables

- Global variables: the life cycle is synchronized with the program, and the variable will always exist until the program is closed;

the result is that the program will become heavier! If possible, I feel that it is better to set up a little less global variables! good for developers

- Local variables: the life cycle is synchronized with the function execution, and the variable is deleted when the function execution ends;

This is the so-called life cycle. If there are too many global variables, it may really affect the running efficiency of our program. This is the reason for the pseudo-global variables mentioned above.

After we understand the life cycle, let's take a look at the namespace!

Namespace (uniqueness of variable name naming)

- Global variables: the namespace is unique, and there is only one per page

Take a look at the sample code below:

var a = 100;
function fn(){
    // 程序的懒惰原则：函数的大括号之中如果已经有了 var 查找结果，那么就不会计息再查找了
    // 这是就近原则
    var a = 0;
    console.log(a)   //  输出结果：0
}
console.log(fn())   // 输出结果：100

In order to solve the problem that the global namespace is the only one, we can put this variable locally, so that the global namespace will not be occupied.

- Local variables: There is only one namespace per scope

Anonymous functions can be used to solve the namespace problem

Here's a problem: I'm going to write a lot of code now, and I need to cooperate with other people's code. What should I write at this time? ? ?

Let the anonymous function undergo an operation: if a specific operation occurs in the function, then this function will be regarded as an address;

// fn(); //报错 ：fn is not a function;
// var fn = function(){
//     console.log("hi");
// }
// fn();



// 用声明的方式 定义函数，会有声明的提升
fn();
function fn(){
    console.log("hi");
}
fn();

Finally come to a summary!

1. The global cannot access the local
2. The local can get the global