Some understanding of JavaScript closures

The original: Some understanding of JavaScript closures

Simply put: A closure is a function that can read other functions ' internal variables. So how to implement reading other function internal variables, we all know that in JavaScript, the intrinsic function can access the variables in its parent function, if the internal function return is not representative of the ability to access the variables in its parent function, the principle of closure is actually the case.

Excerpt

Closures are functions that can read other functions ' internal variables. Because in the JavaScript language, only sub-functions inside the function can read local variables, it is possible to simply interpret the closure as "a function defined inside a function".

Main functions of closures:

1. Can read variables inside the function
2. Keep the value of the variable inside the function always in memory

where to use closures should be noted:

1) Because the closure will make the variables in the function are stored in memory, memory consumption is very large, so can not abuse closures, otherwise it will cause the performance of the Web page, in IE may cause memory leaks. The workaround is to remove all unused local variables before exiting the function.

2) The closure changes the value of the inner variable of the parent function outside the parent function. So, if you use the parent function as an object, and the closure as its public method, and the internal variable as its private property (private value), be careful not to arbitrarily change the value of the inner variable of the parent function.

Some examples of closures

Here are some examples of closures that I hope will give you a deep understanding of the closures in JavaScript.

function Makefunc () {  var name = "Mozilla";   function DisplayName () {    alert (name);  }   return DisplayName;} var myFunc = makefunc (); MyFunc ();

In the above demo, DisplayName is actually a closure, and we know that the local variable name in the Makefunc function is not accessible at all in the global scope. But by DisplayName this closure by accessing the local variable name in the Makefunc function, which is why the MyFunc function pops up when the Mozilla

Let's look at an interesting example.

function Makeadder (x) {  returnfunction(y) {    return x + y;  };} var add5 = Makeadder (5); var add10 = Makeadder (ten); Console.log (Add5 (2));  // 7 //  A

The following example may be a look at the answer, because the closure function increment, decrement, value can access privatecounter, so the answer is self-evident.

varCounter = (function() {  varPrivatecounter = 0; functionChangeby (val) {Privatecounter+=Val; }  return{increment:function() {Changeby (1); }, Decrement:function() {Changeby (-1); }, Value:function() {      returnPrivatecounter;   }  }; }); alert (Counter.value ()); /*Alerts 0*/counter.increment (); counter.increment (); alert (Counter.value ()) ;/*Alerts 2*/counter.decrement (); alert (Counter.value ());/*Alerts 1*/

The following example is not difficult, because Makecounter returns an object, so each object internal variable privatecounter is different, so the following example object The counter1 and object Counter2 have access to the privatecounter that each occupy a different memory space.

varMakecounter =function() {  varPrivatecounter = 0; functionChangeby (val) {Privatecounter+=Val; }  return{increment:function() {Changeby (1); }, Decrement:function() {Changeby (-1); }, Value:function() {      returnPrivatecounter; }  }  };varCounter1 =Makecounter ();varCounter2 =makecounter (); alert (Counter1.value ());/*Alerts 0*/counter1.increment (); counter1.increment (); alert (Counter1.value ()) ;/*Alerts 2*/counter1.decrement (); alert (Counter1.value ());/*Alerts 1*/alert (Counter2.value ());/*Alerts 0*/

Let's look at a typical closure example.

Assume that the HTML elements on the page are as follows:

<PID= "Help">Helpful notes would appear here</P><P>E-Mail:<inputtype= "text"ID= "Email"name= "Email"></P><P>Name:<inputtype= "text"ID= "Name"name= "Name"></P><P>Age:<inputtype= "text"ID= "Age"name= "Age"></P>

Then our JS code looks like this:

