Closure: a recursive function that can access a variable in the scope of another function: it calls the function inside the function body. Use recursive functions with caution, improper handling can lead to an endless loop. Recursive functions are used only in certain situations

closure

Implement closures using function self-calls

var add = (function () {
  var counter = 0;
  return function () { return counter += 1; }
})();

add()
add();
add();
console.log(add());
Copy the code

** enhancement: ** closures are a mechanism for protecting private variables from external interference by forming a private scope during function execution. This intuitively creates an undestructible stack environment, where closures are used to pass values and function calls

Close your buns praise

<! DOCTYPEhtml>
<html>

  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/Call.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <style type="text/css">
    #box ul {
      width: 450px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      list-style: none;
    }

    #box ul li {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 180px;
      justify-content: space-between;
    }

    img {
      width: 200px;
    }
  </style>

  <body id="box">
      <ul>
        <li><img src="img/ly.jpg" /><input type="button" id="btn1" value="Praise (1)" /></li>
        <li><img src="img/lyml.jpg" /><input type="button" id="btn2" value="Praise (1)" /></li>
      </ul>
  </body>
    <script type="text/javascript">
      function support() {
        var value = 1;
        return function () {
          this.value = "Praise (" + (++value) + ")"; }}var btnObj = document.getElementsByTagName("input")
      for (var i = 0; i < btnObj.length; i++) {
        btnObj[i].onclick = support();
      }
    </script>
</html>
Copy the code

recursive

arguments.callee()

Arguments.callee () can call its own function

function geteverySum(x) {
  if (x < 10) {
    return x
  }
  return x % 10 + parseInt(arguments.callee(x / 10))}console.log(geteverySum(512)) / / 8

Copy the code

⚠️** Note: ** function calls itself, this is recursion, recursion must have an end condition

Fibonacci numbers

function getFbnq(x) {
  if (x < 3) return 1
  return getFbnq(x - 1) + getFbnq(x - 2)}console.log(getFbnq(12)) / / 144
Copy the code

Calculate the sum of the terms of the numbers

function geteverySum(x) {
  if (x < 10) { return x; }
  return x % 10 + parseInt(geteverySum(x / 10));
}
console.log(geteverySum(512));  / / 8
Copy the code

Traverse the DOM tree

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial-scale =1.0"> <title> </head> <body> <h1></ body> </ HTML >< script> function forDOM(root, fn) { var children = root.children for (var i = 0; i < children.length; I ++) {var child = children[I] // each child fn(child) // call the name of each child child.children && forDOM(child, }} var root = document.documentElement // call the HTML root forDOM(root, Function (node) {console.log(" node name :" + node.nodename)}) </script>Copy the code

Recursive deep copy

var obj1 = {
  age: 10.car: ["Mercedes"."BMW"."Tesla"."Rolling"].dog: { name: "Rhubarb".age: 5.color: "Black and white"}}var obj2 = {}
function extend(a, b) {
  for (var key in a) {
    var item = a[key]

    if (item instanceof Array) {
      b[key] = []
      extend(item, b[key])
    }

    else if (item instanceof Object) {
      b[key] = {}
      extend(item, b[key])
    }

    else {
      b[key] = item
    }
  }
}

extend(obj1, obj2)
console.dir(obj1)
console.dir(obj2)
Copy the code

Deep copy Even if the data of the copied object (the data stored in the heap) changes, it does not affect the copied content

Shallow copy A shallow copy is a direct copy, in which the address of one object is given to another object, they point to the same object, and the two objects have the same properties or methods

var obj1 = {
  age: 10.car: ["Mercedes"."BMW"."Tesla"."Rolling"]}var obj2 = {}

function extend(a, b) {
  for (var key in a) {
    b[key] = a[key]
  }
}

extend(obj1, obj2)
obj2.car[0] = "Porsche"

console.dir(obj2)
console.dir(obj1)
/ * {age: 10, car: [' porsche ', 'BMW', 'tesla', 'rolling']} {the age of 10, the car: [' porsche ', 'BMW', 'tesla', 'rolling']} * /
Copy the code