0

0

问得最多的十个JavaScript前端面试问题

高洛峰

高洛峰

发布时间:2016-10-12 14:17:13

|

2045人浏览过

|

来源于php中文网

原创

我知道有很多人不同意这种类型的面试。其实不管你喜不喜欢,你都得接受。尤其当你是自学的,而且要申请第一份工作时。

 

我估计很多有人其它方法来证明他自己,像Github/ 项目地址可能是非常理想的证明方法,但也别全都指望这些。

 

好消息是有一些很难的问题,在有限的时间里我没答上来(比如说Event Loop和杨辉三角),一些其它面试侯选人也承认他们也没答上来,这会让讨论变得轻松很多。

立即学习Java免费学习笔记(深入)”;

 

坏消息是有些面试之后就没有任何反馈了。有三家公司再也没联系过。这点击打击自信,而且没有受到尊重。然后你可能会有心理斗争,“面试的不够好?”,“他们不喜欢我这种类型?”。所以如果你是面试官,请给你的面试者一个明确的答复,即使是自动回复也比什么都没有的强。

 

1. 设计一个函数返回第n行的杨辉三角。(整个面试只有这一个问题)

 

注* 杨辉三角也叫Pascal’s Triangle

 

           1

         1     1

      1     2     1

   1     3     3      1

   ...

 

2. 设计一个函数,返回一串字符串中重复次最多的单词。

 

3. 使用递归打印长度为n的费波那契数列。

 

注* 费波那契数列由0和1开始,之后就由之前的两数相加 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233

 

4. 解释一下 bind, apply和call的用法和区别。

 

5. 解释一下什么是event delegation(事件代理)和它为什么有用。

 

6. 什么是event loop (事件循环)?

PHP168  行业B2B
PHP168 行业B2B

解决问题如下:只列举最近用户提交问题,其余问题前面几次补丁已经解决,不在复述。1、解决搜索问题。以前搜索一定要确定到省下面的某个市,这个不符合用户体验。 现在改为,省--所有城市(默认为所有城市,也可以自己选择某个市)。2、解决首页推荐产品部显示问题。(以前没有考虑多个其他浏览器)3、解决供应、求购 今日产品显示问题。(理由同上)4、解决收藏商家、供应、求购问题。 (链接错误)5、解决后台分类过

下载

 

7. hoisting(声明提升)在JavaScript里是怎么工作的?

 

8. 描述一下你在设计应用或网站时的流程。

 

9. 你最希望JavaScript或浏览器中添加哪些功能,为什么?

 

10. 函数式编程和命令式编程之间的区别?你喜欢哪一个?

 

 

 5个经典的前端面试问题 

  

问题1:Scope作用范围


考虑下面的代码: 

(function() {
   var a = b = 5;
})();

console.log(b);

什么会被打印在控制台上? 

回答 

上面的代码会打印 5。

这个问题的诀窍是,这里有两个变量声明,但 a 使用关键字var声明的。代表它是一个函数的局部变量。与此相反,b 变成了全局变量。

这个问题的另一个诀窍是,它没有使用严格模式 ('use strict';) 。如果启用了严格模式,代码就会引发ReferenceError的错误:B没有定义(b is not defined)。请记住,严格模式,则需要明确指定,才能实现全局变量声明。比如,你应该写:

(function() {
   'use strict';
   var a = window.b = 5;
})();

console.log(b);

问题2:创建“原生”(native)方法


给字符串对象定义一个repeatify功能。当传入一个整数n时,它会返回重复n次字符串的结果。例如: 

console.log('hello'.repeatify(3));

应打印 hellohellohello。 


回答 

一个可能的实现如下所示: 

