js-闭包的应用

1、函数参数

这个比较常见，一般我们开发时调用后台接口，用的就是函数作为参数

// 作为参数
function callback() {
  console.log("hello");
}
//将函数作为参数传入
function getData(call) {
  console.log("开始");
  setTimeout(() => {
    call();
  }, 2000);
}
// 执行
getData(callback); //执行输出

2、循环赋值

这个场景可能用到的不是很多，有个类似的就是for循环进行数据请求

//每秒执行1次，输出都是6
for (var i = 1; i <= 5; i++) {
  setTimeout(() => {
    console.log(i);
  }, i * 1000);
}
// 6 6 6 6 6

这明显不是我们想要的效果，这个时候闭包就有用处了

//每秒执行1次，输出1-5
for (var i = 1; i <= 5; i++) {
  (function(j){
      setTimeout(()=>{
          console.log(j);
      },j*1000);
  })(i)
}
// 1 2 3 4 5

3、单例（缓存）

var singleton = (function() {
  var objClass = function () { }; 
  var instance = null;
  return function () {
    if (!instance) {
      instance = new objClass();
    }
    return instance;
  };
})()
const a = singleton();
const b = new singleton();
console.log(a===b)
// true

4、柯里化

var add = function () {
  var args = Array.prototype.slice.call(arguments);
  var inner = function () {
    if (arguments.length) {
      Array.prototype.push.apply(args, arguments);
      return inner;
    } else {
      return args.reduce((a, b) => {
        return a + b;
      });
    }
  };
  return inner;
};
console.log(add(1)(2)());
// 3

5、防抖、节流

• 防抖
  一般用于频繁操作，只对最后操作做处理，例如输入、点击等

function debounce(fn, delay) {
    var timer = null
    return function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay);
    }
}

• 节流
  一般用于一段时间内只执行一次操作，例如常见的滚动监听

function throttle(fn, delay) {
    var timer = null
    return function () {
        if (!timer) {
            timer = setTimeout(() => {
                fn.apply(this, arguments);
                timer = null
            }, delay);
        }
    }
}

如有疑问或不足之处，欢迎交流指正