JavaScript Advanced Tutorial: JavaScript closures

Source: Internet
Author: User
Tags closure functions variables return variable variable scope

Article Introduction: understanding JavaScript Closures is the way to advanced JS programmers, understanding their interpretation and operational mechanisms to write more secure and elegant code.

Closures (closure) are a difficult and unique feature of the JavaScript language, and many advanced applications rely on closure implementations.

Scope of a variable

To understand closures, you must first understand JavaScript's special variable scope.

The scope of a variable is nothing more than two kinds: global and local variables.

The special point of the JavaScript language is that the global variable can be read directly from within the function.


JS Code

var n=999;

Function F1 () {
alert (n);
}

F1 (); 999

On the other hand, local variables within a function cannot naturally be read outside the function.

JS Code

Function F1 () {
var n=999;
}

alert (n); Error

Here's a place to be aware that when declaring variables inside a function, you must use the var command. If not, you actually declare a global variable!

JS Code

Function F1 () {
n=999;
}

F1 ();

alert (n); 999

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

How to read local variables from the outside?

For a variety of reasons, we sometimes need to get local variables within a function. However, as mentioned earlier, this is not possible under normal circumstances and can only be achieved by workaround.

That is, in the interior of the function, define a function.

JS Code

Function F1 () {

n=999;

function F2 () {
alert (n); 999
}

}

In the above code, the function F2 is included within the function F1, when all local variables within F1 are visible to F2. But the reverse is not, F2 internal variables, the F1 is not visible. This is the "chained scope" structure (chain scope) peculiar to the JavaScript language.

The child object looks up the variables of all the parent objects at a level. Therefore, all the variables of the parent object are visible to the child, and the opposite is not true.

Since F2 can read local variables in F1, we can not read the internal variables of F2 as long as the return value of the F1!


JS Code

Function F1 () {

n=999;

function F2 () {
alert (n);
}

return F2;

}

var result=f1 ();

Result (); 999

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

Third, the concept of closure

The F2 function in the previous section of the code is the closure.

The definition of "closure" (closure) in various professional literature is very abstract and difficult to read. My understanding is that closures are functions that can read internal variables of other functions.

Because in a JavaScript language, only a child function within a function can read a local variable, the closure can be simply understood as "a function defined within a function."

So, in essence, closures are a bridge that connects functions inside and outside functions.

[1] [2] [3] Next page



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.