What is the meaning of closure in JavaScript and how to use it

This article will share knowledge about closures in JavaScript. It has certain reference value. I hope it will be useful to everyone. Help

A closure is a combination of a function and the lexical environment in which the function is declared. When an internal function is saved to the outside, a closure will be generated and the closure will cause the original scope chain to be lost. Release, causing memory leaks, but at the same time closures are also very useful because they can associate certain data with operations on that data.

Example:

function demo() {
  var name = '张三'; // name 是demo()创建的局部变量
  function demo1() { //demo1()是demo()中的内部函数（闭包）
    console.log(name); // 使用父函数中声明的变量  
    }
  demo1();  
    }demo();

Running results

Create a local variable named name and a local variable named demo1 in the function demo() () internal function. The demo1() function can only be used within the demo() function body. demo1 has no local variables of its own. But since the internal function can access the variables of the external function, demo1() can access the variable name name declared in the parent function demo(). But if a variable with the same name name is defined in demo1, the name defined in its own function will be used. This example shows that a nested function can access variables declared in its outer scope.

What will happen if the above code is changed to this?

function demo() {
  var name = '张三';
  function demo1() {
    console.log(name);
  }
  return demo1;
  }
  var newDemo = demo();
  newDemo();

Running results

It can be seen from the running results that the results of the two pieces of code are the same. The internal function demo1() is returned by the external function before execution to form a closure. In this case, newDemo() is a reference to the function demo1 created when running the demo, so the variable name name can still be passed to console.log(name) when newDemo() is called.

Example

function num(x) {
  return function(y) {
    return x + y;
  };}
  var num1= num(2);
  var num2 = num(3);
  console.log(num1(2));// 4
  console.log(num2(2));// 5

Running result

Define a function num(x) for receiving A parameter x and returns a new function. This new function also receives a parameter y and returns the sum of x and y; at the same time, two new values ​​num1 and num2 are defined, both of which are closures and the passed values ​​are 2 and 3 respectively.

Summary: The above is the content shared in this article, I hope it will be helpful to everyone.

The above is the detailed content of What is the meaning of closure in JavaScript and how to use it. For more information, please follow other related articles on the PHP Chinese website!