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);
}
}
}
如有疑问或不足之处,欢迎交流指正