前端面试题之闭包

127 阅读2分钟

前端面试题之闭包

1. 什么是闭包

根据我自己的了解可以用一句话来概况:内层函数使用外层函数定义的变量来达到不用使用全局变量又可以完成自己的目标的情况 常见的代码如下:

function fa(){
  let n =  1
  return function fb(){
    n++;
    console.log(n);
  }
  return fb
}
let fn =  fa()

这里可以总结出:

    1. 闭包应该是由一个嵌套函数组成的,因为包括内存函数与外层函数
    1. 内层函数使用了外层函数定义的变量
    1. 返回值是一个函数,这个函数是内层函数
    1. 使用外层函数,使得值可以被使用

2.常见的闭包使用情况有什么

  • 1.常用的回调函数
- <body>
    <a href="#" id="a1">20</a>
    <a href="#" id="a2">40</a>
</body>
<script>
    function changeSize(size) {
        return function () {
            document.body.style.fontSize = size + 'px';
        }
    }
    var size20 = changeSize(20);
    var size40 = changeSize(40);

    document.getElementById('a1').onclick = size20;
    document.getElementById('a2').onclick = size40;
</script>
  • 2.节流和防抖
<body>
    <!-- 函数防抖是指在函数被高频触发时当停止触发后延时n秒再执行函数,
            (即每次触发都清理延时函数再次开始计时),一般用于resize scroll,mousemove -->
    <!-- 函数节流 原理 函数被高频出发时延时n秒后才会再次执行,防抖主要是用户触发一次时间后,延迟一段时间触发,
             而节流会规定的事件内触发一次事件 -->
</body>
<script>
    // 	函数节流:是确保函数特定的时间内至多执行一次。
    //  函数防抖:是函数在特定的时间内不被再调用后执行。
    //防抖
    var debounce = function (func, delay) {
        var timer = null
        return function () {
            var that = this;
            var args = arguments;
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(function () {
                func.apply(that, args);
            }, delay)
        }
    }
    ipt.addEventListener('keyup', debounce(function (e) {
        console.log(e.target.value);
    }, 500))
</script>

ps: 上述言论如有错误之处,请多多指教