Javascript closure _ javascript skills

This article mainly introduces the javascript closure, which is a difficult and characteristic of the Javascript language. Many advanced applications rely on the closure to implement it, if you are interested, you can refer to my study notes below, which is useful for beginners of Javascript.

I. Scope of Variables
To understand closures, you must first understand the special variable scopes of Javascript.
Variables have two scopes: global variables and local variables.
The special feature of Javascript is that the function can directly read global variables.

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

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

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

Note that you must use the var command when declaring variables in a function. If you don't need it, you actually declare a global variable!

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

2. How to read local variables from the outside?
For various reasons, we sometimes need to get local variables in the function. However, as we have already said, under normal circumstances, this cannot be done. It can only be implemented through a work und.
That is to define another function within the function.

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

In the code above, function f2 is included in function f1. All local variables in function f1 are visible to f2. But in turn, the local variables in f2 are invisible to f1. This is the "chain scope" structure exclusive to the Javascript language. The sub-object will first look up the variables of all parent objects. Therefore, all variables of the parent object are visible to the child object, and vice versa.
Since f2 can read local variables in f1, As long as f2 is taken as the return value, we can't read its internal variables outside f1!

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

Iii. Concepts of closures
The f2 function in the previous code is the closure.
Closure definitions in various professional documents are very abstract and hard to understand. In my understanding, closures are functions that can read internal variables of other functions.
In Javascript, only the subfunctions in a function can read local variables. Therefore, you can simply understand the closure as a function defined in a function ".
Therefore, in essence, closure is a bridge connecting the internal and external functions of a function.

Iv. Use of closures
Closures can be used in many places. It has two major functions: one is to read the internal variables of the function mentioned above, and the other is to keep the values of these variables in the memory.
How can we understand this sentence? See the following code.

　　function f1(){ 　　　　var n=999; 　　　　nAdd=function(){n+=1} 　　　　function f2(){ 　　　　　　alert(n); 　　　　} 　　　　return f2; 　　} 　　var result=f1(); 　　result(); // 999 　　nAdd(); 　　result(); // 1000 

In this Code, the result is actually the f2 function of the closure. It runs twice in total. The first value is 999, and the second value is 1000. This proves that the local variable n in function f1 has been stored in the memory and is not automatically cleared after f1 is called.
Why? The reason is that f1 is the parent function of f2, and f2 is assigned a global variable, which causes f2 to always be in the memory, while f2 depends on f1, therefore, f1 is always in the memory and will not be recycled by the garbage collection mechanism after the call is completed.
Another noteworthy part of this Code is the line "nAdd = function () {n + = 1}". The var keyword is not used before nAdd, therefore, nAdd is a global variable rather than a local variable. Secondly, the value of nAdd is an anonymous function, and this anonymous function itself is also a closure, so nAdd is equivalent to a setter, you can operate the local variables inside the function outside the function.

5. Notes on using closures
1) because the closure will make the variables in the function be stored in the memory, the memory consumption is very large, so the closure cannot be abused, otherwise it will cause the performance of the web page, memory leakage may occur in IE. The solution is to delete all unused local variables before exiting the function.
2) The closure changes the value of the internal variable of the parent function outside the parent function. Therefore, if you use the parent function as an object, use the closure as its Public Method, and use internal variables as its private value ), be sure not to change the value of the internal variable of the parent function.

Vi. Questions
If you can understand the running results of the following two sections of code, you should understand the operating mechanism of the closure.
Code snippet 1:

　var name = “The Window”; 　　var object = { 　　　　name : “My Object”, 　　　　getNameFunc : function(){ 　　　　　　return function(){ 　　　　　　　　return this.name; 　　　　　　}; 　　　　} 　　}; 　　alert(object.getNameFunc()());

Code snippet 2:

　var name = “The Window”; 　　var object = { 　　　　name : “My Object”, 　　　　getNameFunc : function(){ 　　　　　　var that = this; 　　　　　　return function(){ 　　　　　　　　return that.name; 　　　　　　}; 　　　　} 　　}; 　　alert(object.getNameFunc()()); 

How does this work in javascript?

var fullname = ‘John Doe'; var obj = { fullname: ‘Colin Ihrig', prop: { fullname: ‘Aurelio De Rosa', getFullname: function() { return this.fullname; } } };console.log(obj.prop.getFullname());var test = obj.prop.getFullname;console.log(test());

Answer
The answer is Aurelio De Rosa and John Doe. The reason is that in a function, the behavior of this depends on the method of calling and defining JavaScript Functions, not just how it is defined.
In the first console. log () call, getFullname () is called as the function of the obj. prop object. Therefore, context refers to the latter, and the function returns the fullname of the object. In contrast, when getFullname () is assigned to the test variable, context refers to the Global Object (window ). This is because test is implicitly set as a global object attribute. For this reason, the function returns the fullname of window, that is, the value defined in the first row.

The above is all the content of this article. I hope it will be helpful for you to understand javascript closures again.