Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to understand JavaScript closures". In daily operation, I believe many people have doubts about how to understand JavaScript closures. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "how to understand JavaScript closures". Next, please follow the editor to study!

By definition, it is a scripting language and a relatively easy to learn scripting language. You can use js (short for JavaScript) code to some extent without much expertise.

1. An opportunity to learn JavaScript

Formal study of JavaScript is in the training class, yes, I came out of the training course, not a professional background, it can be said that it is very grassroots. When I was learning, the ES6 standard was not yet popular, the variable naming was still using the very traditional var, and the first piece of code I learned was the classic console.log ('Hellojagery worldview'), which of course was printed on the console.

Of course, the JavaScript content in the training institution is very simple, only the most basic variable definition and naming, function declaration, callback function, ajax and the most basic dom operation. Obviously, these contents are not enough for the job at all.

The 'further study' opportunity for js comes from my work. I learned about node for the first time at work. I also learned that even js can do backstage (I do JAVA training), and gradually came into contact with some ES6 standards. Of course, these are later words, at first I came into contact with the biggest obstacle is this thing.

2.' Disgusting closure

Ah, for me, with only a little bit of foundation, I can't understand the jsonp code encapsulated by our company. It looks like this.

Var jsonp = (function () {var JSONP; return function (url) {if (JSONP) {document.getElementsByTagName ("head") [0] .removeChild (JSONP);} JSONP = document.createElement ("script"); JSONP.type = "text/javascript"; JSONP.src = url; document.getElementsByTagName ("head") [0] .appendChild (JSONP) } ())

Of course, this method can no longer be used directly on browsers through the console. Browsers have prohibited this kind of code injection in order to prevent XSS attacks, but it can still be used on the server. Of course, these are not the point.

The point is, here.

If (JSONP) {/ / dosome}

If you, like me, don't know what a closure is or have little knowledge of it, then you should also have questions about it. The train of thought is something like this.

Line 2 defines JSONP but has no assignment, now the JSONP value is null, the third line returns a method, the fourth line detects whether the JSONP value is empty, and if it is not empty, you have done something, OK, you don't have to look at it later, this if is white-written, it can't get into it 100%!

You see, there is no assignment in front, and then directly judge, then it is clearly null. But when you actually use it, you will find that the first call to this place will not enter the branch, but as long as you call it the second time, it will enter the branch 100%.

/ / this is a version of the closure that can be output in the console. You can try var closedhull = (function () {let name = null; / /) directly assigned to null return function (msg) {if (name) {console.log ('name:', name) return name + = msg;} return name = msg. }} () closedhull ('I am the first sentence.') / / I am the first sentence. Closedhull ('I am the second sentence.') / / I am the first sentence. I am the second sentence.

After the above example runs, whether from console.log () or the return value, it is not difficult to see that it does enter the branch of if (name). This is the performance of the closure. Here is the definition of closure.

A closure is a function that can read internal variables of other functions.

3. What does a closure look like?

Well, having seen what a closure is, let's not say whether it can be used or not. At least, we have seen it. Closures have a remarkable feature, return function () {}.

No!

Its remarkable feature is the function in function!

Observe the following methods

/ * the first case * / function test1 () {/ / a should destroy let a = 1; return {add: function () {return + + a;} let a = test1 () A.add () / / 2a.add () / / 3 timer * second case * / (function () {/ / b) should destroy let b = 1, timer = setInterval (() = > {console.log (+ + b)}, 2000) setTimeout (() = > {clearInterval (timer)}) after the method is finished. 10000)}) () / 2 345 56 obj * third case * / function showMaker (obj) {/ / obj should destroy the return function () {console.log (JSON.stringify (obj))}} let shower = showMaker ({aVl1}) / / obviously you can still see him here shower () / / {"a": 1} / * fourth case * / let outObj = (function () {let c = 'hello', obj = {}; Object.defineProperty (obj,' out', {get () {return c;}, set (v) {c = v;}})) Return obj}) () outObj.out / / can read and set c value