functionShowHelp (Help) {document.getElementById (' Help '). InnerHTML =Help ;}functionSetuphelp () {varHelpText = [      {' ID ': ' email ', ' help ': ' Your e-mail address '},      {' id ': ' name ', ' Help ': ' Your full Name '},      {' ID ': ' Age ', ' help ': ' Your-age ' (must is over 16) '}    ];  for(vari = 0; i < helptext.length; i++) {    varitem =Helptext[i]; document.getElementById (item.id). onfocus=function() {showHelp (ITEM.HELP); }}}setuphelp ();

Originally, We wanted

• In the email text box in the focus, the Help element is displayed in the your e-mail address
• When focus is in the Name text box, the Help element displays the your full name
• In the Age text box, when you focus, the Help element shows your (you must is over 16)

It turns out that no matter which text box focus,help element is always displayed is your age (you must is over 16) This is actually a feature of closures, which always accesses the final value of a local variable.

So you should use the code below to achieve your desired effect.

        functionShowHelp (Help) {document.getElementById (' Help '). InnerHTML =Help ; }        functionMakehelpcallback (Help) {return function() {showHelp (Help);        }; }        functionSetuphelp () {varHelpText = [                { ' ID ': ' email ', ' help ': ' Your e-mail address ' },                { ' id ': ' name ', ' Help ': ' Your full Name ' },                { ' ID ': ' Age ', ' help ': ' Your-age ' (must is over 16) ' }            ];  for(vari = 0; i < helptext.length; i++) {                varitem =Helptext[i]; document.getElementById (item.id). onfocus=Makehelpcallback (ITEM.HELP); }} setuphelp ();

The above example uses a closure to hold the value of the function's local variables, and I believe you'll see the example below and you'll see for sure right away.

 var  name = "The window" ;  var  object = {name:  "My Object" Span style= "color: #000000;" >, Getnamefunc:  function   () { 
   
    return  
    function  
     () { 
    return  
    this  
    .name;　　　　};　　}　　}; Alert (Object.getnamefunc ());  
    // 
    the window This is a global object, so alert handles the name of the window  
   

the point of this is determined by the context in which it is called by the function. Not determined by the context in which it is defined by the function. because the last return value of the closure is a function, note that it is a function that is not executed until the alert is called, and the method that executes the call is the variable that the this pointer refers to window.

 var  name = "The window" ;  var  object = {name:  "My Object" Span style= "color: #000000;" >, Getnamefunc:  function   () { 
   
    var  that = 
    this ; 
    // 
     note here the value of this is saved with the local variable that is the object object, so alert handles the name as my object  
    return  
    function  
     () { 
    return  
     That.name;　　　　};　　}　　}; Alert (Object.getnamefunc ());  
    // 
     note there are two ()//Popup my Object  
   

if the nested function is called as a function, its this value is not a global object (in non-strict mode) is undefined (strict mode (in the example above that pops up the window, Getnamefunc is called as a function )

If the nested function is called as a method, its this value points to the object that called it. (This example pops up my object as a method call)

A small example of prototype

function MyObject (name, message) {  this. Name = name.tostring ();    this. Message = message.tostring ();    This function () {    returnthis. name;  };    This function () {    returnthis. message;  };}

In the above example, it is understood that if you declare 100 MyObject objects, you will use 100 name, message, GetName, getmessage in memory, 100 name, message property. But the 100 GetName, getmessage methods are a bit wasteful, because in fact all objects can be shared in ways that conserve resources. So you might want to declare the MyObject object with the following code

function MyObject (name, message) {  this. Name = name.tostring ();    this. Message == {  function() {    return  This. Name;  },  function() {    returnthis  . Message;  }};

But I can only say that this code I really can not compliment, because the rewrite of the prototype, we all know that the prototype of the bad, the most concise sentence to describe the downside is if you give MyObject all the construction has to start again.

So the following example is recommended, but the following example may be accustomed to writing server-side programming language people will be very uncomfortable with its style (haha, this you think other ways ...) ）

function MyObject (name, message) {  this. Name = name.tostring ();    this. Message =function() {  return  This function () {  returnthis. message;};

References for Ruan Master's learning JavaScript closures (Closure)

Https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

People are inert, in fact, their English level can also be too lazy to upgrade, now found that the original look at English blog is actually very good.

Suggest that you have time to improve their English level, in fact, some of the foreign technology Daniel wrote blog really good. If you have a good front-end English blog can recommend to me.

Some understanding of JavaScript closures