[JavaScript] scope, scope chain and closure

Time:2021-9-8

1. Scope

A scope is a 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, variables and functions defined outside these outermost functions can be accessed anywhere.

for instance:

//Outermost definition variable
var a = 1;

console.log(a); //  The outermost layer is accessible

Function fnone() {// outermost function
    
    console.log(a); //  Can be accessed within a function
    
    Function fntwo() {// subfunction
        console.log(a); //  Can also be accessed within a subfunction
    }
}



//Explain
Define a variable on the outermost side, which can be accessed not only on the outermost side,
It can also be accessed within a function and within a child function of a function.

1.2 local scope

A local scope is a collection 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 only inside the function (including the descendants of the function).

for instance:

function fnThree() {
    //Define variables within functions
    var b = 2;
    
    console.log(b); //  Functions can be accessed internally
    
    function fnFour() {
        console.log(b); //  Can also be accessed within a subfunction
    }
}
//Cannot access outside function
//console.log(b); 


//Explain
Define a variable B in the function fnthree, which can be accessed in the function,
It can also be accessed in the sub function fnfour, but it cannot be accessed outside the function fnthree.

2. Scope chain

As can be seen from the above two examples, the innermost sub function can access not only the variables in 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. In this way, a chain of scopes will be formed.

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

3. Closure

Closures are functions that can read internal variables of other functions(—— Baidu Encyclopedia)

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

for instance:

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 public
	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());

//Explain
The user function internally defines the variable uesrname,
And internally define two sub functions to operate username,
Finally, two sub functions are returned (one can be put back directly, and multiple can be put back in the object).

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

Recommended Today

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Test source code: import { Component } from ‘@angular/core’; import { createSelector } from ‘@ngrx/store’; export interface State { counter1: number; counter2: number; } export const selectCounter1 = (state: State) => state.counter1; export const selectCounter2 = (state: State) => state.counter2; export const selectTotal = createSelector( selectCounter1, selectCounter2, (counter1, counter2) => counter1 + counter2 ); // […]