Explain the use of JavaScript scope scope chain and closure in detail

1. Scope

Scope refers to the collection of accessible variables and functions.

Scope can be divided into global scope and local scope.

1.1 Global Scope

Global scope refers to the set of variables and functions defined outside the outermost function.

In other words, the variables and functions defined outside these outermost functions can be accessed anywhere.

For example:

//  The outermost definition variable 
var a = 1;

console.log(a); //  The outermost layer can be accessed 

function fnOne() { //  Outermost function 
  
  console.log(a); //  Function can be accessed within the 
  
  function fnTwo() { //  Subfunction 
    console.log(a); //  Subfunction can also be accessed 
  }
}



//  Description 
 Define on the outermost side 1 Is not only accessible from the outermost, 
 It can also be accessed within functions and child functions of functions. 

1.2 Local scope

Local scope refers to the set of variables and functions defined inside a function.

In other words, these variables and functions defined inside the function cannot be accessed outside the function, but can only be accessed inside the function (including its descendants).

For example:

function fnThree() {
  //  Defining variables within a function 
  var b = 2;
  
  console.log(b); //  Function can be accessed internally 
  
  function fnFour() {
    console.log(b); //  It can also be accessed within subfunctions 
  }
}
//  Can't be accessed outside the function 
//console.log(b); 


//  Description 
 In function  fnThree  Definition in 1 Variable  b  Which can be accessed within the function, 
 In subfunction  fnFour  Can also be accessed in, but in   Function  fnThree  Outside is inaccessible. 

2. Chain of scope

From the above two examples, it can be seen that the innermost subfunction can access not only the variables inside the outermost function, but also the global variables outside the outermost function.

This is because, when creating the outermost function, the global scope will be taken over, and then when creating the sub-function, the outermost scope (including the global scope) will be taken over, thus forming a scope chain.

Therefore, a scope chain is a list of all scopes that the inner function has from the outer function to the outermost (outside the outermost function, global).

3. Closures

Closures are functions that can read variables inside other functions. (-Baidu Encyclopedia)

As we can see from the second example above, the local variables defined inside the function cannot be accessed outside the function, but closures provide the possibility.

For example:

function User() {
	//  Define private variables 
	var userName = "default";
	
	//  Provide  setUserName()  Method 
	function setUserName(uName) {
		userName = uName;
	}
	
	//  Provide  getUserName()  Method 
	function getUserName() {
		return userName;
	}
	
	//  Open the method to the outside world 
	return {
		set: setUserName,
		get: getUserName
	}
}

var user1 = User();
user1.set('tom');
console.log(user1.get());
var user2 = User();
user2.set('jack');
console.log(user2.get());

//  Description 
User  Function defines variables internally  uesrName  , 
 And define two subfunction operations internally  userName , 
 Finally, the two subfunctions are returned ( 1 One can be put back directly, and more can be put back in objects.). 

 In this way, child functions can be called outside the function to access variables inside the function. 
 These two subfunctions implement the function of closure. 

The above is a detailed explanation of the use of JavaScript scopes, scope chains and closures. For more information on JavaScript scopes, scope chains and closures, please pay attention to other related articles on this site!