Example explanation of scope and function closure in js

This article mainly shares with you examples of scope and function closure in js. 1. Scope is very simple, just a simple click. The scope of js does not have block-level scope, only global scope and function scope;

For example:

if(true){

var a=100;

}

console.log(a);

In java or c, the curly brackets are outside the block and cannot be obtained, but in js it is possible, which is equivalent to

var a;

if(true){

a=100;

}

The a here is the global scope; all variables defined outside the function are the global scope.

Special case:

function  Loga(){

a=100

}

console.log(a);

The a here can also be obtained. When the variable is declared directly without var inside the function, the parent scope is also regarded as the scope, but this is not recommended. To write, you generally need to declare the definition.

The literal understanding of function scope is that variables defined inside the function work inside the function;

The difference between function scope and global scope is that the global scope can be called within the function scope variables in the scope and modify them, but the global scope cannot call variables defined in the function scope. The definition here is very important (whether it is modified). This involves the scope chain, which means that variables can access variables in the parent scope in turn. In layman's terms, it can be accessed from the inside out but cannot be accessed from the outside in.

2. Closure

There is no exact definition of the concept of closure. Let’s talk about the usage scenarios of closure

a. Function as return value;

b. Functions are passed as parameters

Example:

  function F1(){
    		var a=100
		return function(){
			console.log(a);//a是自由变量
		}
	}
	var a=200;
	var f=F1();
	f();

This is a typical closure case, the return value f is a function, and the execution environment is Global, but the generation environment is in F1. The scope of the function here is F1, so the output is 100; a here is a free variable, which needs to be searched in the parent scope, which is the second situation in F1.

, the function is passed as a parameter

	function F1(){
		var a=100
		return function(){
			console.log(a);
		}
	}
	var a=200;
	var f=F1();
	function F2(fn){
		var a=300;
		fn();
	}
	F2(f);

Obviously the result is the same, the reason is the same as above, the execution environment is F2, but the generation environment is F1, the parent scope is F1, so the output is still 100.

Related recommendations:

Scope chain, prototype chain and prototype inheritance in js

JS scope chain and closure example sharing

Detailed explanation of JavaScript scope and closure

The above is the detailed content of Example explanation of scope and function closure in js. For more information, please follow other related articles on the PHP Chinese website!