These four are closures, and they all have the property of the method in the method.

4. Closure and method stack (if you are not interested in the principle, you can skip it)

The definition of closure, 1. You can access a variable outside its scope. two。 Extend the life cycle of a local variable by some means. 3. Let the survival time of a local variable exceed its time cycle execution time

Since the concept of event cycle is involved in 3, which will be discussed later, this paper mainly discusses the definition of the first two ways.

If you know what the method stack is, you can skip it.

Local scope: before ES6, it generally refers to the interior of a method (from the parameter list to the end of parentheses in the method body). After the addition of the let keyword in ES6, it is within the scope of a {} in the case of using let (obviously, you cannot use let in the implicit {}, the compiler will prohibit you from doing this behavior, because without {} there would be no block scope) To simplify the discussion here, let's not count the block-level scope of let as the category of closures (it should, but it doesn't make much sense, after all, you can declare it in the outer block. Oh, my God, the naming of JS is not so crowded that it needs to be done in one way to prevent pollution. )

Local variables: different from global variables, global variables are accidentally created and used at some point, which is very... Exasperated and helpless. A local variable is a variable declared in a local scope using the variable declaration keyword, which should be well understood.

Life cycle of a local variable: well, you declare a variable in a local scope by keyword (var const let, etc.) and then assign a value to it, and the local variable takes risks in this local scope, and it will be used, reassigned (except for the arrogant Miss const), called (if it is a method), and the essence of this local variable is a real value. The difference is that if it is an object (objects, arrays, methods are all objects), then it is essentially a pointer to an address. If it is a base type, then it is the real value. It survived because it had a place to live. Memory.

Local scope and memory: whenever there is a local scope, a method stack is applied, and the method stack is about this long.

| | data5 | | data4 | | data3 | | data2 | | _ _ data1_ |

Of course, it can cover a baby and look like this.

| | D2 | _ D1 _ | data3 | | data2 | | _ _ data1___ |

If the above is too abstract, then I can show it with an actual case.

Function stack1 () {var data1, data2, data3, data4, data5} function stack2 () {var data1, data2, data3; function stackInner () {var D1, D2;}}

If the method stack can feel intuitively, this is about what it looks like. Let's focus on analyzing the situation of stack2 and write some actual content into it.

Function stack2 () {var data1 = '1percent, data2 = {x:' 2'}, data3 = '3percent; function stackInner () {var D1 =' 4percent, D2 = {y:'5'};} stackInner ()} stack2 ()

Obviously, data1,data3,d1 holds the basic type (string), and data2,d2 holds the reference type (object), which is reflected in the diagram.

What the runtime method stack looks like

| |-> {y:'5'} | |-> {x:'2'} | | d2-| _ d1room4legs _ | data3='3' | data2-| _ _ data1='1'___ | |

The painting is a little abstract. That's it. Where is the specific object? When they are in a place called heap, it is not the focus of this time, but to look at these variables in the method stack first. after running, they destroy the local variables in the stack one by one according to the principle of first in and then out. At the same time, the two objects in the heap, because the references are destroyed, have no meaning to continue to exist, waiting to be garbage collected.

Next we are going to do two things:

D1 is no longer equal to 4, but references data1

Return stackInner instead of calling directly

So the closure is complete.

Function stack2 () {var data1 = {msg: 'hello'}, data2 = {x:' 2'}, data3 = '3march; function stackInner () {var D1 = data1, D2 = {y:' 5'};} return stackInner} var out = stack2 ()

There is an important point here. The assignment of D2 to data1 must be done in stackInner. Why? Because D2 is declared in the stackInner method, if you have D1 = data1 in stack2, then congratulations, you implicitly declared a global variable called D1, and in stackInner due to variable shielding, you can't see D2 on the global, and the planned closure fell through completely.

Variable masking: variable masking is triggered by variables with the same name in different scopes.

Look at the stack now.

What the runtime method stack looks like

| |-> {y:'5'} out |

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.