closure

Ruan Yifeng – Learn closures

What are closures in QUESTION of the Day JS?

1. What are closures?

A closure is a function that can read variables inside other functions. In plain English, a closure is a function that can read variables declared in the parent function’s scope in the child function’s scope, so that variables inside the parent function can be accessed outside the function.

Its structure is shown below:

    function f1() {

      // Note that variables must be declared with the var keyword
      // If you do not add the var keyword declaration, you are declaring a global variable!
      var local = I'm a variable of the parent function.;

      // Returns an anonymous function
      // -> this function serves as a bridge between function and external function to access the internal local variable local
      // Form a closure

      return function () {
        // Reference a local variable of the parent function
        console.log(local); }}// Call the function f1 outside the function -> name the returned anonymous function showLocal
    var showLocal = f1();

    // Call showLocal to access the local variables of the parent function
    showLocal();// I am a variable of the parent function
Copy the code

2. What closures do

  • 1. Closures are usually used to indirectly access variables, in other words, to hide variables. When you need to define a variable and do not want the variable to be directly accessed, you can declare it through closures.

  • Closures can also be used to keep variables in memory at all times. Let’s experiment with the following code

    function f1() {
      // local variable count
      var count = 333;

      // declare the countHandler global function to handle count
      // Call outside a function -> call outside a function to access a function inside a variable
      // Is essentially a closure
      window.countHandler = function () {
        count++;
      }

      return function () {
        console.log(count); }}// Call the function f1 outside the function -> name the returned anonymous function f2
    var f2 = f1();/ / 333

    // Call f2 to access the internal variable count
    f2();

    // Process the inside of the function
    countHandler();

    // Access the variables inside the function again to observe the change in count
    f2();/ / 334
Copy the code

3. Side effects of closures

  • 1. Because closures make variables in functions stored in memory, which consumes a lot of memory, misuse of closures may cause performance problems on pages. In IE, memory leaks can occur (variables cannot be accessed and garbage collection cannot be triggered to clean up, resulting in a waste of memory). The solution is to delete all local variables that are not in use before exiting the function.
  • 2. Closures change the values of variables inside the parent function outside the parent function. So if you treat a parent function as an object, a closure as a public method, and an internal variable as a private property of the parent function, then you can’t change the value of the internal variable of the parent function at will.