JavaScript: 0 Basic easy to learn closures (1)

• What is a closure?

Beginners of JavaScript will come into contact with a thing called a closure, which sounds like a big one. There are various kinds of explanations on the Internet, in fact, I personally feel that there is no need to use too theoretical concept to look at closures.

In fact, you're using closures every day, but you don't know.

Like what:

var cheese = ' cheese '; var function () {    alert (cheese);}

OK, you have written a closure.

• A function is also a data type

A variable cheese is a variable in the global scope, and when you create a test function, test and cheese share a global scope.

One thing you should be aware of is that in JS, functions and variables are essentially a thing. A function is also a data type.

This can also be seen from the definition above. If you don't believe me, let's have a look.

alert(cheese);alert(test);

Let's take a look at the different types of test and cheese:

test);

alert(typeof cheese);

See, it's just a different type, they're all data types.

The only difference is that test of the function type can have its own internal logic, and the string type of cheese can only hold one literal, which is the difference, that's all.

At a glance, the only difference is that the normal variable is the same as the literal value, and the function needs a parenthesis to execute it.

You see, I'm now going to hit a parenthesis:

test();

The logic inside the function is executed in parentheses.

• Scope

Let's go back to the closure and now make a small change to the previous code:

var cheese = ' cheese '; var function () {    alert (cheese);} function test2 () {    varnull;    Test ();} Test2 ();

So, do you think the alert is now out of null or cheese?

Think about ...

Yes, it's the cheese.

As I've said before, the function test and the variable cheese are in the same scope under a blue sky.

The function test and the variable cheese share a scope called the global scope, just like Earth, all of us enjoy this earth, where we can breathe, eat and play.

For test, the scope he can access is only its own closures and global scope:

Paste_image.png

In other words, under normal circumstances, he does not access the contents of other closures, the variables defined in the Test2 and it does not have a half-dime relationship, so the cheese is still the global scope of the cheese.

A function can create its own scope.

We have just defined a test function, and {} The part that wraps up creates a new scope, the so-called closure.

In fact, after you have a deep understanding of the scope of the principle, the closure is also understood.

Just as the earth is a global scope, your own house is a function, your house is a private space, is a local scope, that is, you built a closure!

You can see the outside scenery through the window, such as a banana tree in the yard, so you see through the glasses the color of the banana tree, height, the thickness of the branches and so on.

This banana tree is equivalent to a global variable, and you can access its data within your own closure.

So, in this case, Test is a house in which you can access the cheese in the global scope-the variable cheese-in the window.

In other words, when the cheese is accessed by test, it enters its closure.

Do you think it's a good idea to explain this?

Now can you understand the beginning I said that the closure of this thing in fact we use every day meaning?

We give the first note of the closure:

1. Closures are the existence of a private scope when a function is created, and the ability to access all parent scopes.

Back to just the example:

var cheese = ' cheese '; var function () {    alert (cheese);} function test2 () {    varnull;    Test ();}

In this example, test and test2 each enjoy a scope, right? And they can't access each other. For example, a variable I have defined in test, test2 cannot be accessed directly.

var function () {    var i = ten;} function test2 () {    alert (i);} Test2 ();

Like this, once the Test2 function is executed, the compilation does not pass because the variable i is not found in the test2 closure. It will first in its own closure to find I, can not find the words to go to the parent scope, the parent is the global scope, unfortunately, or not. This is the so-called scope chain, which will be looked up first level. If you find the topmost layer, or you cannot find it, you will get an error.

Another point to note here is that if a variable in a global scope (or parent scope) is modified in a closure, any closures that reference that variable are implicated.

This is really a place to be aware of.

As an example,

var cheese = ' cheese '; var function () {    = ' cheese has been eaten! '}function  test2 () {    alert (cheese);} Test (); Test2 ();

The result is:

Paste_image.png

It's funny, isn't it?

When we define a function, a closure is generated, and if there are several internal functions inside the function, the closure is nested in the closed packet.

Like this:

 function   House () { var  footBall = ' Soccer ' ;  /*   living room   */ function   Livingroom () { var  table = ' table ' ;         var  sofa = ' sofa ' ;    alert (FootBall);  /*   bedroom  */ function   BedRoom () { var  bed = ' big bed ' ; } livingroom ();} House (); 

The function house is a closure, which defines two functions, namely the livingroom living room, and the bedroom bedroom, each of which forms its own closure. For them, the parent scope is house.

If we want to play football in the living room, when the livingroom function executes, it will first look for the football in its own closure, and if not, go to house. Go up one layer at a level until you find it. Of course, this example may not be appropriate. But at least it shows the relationship between scopes and closures.

Again, closures are a private scope that exists when a function is created, and can access all of the parent scopes. So, theoretically, any function is a closure!

Swift a little bunny.
Links: Https://www.jianshu.com/p/6f5833e261ac
Source: Pinterest
The copyright of the book is owned by the author, and any form of reprint should be contacted by the author for authorization and attribution.

(GO) JavaScript: 0 Basic easy to learn closures (1)