JavaScript variable promotion and closure understanding

This article gives you a detailed analysis of the relevant knowledge points of JavaScript variable promotion and closure. Friends who are interested in this can refer to it.

Let's look at a question first:

<script>
 console.log(typeof a)//undefined
 var a=&#39;littlebear&#39;;
 console.log(a)//littlebear 
</script>
<script>
 console.log(typeof a)//string
 var a=1;
 console.log(a)//1
</script>

In the first script, you can see that var a is promoted to the top, and a = 'littlebear' is kept in place.

The second script, the reason why undefined is not printed first, is because a has been declared by var above, so var a will not be promoted again.

Look at another question:

<script>
  console.log(a)//function a(){}
  var a=1;
  console.log(a)//1
  function a(){}
  console.log(a)//1
</script>

You can see that function a(){} is promoted to the top. Explain the hoisting of functions and the hoisting of variables

1. Variable hoisting

Before ES6, JavaScript did not have block-level scope (a pair of curly braces {} that is is a block-level scope), with only global scope and function scope. Variable hoisting hoists a variable declaration to the beginning of its scope.
The example of the last resume is:

console.log(global); // undefined
var global = 'global';
console.log(global); // global

function fn () {
　　console.log(a); // undefined
　　var a = 'aaa';
　　console.log(a); // aaa
}
fn();

The reason why the above print result is due to the variable promotion of js, in fact, the above code is executed as follows:

var global; // 变量提升，全局作用域范围内，此时只是声明，并没有赋值
console.log(global); // undefined
global = 'global'; // 此时才赋值
console.log(global); // 打印出global
 
function fn () {
　　var a; // 变量提升，函数作用域范围内
　　console.log(a);
　　a = 'aaa';
　　console.log(a);
}
fn();

2. Function promotion

There are two ways to create functions in js: function declaration and function literal. Function hoisting only exists in function declarations! For example:

console.log(f1); // function f1() {}  
console.log(f2); // undefined 
function f1() {}
var f2 = function() {}

The reason why there are the above print results is because the function promotion in js causes the code to actually be executed as follows:

function f1() {} // 函数提升，整个代码块提升到文件的最开始
console.log(f1);  
console.log(f2);  
var f2 = function() {}

3. What is Closure

A closure is a function that has access to a variable in the scope of another function.

Simply put, Javascript allows the use of internal functions---that is, function definitions and function expressions are located in the function body of another function. Furthermore, these inner functions have access to all local variables, parameters, and other inner functions declared in the outer function in which they exist. A closure is formed when one of these inner functions is called outside the outer function that contains them.

4. The scope of variables

To understand closures, you must first understand the scope of variables.

The scope of variables is nothing more than two types: global variables and local variables.

The special thing about the Javascript language is that global variables can be read directly inside the function.

The internal function can access the variables of the external function because the scope chain of the internal function includes the scope of the external function;

can also be understood as: the scope of the internal function It radiates to the scope of the external function;

var n=999;
function f1(){
　alert(n);
}
f1(); // 999

On the other hand, the local variables within the function cannot be read outside the function.

function f1(){
　var n=999;
}
alert(n); // error

There is one thing to note here. When declaring variables inside a function, you must use the var command. If you don't use it, you are actually declaring a global variable!

function f1(){
　 n=999;
}
f1();
alert(n); // 999

5. How to write and use closures

var Circle={ 
  "PI":3.14159, 
  "area":function(r){ 
    return this.PI * r * r; 
  } 
}; 
alert( Circle.area(1.0) );//3.14159

I didn’t realize at first that writing objects in this way is also a kind of closure. Looking back today, this It’s the classic use of closure!

6. Points of note when using closures

1) Since closures will cause the variables in the function to be stored in memory, the memory consumption is very large, so Closures cannot be abused, otherwise it will cause performance problems on the web page and may cause memory leaks in IE. The solution is to delete all unused local variables before exiting the function.

2) The closure will change the value of the variable inside the parent function outside the parent function. Therefore, if you use the parent function as an object, the closure as its public method, and the internal variables as its private value, you must be careful not to Feel free to change the value of the variable inside the parent function.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Vue loading custom js file method

Instance of executing function after leaving the vue page

Usage of vue carousel plug-in vue-concise-slider

The above is the detailed content of JavaScript variable promotion and closure understanding. For more information, please follow other related articles on the PHP Chinese website!