current position:Home>Understanding closures in JS | August update challenge

Understanding closures in JS | August update challenge

2021-08-27 06:11:01 The front end is beautiful

This is my participation 8 The fourth of the yuegengwen challenge 5 God , Check out the activity details :8 Yuegengwen challenge

Introduction

Many beginners will find the concept of closure very troublesome and complex , Others even say that closures can cause memory leaks , It makes people curious and afraid of closures , In fact, closures are not mysterious or difficult at all , It can even be said in js All functions in are closures , Closures are approachable .

I've seen some vivid metaphors about closures

1. Closures are for the poor .
2. Closures are spies , Into the enemy's internal camp , Bring us information .
3. Closure is Alice in Wonderland , Have been to a distance that ministers have never been to , After returning , Tell the minister that they will never Seen fairyland .
4. Closures are the rich second generation , Inherited the assets of his parents , Term profligacy , But even a child who jumps out of a crack in a stone , There is also air to breathe freely , Enjoy the sunshine freely , And air and sunshine are the most important things , From this point of view , All people are closures .
5. In nature, water flows from high to low , But intelligent and naughty human beings hope that water can flow from low to high one day , Finally one day people invented the water pump , So that people can use water more freely , More arbitrary . The pump here is a closure .

What is a closure ?

1. Closures by reference to variables , So as to prevent the mechanism of garbage collection .
2. If a function references a free variable of an external scope, it constitutes a closure .
Personal understanding , A closure is a small knapsack of a function , There are variables with outer scope in the backpack , The key is how to understand this closed word , It's really like php and java Private variables of classes in , The variable can only be read or changed through the closure that references the variable , The method here that references the closure of the variable can be multiple , Corresponding to php or java Multiple methods in a class , Each closure represents a method in a class , So some people call closures the object of the poor .

function foo(){
    let test =1;
    const bar1=function(){
        test ++;
        console.log(test);
    }

    const bar2 = function(){
        test = test+100;
        console.log(test);
    }

    return [bar1, bar2];
}

let arr = foo();

arr[0]()//2
arr[1]()//102
arr[0]()//103
arr[1]()//203
 Copy code 

Lexical scope and dynamic scope

Closure is the inevitable result of lexical scope , Understand the lexical scope , I basically understand closures , There are two scopes , One is lexical scope , The other is dynamic scope . Lexical scope is defined when writing code or definitions , The dynamic scope is determined at run time . The lexical scope focuses on where the function is declared , The dynamic scope focuses on where the function is called .
stay js In this language , Only lexical scope , There is no dynamic scope . Languages that use dynamic scopes are perl、lisp etc. .

var name = ' Xiao Ming ';

function foo() {
  console.log(name); //  Will you output Xiao Ming or Xiao Hong ?
}

function bar() {
  var name = ' Xiaohong ';
  foo();
}

bar();
 Copy code 

Print out Xiao Ming , explain foo When a function is called, the variable name The scope of the definition is used , Instead of the scope in which it was called , This is the lexical scope .

Why many people find closures difficult to understand ?

Personally, I think there are two main reasons :
1. Some books and articles explain closures too obscure .
2. although js In a language, there is only lexical scope but no dynamic scope , however js Medium this、eval、with The behavior of is much like dynamic scope , In especial this, Point to the object that called him , It has nothing to do with the object in which it is defined , The frequency of use is still very high , It's easy for beginners to get confused , This makes it more difficult to understand closures .

Use of closures

1. Encapsulate private variables

var person = function(){    
    // Variable scope is within function , External inaccessible  
    var name = "default";       
       
    return {    
       getName : function(){    
           return name;    
       },    
       setName : function(newName){    
           name = newName;    
       }    
    }    
}();    
     
print(person.name);// Direct access , The result is undefined 
print(person.getName());    //default
person.setName("abruzzi");    
print(person.getName());    //abruzzi
 Copy code 

2. Mimic block level scope

    var arr = ["a", "b", "c", "d", "e"];
    for (var i = 0; i < arr.length; i++) {
        (function(j) {
            var item = arr[j];
            setTimeout(function() {
                console.log(item);
            }, 1000 * (i + 1));
        })(i);
    }
 Copy code 

Of course , because setTimeout It's an asynchronous task , If you don't add closures , All that's printed out is e, Closure coercion is used here to make the function remember i Variable , Of course. ES6 Introduction let After keyword , use let It's easier .
3. Store variables Another feature of closures is that they can hold variables of external functions , Internal functions retain references to the active variables of external functions , So the variable will not be released . For example, the implementation of anti shake depends on closures

function debounce(fn, wait) {
  var timeout  // Define a global variable in the way of closure , It is the core of realizing the anti shake function 
  return function () {
    var context = this,
    args = arguments
    clearTimeout(timeout)
    
    timeout = setTimeout(function () {
      fn.apply(context, args)
    }, wait)
  }
}
window.addEventListener('scroll', debounce(scrollHandler, 500))
 Copy code 

The core of the implementation of this anti shake function is to put the variable timeout Store it , If you don't use closures , Every time scroll Event triggered , Will be reinitialized timeout Variable , It is impossible to achieve the effect of anti shake .

Misunderstanding of closures , Whether closures really cause memory leaks ?

Closures do not cause memory leaks , Just because IE9 The previous version is right JScript Objects and COM Objects use different garbage collection methods , As a result, the memory cannot be recycled , This is a IE The problem of , Closures have nothing to do with memory leaks . More details can be found in Can closures cause memory leaks ?

summary

Closure is the inevitable result of lexical scope , A function that references an external free variable is a closure , Closures are not mysterious at all, not to mention terrible .

Reference article

Lexical scope VS dynamic scope
What is a closure ? What is the purpose of closures ?
Can closures cause memory leaks ?

copyright notice
author[The front end is beautiful],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827061057349I.html

Random recommended