狠狠吊打面试官的闭包趣味题

说在前面:学习肯定不是为了吊打谁,笔者想表达的是知识越扎实,人就越自信。很多同学在面试之前或者在面试过程中总有怯场的情绪,不能把自己最自信,最有实力的一面表现出来。可以和笔者一样试着保持一种想要"吊打面试官"的情绪去学习与准备,在面试中也能保持这种情绪从容的应对问题,避免紧张情绪导致的失误而悔恨。

闭包是前端开发者绕不过去的坎,笔者在学习过程中也踩了很多坑,希望这篇文章能帮助一些同学解惑。如果你是大佬,看到了这篇文章,可以翻下去看看趣味题哦。

觉得有所收获,请为我点赞!

定义

红宝书中是这样定义的:闭包指的是那些引用了另一个函数作用域中变量的函数,通常是在嵌套函数中实现的。

可以拆解一下这句话:

  • 闭包是函数
  • 引用了另一个函数作用域中变量的函数

在面试中通常就有这种死抠字眼的题目,让你判断一个函数是否为闭包。当然啦,这种就是最简单的闭包题目,给你送分的呀。

可以看一下下面的几段代码判断一下是否为闭包:

javascript 复制代码
// code1
function fn() {
    return function() {
        console.log("前端")
    }
}

// code2
function fn(a) {
    return function(b) {
        console.log(a + b)
    }
}

// code3
(function fn() {
    setTimeout(function() {
        console.log("前端")
    }, 1000)
})()

// code4
(function fn(index) {
    setTimeout(function() {
        console.log(index)
    }, 1000)
})(10)

聪明的你有没有猜出来呢?答案是code2, code4是闭包。 原因就是定义啦。

应用

很多同学都是八股高手,能吟唱出来闭包的N种应用,很厉害。比如:

  • 封装私有变量
  • 保存函数的状态
  • 实现函数工厂
  • 作为回调函数

当然还有其他的,但是笔者认为你说出来的应用,一定要自己写过例子,有过非常透彻的理解,不然在面试中会很心虚的。

开始吊打

闭包的题目有很多,但是大差不差难度都不大。下面笔者说一道自己见过最有意思的闭包题目。

如果在面试中碰巧面试官问你闭包是什么?有哪些应用?你碰巧说了闭包封装私有变量。好巧不巧,面试官又让你手写一个对象的私有变量,要求能实现一个get函数访问对象的a,b变量的值。

这还不简单,看笔者分分钟写出来。

javascript 复制代码
function fn() {
  const obj = {
    a: 1,
    b: 2,
  }
  return function get(x) {
    return obj[x]
  }
}
const getObj = fn()
console.log(getObj('a')) // 1
console.log(getObj('b')) // 2

面试官看了代码,没有反对意见。

这时候你别着急,缓缓的说出:哥,我知道这个代码还有问题!这个对象不是那么"私有",不安全。我能修改这个对象上面的属性。

面试官心头一紧:私有变量,还能新加一个属性?小子是不是糊涂了。然后和你说前面代码别动了,你给我整一个新的属性c出来。

你心里想:想增加属性就要拿到私有对象本身,嘿嘿,我狠狠的一个thisc = 3,不给你拿捏了?

这时候问题就变成了怎么才能拿到这个私有对象本身呢?现在只能操作的方法是getObj。啊!懂了!通过对象原型的get方法进行拦截,在拦截函数中不就可以顺利打印出对象的this了吗?

于是你假装思考后,留下了下面这段代码。

javascript 复制代码
Object.defineProperties(Object.prototype, {
  x: {
    get() {
      return this
    },
  },
})

console.log(getObj('x')) // { a: 1, b: 2 }

么噶,拿到this了。问题解决了。

你:哥,我还知道这个安全问题如何解决呢。

面试官流汗中:我正要问你这个问题呢,那你说说吧。

你又噼里啪啦一顿操作中,期间还停顿了一会看面试官表情,很是享受,然后把闭包代码改成了这样。

javascript 复制代码
function fn() {
  const obj = Object.create(null)
  obj.a = 1
  obj.b = 2
  return function get(x) {
    return obj[x]
  }
}

面试官:哇库哇库,闭包问题就过了吧。

相关推荐
掘金者阿豪3 小时前
把业务数据变成共享仪表盘:Metabase可视化与远程访问实践
前端·后端
kyriewen3 小时前
折腾了半年 AI 编程工作流,最后发现效率瓶颈是桌上那块屏幕
前端·javascript·ai编程
蜗牛前端4 小时前
codex 全流程开发上线的高颜值礼簿小程序
前端·微信小程序
大龄秃头程序员4 小时前
我在图文流 App 里落地双层缓存、弱网降级与 OOM 治理
前端
老王以为4 小时前
React Renderer 分离的多平台架构
前端·react native·react.js
hunterandroid4 小时前
Kotlin Coroutines 与 Flow:让异步任务更清晰
前端
Bigger5 小时前
从零搭建 AI 代码审查服务:一份前端也能看懂的 Python 学习笔记
前端·ci/cd·ai编程
lichenyang4535 小时前
JSAPI、NAPI、Biz、Imp:ASCF Demo 如何真正调用系统能力和 C++ 能力
前端
lichenyang4535 小时前
IPC、JSVM、UIThread、libuv:ASCF 架构图里最容易混的几个词
前端
用户059540174466 小时前
Redis记忆存储故障恢复测试踩坑实录:手动测试让我漏掉了2个一致性Bug
前端·css