Sharing useful information: Let you learn javascript closures in minutes_javascript skills

Closure is an important concept in JavaScript. For beginners, closure is a very abstract concept, especially the definition given by the ECMA specification. Without practical experience, it is difficult for you to understand it from the definition. . Therefore, this article will not describe the concept of closure in a long way, but will go directly to the practical information so that you can learn closure in minutes!

1. Closure--the first experience of love

When I come into contact with a new technology, the first thing I do is: look for its demo code. For coders, code can sometimes understand a thing better than natural language. In fact, closures are everywhere. For example, the main codes of jQuery and zepto are all included in a large closure. So below I will write the simplest and most primitive closure demo to help you generate closures in your brain. Screen:

function A(){
  function B(){
    console.log("Hello Closure!");
  }
  return B;
}
var c = A();
c();//Hello Closure!

This is the simplest closure in history. It cannot be simpler. No matter how simple it is, it is no longer a closure!

After having a preliminary understanding, let’s briefly analyze how it is different from ordinary functions, so that we can recognize “her” at a glance among the “huge crowd”.

The above code is translated into natural language as follows:

• (1) defines an ordinary function A
• (2) An ordinary function B is defined in A
• (3) Return B in A (to be precise, return a reference to B in A)
• (4) Execute A() and assign the return result of A to variable c
• (5)Execute c()

To summarize these 5 steps into a nonsense sentence:

The internal function B of function A is referenced by a variable c outside function A

Reprocess this nonsense and it becomes the definition of closure:

When an inner function is referenced by a variable outside its outer function, a closure is formed.

Don’t try to remember this definition. The purpose of telling you this definition is to let you understand that the above 5 steps are to elaborate on the definition of closure.

Therefore, when you perform the above 5 steps, you have already defined a closure!

This is closure.

2. The role of closure

Before understanding the role of closure, let’s first understand the GC mechanism in JavaScript: In JavaScript, if an object is no longer referenced, then the object will be recycled by GC, otherwise the object will always be stored in memory. middle.

In the above example, B is defined in A, so B depends on A, and the external variable c refers to B, so A is indirectly referenced by c. In other words, A will not be recycled by GC and will always be Save in memory. To prove our reasoning, the above example is slightly improved:

function A(){
  var count = 0;
  function B(){
    count ++;
    console.log(count);
  }
  return B;
}
var c = A();
c();// 1
c();// 2
c();// 3

count is a variable in A, and its value is changed in B. Every time function B is executed, the value of count will increase by 1 based on the original value. Therefore, the count in A is always kept in memory.

This is the role of closure. Sometimes we need to define such a variable in a module: we want this variable to be kept in memory but not "pollute" the global variable. In this case, we can use closure to define this module.

3. High-end writing

The above writing method is actually the simplest and most primitive writing method, but in actual applications, no one does it this way, especially in some large JS frameworks. The reason why I tell you this way of writing is because the fewer distractions, the easier it is to focus on one thing. Below I use commonly used writing methods to write a simple demo component:

(function(document){
  var viewport;
  var obj = {
    init:function(id){
      viewport = document.querySelector("#"+id);
    },
    addChild:function(child){
      viewport.appendChild(child);
    },
    removeChild:function(child){
      viewport.removeChild(child);
    }
  }
  window.jView = obj;
})(document);

The function of this component is to initialize a container, then add sub-containers to the container, or remove a container. The function is very simple, but another concept is involved here: executing the function immediately. Just understand it briefly. The main thing is to understand how this writing method implements the closure function.

The above code structure can be divided into two parts: (function(){})() The red part is an expression, and this expression itself is an anonymous function, so adding () after this expression means Execute this anonymous function.

So the execution process of this code can be decomposed as follows:

var f = function(document){
  var viewport;
  var obj = {
    init:function(id){
      viewport = document.querySelector("#"+id);
    },
    addChild:function(child){
      viewport.appendChild(child);
    },
    removeChild:function(child){
      viewport.removeChild(child);
    }
  }
  window.jView = obj;
};
f(document);

在這段程式碼似乎看到了閉包的影子，但 f 中沒有任何回傳值，似乎不具備閉包的條件，注意這句程式碼：

window.jView = obj;
obj 是在f 中定義的一個對象，這個對象定義了一系列方法， 執行window.jView = obj 就是在window 全域對象定義了一個變數jView，並將這個變數指向obj 對象，即全域變數jView 引用了obj . 而obj 物件中的函數又引用了f 中的變數viewport ,因此f 中的viewport 不會被GC回收，會一直保存到記憶體中，所以這種寫法滿足閉包的條件。

4、簡單的總結語

這是對閉包最簡單的理解，當然閉包還有其更深層的理解，這就涉及的多了，你需要了解JS的執行環境(execution context)、活動對象(call object)以及作用域(scope)和作用域鏈(scope chain)的運作機制。但作為一個初學者，暫時不必了解這些，有了簡單的理解之後，一定要在實際項目中用起來，等你用的多了，對於閉包，你自然會有更深層次的理解！

以上就是本文的全部內容，希望對大家的學習有所幫助。