String.prototype.repeatify = String.prototype.repeatify || function(times) {
   var str = '';
   for (var i = 0; i <p>现在的问题测试开发者有关JavaScript继承和prototype的知识点。这也验证了开发者是否知道该如何扩展内置对象(尽管这不应该做的)。 <br><br>这里的另一个要点是,你要知道如何不覆盖可能已经定义的功能。通过测试一下该功能定义之前并不存在: <br><br></p><p>String.prototype.repeatify = String.prototype.repeatify || function(times) {/* code here */};<br></p><p><br>当你被要求做好JavaScript函数兼容时这种技术特别有用。 <br><br></p><p>问题3:声明提升(Hoisting)</p><p><br>执行这段代码,输出什么结果。 </p><pre class="brush:js;toolbar:false">function test() {
   console.log(a);
   console.log(foo());
   var a = 1;
   function foo() {
      return 2;
   }
}

test();

回答 

这段代码的结果是 undefined 和 2。 

原因是,变量和函数的声明都被提前了(移到了函数的顶部),但变量不分配任何值。因此,在打印变量的时候,它在函数中存在(它被声明了),但它仍然是 undefined 。表示换句话说,上面的代码等同于以下内容: 

function test() {
   var a;
   function foo() {
      return 2;
   }
 
   console.log(a);
   console.log(foo());
    
   a = 1;
}
 
test();

问题4:this在JavaScript中如何工作的


下面的代码会输出什么结果?给出你的答案。 

var fullname = 'John Doe';
var obj = {
   fullname: 'Colin Ihrig',
   prop: {
      fullname: 'Aurelio De Rosa',
      getFullname: function() {
         return this.fullname;
      }
   }
};

console.log(obj.prop.getFullname());
 
var test = obj.prop.getFullname;
 
console.log(test());

回答 

答案是Aurelio De Rosa和John Doe。原因是,在一个函数中,this的行为,取决于JavaScript函数的调用方式和定义方式,而不仅仅是看它如何被定义的。 

在第一个 console.log()调用中,getFullname() 被调用作为obj.prop对象的函数。所以,上下文指的是后者,函数返回该对象的fullname。与此相反,当getFullname()被分配到test变量时,上下文指的是全局对象(window)。这是因为test是被隐式设置为全局对象的属性。出于这个原因,该函数返回window的fullname,即定义在第一行的那个值。 

问题5:call() 和 apply()


现在让你解决前一个问题,使最后的console.log() 打印 Aurelio De Rosa。 

回答 

该问题可以通过强制使用 call() 或者 apply() 改变函数上下文。在下面我将使用call(),但在这种情况下,apply()会输出相同的结果: 

console.log(test.call(obj.prop))


java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Golang 测试体系与代码质量保障:工程级可靠性建设
Golang 测试体系与代码质量保障:工程级可靠性建设

Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链(如go test)、单元测试、集成测试及端到端测试实践,结合代码覆盖率分析、静态代码扫描(如go vet)和动态分析工具,建立全链路质量监控机制。通过自动化测试框架、持续集成(CI)流水线配置及代码审查规范,实现测试用例管理、缺陷追踪与质量门禁控制,确保代码健壮性与可维护性,为高可靠性工程系统提供质量保障。

43

2026.02.28

Golang 工程化架构设计:可维护与可演进系统构建
Golang 工程化架构设计:可维护与可演进系统构建

Go语言工程化架构设计专注于构建高可维护性、可演进的企业级系统。本专题深入探讨Go项目的目录结构设计、模块划分、依赖管理等核心架构原则,涵盖微服务架构、领域驱动设计(DDD)在Go中的实践应用。通过实战案例解析接口抽象、错误处理、配置管理、日志监控等关键工程化技术,帮助开发者掌握构建稳定、可扩展Go应用的最佳实践方法。

38

2026.02.28

Golang 性能分析与运行时机制:构建高性能程序
Golang 性能分析与运行时机制:构建高性能程序

Go语言以其高效的并发模型和优异的性能表现广泛应用于高并发、高性能场景。其运行时机制包括 Goroutine 调度、内存管理、垃圾回收等方面,深入理解这些机制有助于编写更高效稳定的程序。本专题将系统讲解 Golang 的性能分析工具使用、常见性能瓶颈定位及优化策略,并结合实际案例剖析 Go 程序的运行时行为,帮助开发者掌握构建高性能应用的关键技能。

35

2026.02.28

Golang 并发编程模型与工程实践:从语言特性到系统性能
Golang 并发编程模型与工程实践:从语言特性到系统性能

本专题系统讲解 Golang 并发编程模型,从语言级特性出发,深入理解 goroutine、channel 与调度机制。结合工程实践,分析并发设计模式、性能瓶颈与资源控制策略,帮助将并发能力有效转化为稳定、可扩展的系统性能优势。

20

2026.02.27

Golang 高级特性与最佳实践:提升代码艺术
Golang 高级特性与最佳实践:提升代码艺术

本专题深入剖析 Golang 的高级特性与工程级最佳实践,涵盖并发模型、内存管理、接口设计与错误处理策略。通过真实场景与代码对比,引导从“可运行”走向“高质量”,帮助构建高性能、可扩展、易维护的优雅 Go 代码体系。

18

2026.02.27

Golang 测试与调试专题:确保代码可靠性
Golang 测试与调试专题:确保代码可靠性

本专题聚焦 Golang 的测试与调试体系,系统讲解单元测试、表驱动测试、基准测试与覆盖率分析方法,并深入剖析调试工具与常见问题定位思路。通过实践示例,引导建立可验证、可回归的工程习惯,从而持续提升代码可靠性与可维护性。

3

2026.02.27

漫蛙app官网链接入口
漫蛙app官网链接入口

漫蛙App官网提供多条稳定入口,包括 https://manwa.me、https

235

2026.02.27

deepseek在线提问
deepseek在线提问

本合集汇总了DeepSeek在线提问技巧与免登录使用入口,助你快速上手AI对话、写作、分析等功能。阅读专题下面的文章了解更多详细内容。

11

2026.02.27

AO3官网直接进入
AO3官网直接进入

AO3官网最新入口合集,汇总2026年可用官方及镜像链接,助你快速稳定访问Archive of Our Own平台。阅读专题下面的文章了解更多详细内容。

382

2026.02.27

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
apipost极速入门
apipost极速入门

共6课时 | 0.5万人学习

JavaScript高级框架设计视频教程
JavaScript高级框架设计视频教程

共22课时 | 3.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号