Understanding about the closure of Javascript

Source: Internet
Author: User
The following is my own understanding of the closure: Normally, the variable life cycle in the function is terminated after the function is called, for example, the following code: [javascript] functiona () {vari100; alert (++ I);} a (); // 101a (); // 101functiona... syntaxHighlighte

The following is my own understanding of closures:

Generally, the variable life cycle in a function is terminated after the function is called, for example, the following code:


[Javascript]
Function (){
Var I = 100;
Alert (++ I );
}
 
A (); // 101
A (); // 101

Function (){
Var I = 100;
Alert (++ I );
}

A (); // 101
A (); // 101
When a () is executed twice, the output is 101 because function a () is not referenced by any object after function a () is called every time, at this time, the GC of Javascript will reclaim the resources in this function, including I.
When calling a () for the second time, the system re-allocates memory space for I, and creates the I value according to the function definition: 100. After executing ++ I, the output is still 101.

If you want to retain the I value in the function, you can use the following code:


[Javascript]
Function (){
Var I = 100;
Function B (){
Alert (++ I );
}
Return B;
}
 
Var c = ();
C (); // 101
C (); // 102

Function (){
Var I = 100;
Function B (){
Alert (++ I );
}
Return B;
}

Var c = ();
C (); // 101
C (); // output of more than 102, the first is 101, the second is 102, and the internal variable I value of f1 () is retained.
Cause:


1. a () internally defines a new function B (), B () does not find the variable I in its own scope, it will look for it in the parent scope, that is, B () yes. You can access the I variable in;

2. the return value of a () is B (). Here, B () references I. When the return value of a () is assigned to c, the system ensures the existence of c, B will be retained, and B will reference I again, so I will be retained, so that the I value will be retained.

Reference the image in the above article

 

Here, B is the closure. As long as c exists, the I value corresponding to c will always exist.
What I can understand about the function of closures is:
You can save the variable value in the function body, which is equivalent to the member variable in the object. In other ways, this value cannot be accessed and can only be accessed through c. Similar to private members in an object, c is an external interface of this object.
In fact, to meet this requirement, we can directly implement it through the private variables of the object, but I have very limited understanding of Javascript. Now I only know that Javascript does not seem to have the concept of class, the method for constructing an object is different from that of most other object-oriented languages (such as C ++). What are the restrictions on constructing a private member method.
For other applications of closures, I haven't thought of it yet. If I encounter it in the future, I will write a little more.


There is another example in the article mentioned at the beginning of this article, which has not yet been thoroughly understood:


[Javascript]
Var name = "The Window ";
 
Var object = {
Name: "My Object ",
GetNameFunc: function (){
Return function (){
Return this. name; // this = window
};
}
};
Alert (object. getNameFunc (); // The Window

Var name = "The Window ";

Var object = {
Name: "My Object ",
GetNameFunc: function (){
Return function (){
Return this. name; // this = window
};
}
};
Alert (object. getNameFunc (); // The Windowreturn this. name here this is window. Baidu then finds this explanation:
Javascript is a dynamic (or dynamic) language. Only when executing this keyword can you determine who it is. So this always points to the caller, that is, the reference to the 'call object '.
This is not the case, because alert (object. getNameFunc (); is called at the outermost layer, so this indicates window.
However, I put The call into my own object, and The output is still The Window:

 

[Javascript]
Name = "The Window ";
 
Var object = {
Name: "My Object ",
GetNameFunc: function (){
Return function (){
Return this. name;
};
}
};
 
Var object1 = {
Name: "The Object1 ",
Test: function (){
Alert (object. getNameFunc ()());
Alert (this. name );
}
}
Object1.test (); // The Window

Name = "The Window ";

Var object = {
Name: "My Object ",
GetNameFunc: function (){
Return function (){
Return this. name;
};
}
};

Var object1 = {
Name: "The Object1 ",
Test: function (){
Alert (object. getNameFunc ()());
Alert (this. name );
}
}
Object1.test (); // The Window. In The above sentence, this is The caller object1, but The output is still The Window.
It can only be said that Javascript is very deep and it is not easy to understand Javascript ......

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.