【面试题】这道面试题真的很变态吗?

news2024/10/6 6:47:50

 前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

最近帮公司招聘,主要负责一面,所以基本上问的基础多一点。但是我在问这样一道面试题的时候,很少有人答对。不少人觉得我问这道题多少有点过分了😭,当然了面试还是奔着相互沟通相互学习的目的,并不是说这道题不会就被刷掉,单纯的觉得这道题有意思。话不多说,我们直接上题

题目

var foo = function () {
    console.log("foo1")
}
foo()

var foo = function () {
    console.log("foo2")
}
foo()


function foo() {
    console.log("foo1")
}
foo()

function foo() {
    console.log("foo2")
}
foo()

这里我会要求面试者从上到下依次说出执行结果。普遍多的面试者给出的答案是:foo1、foo2、foo1、foo2。虽然在我看来这是一道简单的面试题,但是也不至于这么简单吧😱~~~

当然面试本来就是一个相互讨论的过程,那就和面试者沟通下这道题我的理解,万一我理解错了呢😂

解答

拆分函数表达式

首先我会让面试者先看前面两个函数

var foo = function () {
    console.log("foo1")
}
foo()

var foo = function () {
    console.log("foo2")
}
foo()

这时候大部分人基本上都可以答对了,是:foo1、foo2。再有很少数的人答不对那就只能”施主,出门右转“😌。接着根据我当时的心情可能会稍作追问(美女除外🙂):

foo()
var foo = function () {
    console.log("foo1")
}

这时候又有一部分的人答不上来了。这毫无疑问是肯定会报错的啊

image.png

我们都知道用var定义的变量会变量提升,所以声明会被拿到函数或全局作用域的顶部,并且输出undefined。所以当执行foo()的时候,foo还是undefined,所以会报错。由于js从按照顺序从上往下执行,所以当执行foo = function(){}的时候,才对foo进行赋值为一个函数。我们重新看拆分之后的代码

var foo = function () {
    console.log("foo1")
}
foo()

var foo = function () {
    console.log("foo2")
}
foo()

foo首先会变量提升,然后进行赋值为function。所以当执行第一个foo的时候,此时foo就是我们赋值的这个函数。接着执行第二个foo的赋值操作,由于函数作用域的特性,后面定义的函数将覆盖前面定义的函数。 由于在调用函数之前就进行了函数的重新定义,所以在调用函数时,实际执行的是最后定义的那个函数。所以上面的代码会打印:foo1、foo2。

这种定义函数的方式,我们称为函数表达式。函数表达式是将函数作为一个值赋给一个变量或属性

函数表达式我们拆分完了,下面就看看函数声明吧。

拆分函数声明

function foo() {
    console.log("foo1")
}
foo()

function foo() {
    console.log("foo2")
}
foo()

大部分人其实都卡在了这里。函数声明会在任何代码执行之前先被读取并添加到执行上下文,也就是函数声明提升。说到这里其实大多数人就已经明白了。这里使用了函数声明定义了两个foo函数,由于函数声明提升,第二个foo会覆盖第一个foo,所以当调用第一个foo的时候,其实已经被第二个foo覆盖了,所以这两个打印的都是foo2。

当两段代码结合

当开始解析的时候,函数声明就已经提升了,第四个foo会覆盖第三个foo。然后js开始从上往下执行,第一个赋值操作之后执行foo()后,打印了”foo1“,第二个赋值之后执行foo(),打印了"foo2"。下面两个foo的执行其实是第二个赋值了的foo,因为函数声明开始从刚开始就被提升了,而下面的赋值会覆盖foo。

总结

我们整体分析代码的执行过程

  1. 通过函数表达式定义变量foo并赋值为一个匿名函数,该函数在被调用时打印"foo1"。
  2. 接着,通过函数表达式重新定义变量foo,赋值为另一个匿名函数,该函数在被调用时打印"foo2"。
  3. 使用函数声明定义了两个名为foo的函数。函数声明会在作用域中进行提升。后面的会覆盖前面的,由于声明从一开始就提升了,而又执行了两个赋值操作,所以此时foo是第二个赋值的函数。
  4. 然后调用foo(),输出"foo2"。
  5. 再调用foo(),也输出"foo2"。

