Understanding javascript prototype and closure (15)-closure and understanding javascript

Source: Internet
Author: User

Understanding javascript prototype and closure (15)-closure and understanding javascript

In addition to understanding the context and scope, we also understand the basics of closures.

As for the literal description of the concept of the word "closure", it is really hard to explain. I have read it many times, but I still can't remember it.

However, you only need to know the two situations of the Application -- the function is used as the return value, and the function is passed as the parameter.

First, the function is used as the return value.

In the code above, the bar function is used as the return value and assigned to the f1 variable. When f1 (15) is executed, the value of the max variable in the fn scope is used. For how to set cross-scope values, refer to the previous section.

 

Second, the function is passed as a parameter.

In the above Code, the fn function is passed into another function as a parameter and assigned to the f parameter. When f (15) is executed, the value of max variable is 10, not 100.

 

When talking about the cross-scope value of a free variable in the previous section, we once stressed that the scope value of the function should be created, rather than the "parent scope ". With this understanding, it is easier to set the value of a free variable in the above Code. (A friend who does not understand must go to the previous section. This is very important !)

 

In addition to the scope, the closure should be combined with the execution context stack.

As we talked about executing the context stack (http://www.cnblogs.com/wangfupeng1988/p/3989357.html), we mentioned that when a function is called, its execution context environment will be destroyed, and the variables will be destroyed at the same time.

However, a question mark was left in the article at that time. In some cases, after a function is called, the execution context will not be destroyed. This is the core content of the closure.

Let's take the first piece of code (slightly modified) in this article for analysis.

 

Step 1: generate a global context environment before code execution, and assign values to the variables during execution. The global context is active.

 

Step 2: Call fn () to execute the 17th lines of code, generate the fn () Execution Context Environment, press the stack, and set it to the active state.

 

Step 3: After 17th rows are executed, the fn () call is completed. The execution context of fn () should be destroyed, but this cannot be done here. Note: When fn () is executed, a function is returned. A function can create an independent scope. Coincidentally, there is also a free variable max in the returned function body that references the max in the fn () context under the fn scope. Therefore, this max cannot be destroyed. After it is destroyed, the max value in the bar function cannot be found.

Therefore, the fn () context cannot be destroyed and still exists in the execution context stack.

-- That is, when the execution reaches 18th, the global context environment will change to the active state, but the fn () Context Environment will still be in the execution context stack. For example:

 

Step 4: Execute row 20th, execute f1 (15), that is, execute bar (15), create bar (15) Context Environment, and set it to activity status.

When bar (15) is executed, max is a free variable and needs to be searched in the scope of the bar function to be created. The value of max is 10. This process has been discussed in the scope chain section.

The key here is that the bar function is created when fn () is executed. Fn () has long been executed, but the fn () Execution context still exists in the stack, so max can be found at bar (15. If the fn () Context Environment is destroyed, max cannot be found.

Using closures will increase the content overhead. It's obvious now!

 

Step 5: After 20 rows are executed, the destruction process of the context environment will not be repeated here.

 

Closures are closely related to scopes and context environments. It is really "not easy to love you "!

In addition, there are a lot of applications of closures in jQuery, which are different examples here. Therefore, whether you want to understand a classic framework/class library, or develop a plug-in or class library by yourself, such as closures and prototypes, these basic theories must be known. Otherwise, you don't know why except for bugs, because these bugs may be completely out of your knowledge.

 

Now we have briefly introduced the closure. Let's summarize it in the next section.

---------------------------------------------------------------------------

This article has been updated to the directory "deep understanding of javascript prototype and closure series". For more information, see "deep understanding of javascript prototype and closure series".

In addition, you are welcome to follow my microblog.

You are also welcome to follow my other tutorials-don't worry, they are all free!

Microsoft petshop4.0 source code explanation video json2.js source code interpretation video

--------------------------------------------------------------------------


Javascript closure and prototype

Since your B is used as a parameter of object a, it must be used as an attribute that needs to be stored and used for multiple times. If only a few methods call B, just let B be the parameter of the method ~
<Script type = "text/javascript">
Function (){}

A. prototype. say = function (B ){
Alert (B );
}
Var x = new ();
X. say ("xx ");
</Script>

If it is your incoming B parameter, it will be used in many places. It seems quite cost-effective to add a type attribute ~~

Function a (B ){
This. type = B;
}

I want to learn more about the javascript operating mechanism, such as closures, prototype chains, and scopes. What books do I recommend?

The above two authoritative guides and advanced programming can be viewed.

I recommend the essence of the javascript language written by Zhou aimin

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.