Frequently asked questions about closures

  Definition :

        Closure :  function A Nested function B, function B Using functions A The variable of

scene :

1. Function as return value
2. Function as parameter
3. Nested function
4. Callback for event handling ( Asynchronous execution )

//    The use of closures 
//     1、 Function as return value 
function mail() {
  let content = ' Letter ';
  return function () {
    console.log(content);
  };
}
const envelop = mail();
envelop();
// 2、 Function as parameter 
let count = 0;
function envelop(fn) {
  count = 1;
  fn();
}
function mail() {
  console.log(count);
}
envelop(mail);

// 3、 Nested function 
let count = 0;
function outerFn() {
  function innerFn() {
    count++;
    console.log(count);
  }
  return innerFn;
}
outerFn()();
// 4、 Event handling callback ( Asynchronous execution )
let lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
  (function (i) {
    lis[i].addEventListener('click', function () {
      console.log(i);
    });
  })(i);
}

Common interview questions

1. Perform nesting now
2. When the immediate execution function encounters a block level scope
3. Split execution
4. Implement private variables

//    Perform nesting now 
(function immediateA(a) {
  return (function immediateB(b) {
    console.log(a);
  })(1);
})(0);

//    When the immediate execution function encounters a block level scope ;
let count = 0;
(function immediate() {
  if (count === 0) {
    let count = 1;
    console.log(count);
  }
  console.log(count);
})();

//    Split execution ;
function createIncrement() {
  let count = 0;
  function increment() {
    count++;
  }
  let message = `count is ${count}`;
  // console.log('======') // Only once 
  function log() {
    console.log(message);
  }
  return [increment, log];
}
const [increment, log] = createIncrement();
increment();
increment();
increment();
log();

//    Implement private variables ;
function createStack() {
  const items = [];
  return {
    push(item) {
      items.push(item);
      // console.log(items);
    },
  };
}
const res = createStack();
res.push(1);