Closures in js (detailed tutorial)

This article mainly introduces the learning experience of closures in js and the important points of code writing. Friends who are interested in this should learn together.

Closure

The Chinese meaning is to close a package. If we think of the scope of a function as a package, then this word vividly reflects its role. The normal execution flow of a function is that after the statements in the function are executed, the program will automatically destroy the scope of the function. However, when another function is declared in a function, and there is a variable referencing the parent function when the sub-function is executed, A closure will be formed, which is equivalent to closing the scope of the parent function and preventing the program from destroying it.

For example:

function a() {
  var name = "xuxu";
  function b() {
    console.log(name);
  }
  // 此处产生闭包 
  b();
} 
a();

A closure is generated when a function can remember and access the scope chain in which it is located. Of course, most closures are not so intuitive, because the sub- The function can be called outside the parent function, for example:

function a() {
  var name = "xuxu";
  function b() {
    console.log(name);
  }
  return b;
} 
var c=a();
// 此处产生闭包 此处的c函数其实就是a函数
c();

Through the above code, we can also see the benefit of a closure, that is, we can access it in the global scope (here is the width) When it comes to the value of the scope of the local scope (a function), this cannot be done according to the normal lexical scope, but when we use closures, it is possible. Then let’s look at some of the ones we usually write more:

function foo() {
  var a = 2;
  function baz() {
     // 2
    console.log( a ); 
  }
  bar( baz );
}
function bar(fn) {
// 大家快看呀，这就是闭包！
  fn(); 
}

or

var fn;
function foo() {
  var a = 2;
  function baz() {
    console.log( a );
  }
  // 将baz分配给全局变量
  fn = baz; 
}
function bar() {
   // 大家快看呀，这就是闭包！
  fn();
}
foo();
// 2
bar();

. The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use Puppeteer image recognition technology to implement Baidu index crawler

Realize magnifying glass through jquery technology

Implement automatic page update in webpack-dev-server

The above is the detailed content of Closures in js (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!