Easily understand JavaScript closure

Summary

closure mechanism is JavaScript important and difficult, we want to help you easily learn the closure

First, what is closed Bag?

Closures can access another function is a function of the variable domain of action.

The following include common closure implementation, of example to explain the closure concept

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

f1 and f2 is the parent function, and f2 is assigned to a global variable (the return value), which results in memory is always f2, and f2 is dependent on the presence of f1, Therefore, f1 is always in memory, and not at the end of the call, the garbage collection (garbage collection) recovery, which will form the closure.

Therefore, it is so appreciated. The closure mechanism is, if the variable A further function reference function B, but returned after B A still not returned, still, because the reference A, so all local variables and not with B B quits cancellation, will exist until A write-off. At this time, A is the closure.

Second, the closure of this pointer

Closures commonly called the global environment, so this is generally directed window, the specific circumstances or needs depending on the execution environment For, in short, this points to the execution environment.

if this requires the closure comprises a closure point object, this object will need to contain a variable pass into the closure.

3] Third, the attention point of the closure

Since the closure will make the variables in the function are saved in memory, the memory consumption is very large, so You can’t abuse the closure, otherwise it will cause the performance problem of the web page, which may cause memory leaks in IE. The solution is that all local variables that will not be used will be removed before exiting the function.

    Closet will change the value of the internal variables of the parent function outside the parent function. So, if you use the parent function as an object (Object), put the closure as a public method (PUBLIC METHOD), regard the internal variable as its private property (Private Value), then be careful, don’t Change the value of the internal variable of the parent function.

Function OnmyLoad () {/ * Throws Problem: The purpose of this question is to pop up the corresponding number subscript 0 ~ 4 each time you click on the corresponding target, but it is actually a number 5 problem that pops up, no matter which goal is clicked. OnClick in the ARR is a function instance (Function object), which also generates a closable domain, which references the variable of the external closing domain, and its Function Scope has a CLASURE object. The reference to i, the content of private variables in the external closing domain changes, the value obtained by the internal closing domain will naturally change * / var arr = document.getElementsBytagname (“p”); for (var i = 0; i

  < arr.length;i++){
  arr[i].onclick = function(){
   alert(i);
  }
  }
 } 
1, additional layer functions are added outside, passing I as a function parameter, so each time Saved is the variable inside the function, and the external i is not the same memory space.And each call function generates a local variable, so it can ensure that the value of each saved does not affect each other.

FOR (var i = 0; i

2, use ES6 Newte LET to circulate VAR i changed to Let i, so that the current i is only valid in this wheel cycle, so each cycle is actually a new variable. You may ask, if each round of loop variable I is re-declared , How do it know the value of the last round of cycles, thus calculate the value of this round cycle? This is because the JavaScript engine remembers the value of the last round of cycles, initializing the variable I of the wheel, is on the previous round. Based on the cycle.
 The above is all the contents of this article, and it is hoped that the content of this article will bring certain help to everyone's learning or work, and I hope to support Tumi Cloud!  <arr.length;i++){
 arr[i].onclick = (function(arg){
  return function () {
   alert(arg);
  }
 })(i);
}                    
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment