闭包的常见问题

 定义:

       闭包:  函数A嵌套函数B,函数B使用函数A的变量

场景:

1. 函数作为返回值
2. 函数作为参数
3. 函数嵌套
4. 事件处理的回调(异步执行)

//   闭包的使用场景
//     1、函数作为返回值
function mail() {
  let content = '信';
  return function () {
    console.log(content);
  };
}
const envelop = mail();
envelop();
// 2、函数作为参数
let count = 0;
function envelop(fn) {
  count = 1;
  fn();
}
function mail() {
  console.log(count);
}
envelop(mail);

// 3、函数嵌套
let count = 0;
function outerFn() {
  function innerFn() {
    count++;
    console.log(count);
  }
  return innerFn;
}
outerFn()();
// 4、事件处理回调(异步执行)
let lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
  (function (i) {
    lis[i].addEventListener('click', function () {
      console.log(i);
    });
  })(i);
}

常见面试的追问

1. 立即执行嵌套
2. 当立即执行函数遇到块级作用域
3. 拆分执行
4. 实现私有变量

//   立即执行嵌套
(function immediateA(a) {
  return (function immediateB(b) {
    console.log(a);
  })(1);
})(0);

//   当立即执行函数遇到块级作用域;
let count = 0;
(function immediate() {
  if (count === 0) {
    let count = 1;
    console.log(count);
  }
  console.log(count);
})();

//   拆分执行;
function createIncrement() {
  let count = 0;
  function increment() {
    count++;
  }
  let message = `count is ${count}`;
  // console.log('======') //只执行一次
  function log() {
    console.log(message);
  }
  return [increment, log];
}
const [increment, log] = createIncrement();
increment();
increment();
increment();
log();

//   实现私有变量;
function createStack() {
  const items = [];
  return {
    push(item) {
      items.push(item);
      // console.log(items);
    },
  };
}
const res = createStack();
res.push(1);