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

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

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

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

定义

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

可以拆解一下这句话:

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

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

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

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]
  }
}

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

相关推荐
福兮说2 小时前
设计稿是 #4A7C6F,页面量出来是 #4B7C6F:HEX、HSL、透明度、canvas 来回转的七个坑
前端·javascript·css·canvas
郑州光合科技余经理3 小时前
海外版外卖加盟:总站与分站配送规则怎么分开管
java·开发语言·前端·后端·uni-app·php·ai编程
小呆呆6663 小时前
副业搞起来,小说,漫画,漫剧的成本优化思路
前端·后端·面试
凤城老人4 小时前
从 PyQt6 到 Electron:给 Edge TTS 做一个“多角色配音机“的踩坑手记
javascript·typescript·electron
Dovis(誓平步青云)4 小时前
浇水提醒刚弹出又消失,植物状态别只存一个百分比
开发语言·前端·javascript·pdf·ecmascript·电脑
码艺-Alimjan4 小时前
Vben Admin 新增维吾尔语 Vben-Modal的关键坑之一
前端·javascript·vue.js
可乐鸡翅yeah_5 小时前
hls.js 手动自定义 http 请求 loader,修改请求头实战
开发语言·前端·javascript·网络协议·http·ecmascript·m3u8在线
IT_陈寒5 小时前
Vite静态资源导入这个坑我帮你们踩过了
前端·人工智能·后端
广州华水科技5 小时前
大坝安全监测解决方案:单北斗GNSS形变监测系统应用与维护
前端
yivifu6 小时前
中文古籍电子书注释集成
前端·javascript·python·beautifulsoup·epub