其实就一个点: 函数表达式相对于函数声明的一个重要区别是函数声明在代码解析阶段就会被提升(函数声明提升),而函数表达式则需要在赋值语句执行到达时才会创建函数对象

小伙伴们,以上是我的理解,欢迎在评论区留言,大家相互讨论相互学习。

之前的描述确实有点不妥,所以做了改动,望大家谅解,还是本着相互学习的态度

 

 前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/857419.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

福布斯发布2023年云计算100强榜单,OpenAI排名第一

🦉 AI新闻 🚀 福布斯发布2023年云计算100强榜单,OpenAI排名第一 摘要:福布斯发布《2023年云计算100强榜单》,OpenAI排名第一。榜单关注全球高成长性的云计算公司,特别注重AI领域的发展。今年有16家新上榜…

基于自适应曲线阈值和非局部稀疏正则化的压缩感知图像复原研究【自适应曲线阈值去除加性稳态白/有色高斯噪声】(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

自带flash的浏览器,免安装

一. 内容简介 自带flash的浏览器,免安装 二. 软件环境 2.1 FlashBrowser_v1.0.5 2.2 安装包链接 链接:https://pan.baidu.com/s/1O8_uHBkDMAXnj0KCfj_Urw?pwd1234 提取码:1234 三.主要流程 3.1 下载安装包 3.2 运行 点击CefFlashBro…

怎么裁剪视频大小尺寸?简单的裁剪方法分享

怎么裁剪视频的画面大小尺寸呢?有时当我们下载下来一段视频,由于视频的画面大小比例不同,会有很多的黑边,我们不管是观看还是进行二次编辑都非常影响体验,而调整视频画面比例以适应观众的设备或平台,比如将…

dotNet 之数据库sqlite

Sqlite3是个特别好的本地数据库,体积小,无需安装,是写小控制台程序最佳数据库。NET Core是同样也是.NET 未来的方向。 **硬件支持型号 点击 查看 硬件支持 详情** DTU701 产品详情 DTU702 产品详情 DTU801 产品详情 DTU802 产品详情 D…

iview 日期 datetimerange

问题&#xff1a;每次点击编辑按钮进入到编辑页面&#xff0c;活动时间明明有值&#xff0c;却还是提示请选择活动时间。 原因&#xff1a;值没绑定上 解决办法&#xff1a;v-model 修改为 :value <Form-item label"活动时间" prop"timeRange"><d…

谷粒商城第九天-对商品服务中所涉及到的表的思考

目录 一、总述 二、spu、sku、规格参数、销售属性之间的关系理解 三、相关表设计 1. 属性表 2. 基本属性分组表 3. 分组-基本属性关系表 ​4. spu基本属性值表 5. spu详情信息表 6. spu评论表 7. 商品sku值表 8. sku详情表 9. sku图片表 10. 分类表 11. 品牌表 …

什么是代码合并。PR、MR通识说明

What is it ? 首先我想先来讲讲什么是分支合并请求Merge Request(也可叫Pull Request&#xff0c;下文中全用Merge Request或其缩写MR指代)&#xff0c;以及它有什么作用&#xff08;如果你对此概念有所了解&#xff0c;你完全可以跳过What is it&#xff09;。 MR(或者PR)就…

海外应用商店优化实用指南之元数据的迭代更新

随着每天都有新应用程序加入App Store和Google Play商店&#xff0c;许多应用程序都会针对与我们相同的关键词&#xff0c;虽然我们的元数据保持不变&#xff0c;但竞争对手的应用会重新编入索引&#xff0c;最终导致我们的关键词排名随着时间的推移稳步下降。 1、迭代的重要性…

Mysql in 查询的奇怪方向

Mysql in 查询的奇怪方向 关于表字段存储的数据为 num1,num2,num3时, 还要通过多个num1,num2入参针对该字段进行查询 建表语句 CREATE TABLE test (test_ids varchar(100) DEFAULT NULL COMMENT 保存ids 以逗号分隔 ) ENGINEInnoDB;数据项 查询语句 SELECT test_ids FROM t…

OSPF工作原理及其配置命令

目录 一、OSPF&#xff08;开放式最短路径优先协议&#xff09;&#xff1a; 作用&#xff1a;防环 弊端&#xff1a; 结构化部署: 更新方式&#xff1a; 二、OSPF的数据包 三、OSPF的状态机 Down Init 2way 条件&#xff1a; Exstart Exchange Loadi…

Stephen Wolfram:让 ChatGPT 真正起作用的是什么?

What Really Lets ChatGPT Work? 让 ChatGPT 真正起作用的是什么&#xff1f; Human language—and the processes of thinking involved in generating it—have always seemed to represent a kind of pinnacle of complexity. And indeed it’s seemed somewhat remarkabl…

stm32项目(9)——基于stm32的智能门窗设计

目录 一.功能设计 二.硬件方案 1.单片机 2.显示器 3.温湿度模块 4.烟雾模块 5.光照模块 6.数字舵机 7.蓝牙模块 8. 语音识别模块 三.程序设计 四.课题意义 五.国内外发展现状 一.功能设计 本次设计的功能如下&#xff1a; 系统包括了语音模块 、传感器数据采集模块和…

冠达管理:炒股知识入门?

股市出资是指将资金投入到股票商场&#xff0c;在商场改变中获取收益的出资行为。股票商场波动性大&#xff0c;收益高&#xff0c;招引了大量出资者的眼球&#xff0c;但是也需要出资者具备一定的常识和技能。下面从多个角度剖析&#xff0c;帮助初学者了解股市出资。 一、基本…

恒运资本:股票印花税下降有什么影响?什么原因导致下降?

在进行股票教育过程中是需求收取必定的手续费的&#xff0c;比如说买卖佣钱、印花税、过户费等等。那么股票印花税下降有什么影响&#xff1f;什么原因导致下降&#xff1f;下面就由恒运资本为大家剖析&#xff1a; 股票印花税下降有什么影响&#xff1f; 1、对于企业&#xf…

Effective Java笔记(32)谨慎并用泛型和可变参数

故事的小黄花 从出生那年就飘着 童年的荡秋千 随记忆一直晃到现在 可变参数&#xff08; vararg &#xff09; 方法&#xff08;详见第 53 条&#xff09;和泛型都是在 Java 5 中就有了&#xff0c;因此你可能会期待它们可以良好地相互作用&#xff1b;遗憾的是&#xff0c;它们…

python科研应用知乎,python库如何安装

大家好&#xff0c;小编来为大家解答以下问题&#xff0c;python科研应用知乎&#xff0c;python scipy库安装&#xff0c;现在让我们一起来看看吧&#xff01; 首先cmd进入python-s目录&#xff0c;然后再输入代码 1. 安装numpy 在线安装。此方法参考网页&#xff1a; https:/…

LeaferUI - 性能强悍、简洁轻量的 HTML5 Canvas 2D 图形 UI 绘图框架,用于 web 端在线图形设计、图表、白板、数据可视化等场景

最近想做一个轻巧的在线画册和海报设计工具&#xff0c;最近发布的 LeaferUI 特别适合这样的场景。 LeaferUI 是什么&#xff1f; Leafer UI 是基于 LeaferJS 开发的一套绚丽多彩的 UI 绘图框架&#xff0c;帮助开发者快速生成图形界面。LeaferJS 是一个基于 HTML5 Canvas 开…

3个优秀的PPT模板网站,让你的演示报告更出色!

PPT&#xff0c;作为我们在日常学习和工作中常用的一种呈现工具&#xff0c;其作用和影响力不言而喻。一份精心制作的PPT不仅可以增强观众的理解和记忆&#xff0c;而且还能展示演讲者的专业性和深度。然而&#xff0c;从零开始制作PPT可能需要花费大量的时间和精力&#xff0c…

6款好用的思维导图在线制作网站盘点,拒绝低效、探索创意!

思维导图以其直观、系统的特性&#xff0c;成为了我们理清思路、整理信息的强大助手。利用好思维导图&#xff0c;我们可以更好地理解信息、链接概念&#xff0c;进一步提高我们的学习和工作效率。 在众多制作思维导图的软件中&#xff0c;在线思维导图制作网站更是因其…