The basic concept

Okay, so the concept.

Execute the function IIFE immediately

IIFE Immediately-Invoked Function Expressions

  • Declare an anonymous function

  • Call this anonymous function immediately

  • Destroy the function (because the statement is over, there are no references left)

    (function () {
  alert()
})()
Copy the code

Closures are often used in combination with closures to play a big role

Application 1 – Create a temporary independent scope

Imagine a function like creating an accumulator that requires a temporary variable to hold the accumulation state. Putting it in a global scope is obviously not very elegant. The easiest way to do this is to create an IIFE, create a variable, return a function, and then do the summing in the function.

var n= 0
setInterval(() => console.log(++n), 1000)
Copy the code
setInterval((function() {
  var n = 0
  return function() {
    console.log(++n)
  }
})(), 1000)
Copy the code

Application two – Resolve variable name conflicts

Using the rule of parameters-first global variables, you can restrict scoped variable names within the small environment inside a function.

For example, jquery will use the global function name, but other libraries may also use it, but other libraries may also use this function name, which will cause a function name conflict.

Given that we have a lot of code calling jquery with the $function name, it is unlikely that we will be able to rewrite the entire code. In fact, the use of real-time functions can be a good solution to this problem.

< script SRC = "https://lib.baomitu.com/jquery/3.6.0/jquery.min.js" > < / script > < script > / / assume other libraries take $const $() = = > console.log("Not jQuery"); $(document).ready(function () {console.log("Hello jQuery"); }); })(jQuery); $() </script>Copy the code

Application three – Use concise variable names

The third function is similar to the with function

Var data {ABC: {efg: 0}} (function() {console.log(v)})(data.abc.efg)Copy the code

Apply a four-loop trap

As one of the eight Javascript interview traps, let’s look at how the loop trap is solved.

const ary = [];
  for (var i = 0; i < 5; i++) {
    ary.push(function () {
      return console.log(i);
    });
  }
  ary[0]();
  ary[1]();
Copy the code

The reason is that a closure is formed by creating a function that references an external variable. All newly created functions refer to the same variable. And when the function is called, the variables are called

Add instant functions to the loop

Because the argument of the instant function is the argument replication relationship, it is equivalent to the field snapshot of replication

const ary = []; for (var i = 0; i < 5; I++) {(function(n) {· ary.push(function () {return console.log(n); }); })(i) } ary[0](); ary[1]();Copy the code

Application five – class library wrapper

Stay tuned for a separate lecture

Application six – Webpack package modules

Stay tuned for a separate lecture

The interview guide

  • There is no

review

  • Closures are everywhere, but naming classic applications is a challenge. Saying Helloworld is no different from reciting.

\