JavaScript closure function to access external variables, javascript Variables

JavaScript closure function to access external variables, javascript Variables

A closure is a function that has the right to access the variables in another function scope. However, the configuration mechanism of a function scope must be noted that a closure can only obtain the last value of any variable in a function.

For example:

function create(){    var arr = new Array();       for (var i=0; i<10; i++){        arr[i] = function(){            return i;        };      }     return arr;} var c_arr = create(); for(var i=0; i<c_arr.length;i++){    document.write("c_arr["+i+"] = "+c_arr[i]()+"<br />");    }

Execution result:

On the surface, it seems that the I value returned by each function is different. For example, the value of c_arr [0] should be 0, the value of c_arr [1] should be 1, and so on. Each function returns 10. Why?

Because the scope chain of each function stores the activity objects of the create () function, they reference the same variable I. After the for loop ends, the I value is changed to 10. At this time, each function references the same variable object that saves variable I.

 

We can create another domain name function to force the closure to act as expected, so that each location corresponds to the corresponding value.

function create(){    var arr = new Array();       for (var i=0; i<10; i++){        arr[i] = function(num){            return function(){                return num;             };        }(i);       }     return arr;} var c_arr = create(); for(var i=0; i<c_arr.length;i++){    document.write("c_arr["+i+"] = "+c_arr[i]()+"<br />");    }

Execution result:

An anonymous function is defined and the host that immediately executes the anonymous function is assigned to the array. Here, the anonymous function has a parameter num, Which is the value to be returned by the final function. When calling each function, we pass in variable I. Because function parameters are passed by value, the current value of variable I is assigned to the parameter num. In this anonymous function, a closure accessing num is created and returned, so that each function in the arr array has a copy of its own num variable, therefore, different values can be returned.

Classic example

Let's take a look at a classic example. Suppose there is a set of button tags on the page. We use scripts to bind a click event to this set of button tags, and the following labels will pop up when the button is clicked.

<Meta charset = "UTF-8"/> <button> first </button> <button> second </button> <button> third </button> <button> fourth </button> <script type = "text/javascript"> var obj = document. getElementsByTagName ('click'); for (var I = 0; I <obj. length; I ++) {obj [I]. onclick = function () {alert (I) ;}}</script>

Click each button.

On the surface, it seems that different numbers should be displayed when you click each label.

The first one should bring up 0;

The second should pop up 1;

And so on.

The result is that 4 is displayed for all buttons. Obviously, this is not the expected result.

Let's change the program.

<Meta charset = "UTF-8"/> <button> first </button> <button> second </button> <button> third </button> <button> fourth </button> <script type = "text/javascript"> var obj = document. getElementsByTagName ('click'); for (var I = 0; I <obj. length; I ++) {obj [I]. onclick = function (num) {return function () {alert (num) ;}} (I) ;}</script>

Click the second

Click fourth

We only need to create an anonymous function in the function, as in the above case. You can implement anonymous functions to capture the external variable I. The result is that the I value of each button is different.

Do the functions inside the javascript closure need to use return to access and return the internal variables of the function?

1. return is not required for accessing the internal variables of the function:
Var bar;
Function foo (x ){
Bar = function () {console. log (++ x );}
};
Foo (5 );
Bar (); // The result is 6.

2. To return the internal variables of the function, use return.

Javascript Closure

Hello!

Calling c () is to call a (). This is a problem.
A () is a closure, and the content in it is to return B ().

The method of calling this closure should be a (); so the question just mentioned is here.
Var c = a (); is to pass the reference of this closure to c.
Can we understand that c now has a member variable I and a Member Method B, and its return value points to this member function.
For the benefit of closures, local variables are accessed after the function returns.
That is to say, when c () is run, the variable I in it is destroyed, but it can be retained in member method B.

You can call c () twice and a () twice to view the difference.

Hope to help you!

Bytes -----------------------------------------------------------------------------------------------------