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

The purpose of this article is to share with you the principle analysis of Javascript closure usage scenarios. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

I. closure

In Javascript, only the subfunctions inside the function can read the local variables, and the closure is the function that can read the internal variables of other functions.

For example, the following code:

Function f1 () {var n = 999; function f2 () {console.log (n);} return f2;} var result = F1 (); result (); / / 999

The function f2 is included in function F1, and all the local variables inside F1 are visible to f2. But not the other way around. The local variables inside f2 are invisible to F1.

This is the "chained scope" structure (chain scope) peculiar to the Javascript language, where child objects look up all the variables of the parent object level by level. Therefore, all variables of the parent object are visible to the child object, and vice versa.

Since f2 can read local variables in F1, as long as f2 is used as the return value, its internal variables can be read outside F1.

2. 1.setTimeout for use of closures

The first function passed by native setTimeout cannot take arguments, and you can pass parameters through closures.

Function f1 (a) {function f2 () {console.log (a);} return f2;} var fun = F1 (1); setTimeout (fun,1000); / / print out 12 in a second. Callback

Define the behavior and associate it with a user event (click or key). The code is usually bound to the event as a callback (the function called when the event is triggered).

For example, the following code:

Test 12 20 30 function changeSize (size) {return function () {document.body.style.fontSize = size + 'px';};} var size12 = changeSize (12); var size14 = changeSize (20); var size16 = changeSize (30); document.getElementById (' size-12'). Onclick = size12 Document.getElementById ('size-20'). Onclick = size14; document.getElementById (' size-30'). Onclick = size16

When you click on a number, the font changes to the corresponding size.

3. Function anti-shaking

The callback is performed n seconds after the event is triggered, and if it is triggered again within that n seconds, the time is re-timed.

The key to the implementation is the setTimeOut function, which can be achieved with the help of closures because one more variable is needed to save the timing and to maintain global purity.

The following code is shown:

/ * * fn [function] requires an anti-shake function * delay [number] milliseconds, and the anti-shake period value * / function debounce (fn,delay) {let timer = null / / enters the branch statement with the help of the closure return function () {if (timer) {clearTimeout (timer) / /, indicating that the same event is being triggered again in a timing process. So to cancel the current timing, restart the timing timer = setTimeOut (fn,delay)} else {timer = setTimeOut (fn,delay) / / enter the branch indicating that you are not currently timing, then start a timing}} 4. Encapsulate private variables

As in the following code: create a counter with js

Method 1:

Function F1 () {var sum = 0; var obj = {inc:function () {sum++; return sum;}}; return obj;} let result = F1 (); console.log (result.inc ()); / / 1console.log (result.inc ()); / / 2console.log (result.inc ()); / / 3

In the returned object, a closure is implemented that carries the local variable x, and the variable x is simply inaccessible from external code.

Method 2:

Function f1 () {var sum = 0; function f2 () {sum++; return f2;} f2.valueOf = function () {return sum;}; f2.toString = function () {return sum+'';}; return f2;} / execute function F1, which returns the function f2console.log (+ F1 ()) / / 0console.log (+ F1 ()) / / 1console.log (+ F1 ()) / / 2

All js data types have two methods, valueOf and toString, except null

The valueOf () method returns the original value of the specified object.

The toString () method returns a string representation of the object.

In numeric operation, valueOf is called first, and in string operation, toString is called first.

Sum+''is a string type of data

Thank you for reading! This is the end of this article on the analysis of the principle of the use of Javascript closures. I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.