5个经典的前端面试问题


发布者 ourjs  发布时间 1411470059061
关键字 JS学习  前端 
注* 相关阅读 如何面试前端工程师:Github很重要

JavaScript开发人员在IT界的需求量一直很大。如果你非常精通神这门语言,你会有很多机会换工作,涨薪水。但是在一家公司录用你之前,你必须顺利通过面试,证明你的技能。在本文中,我将向您展示5个关于前端相关的问题,以测试侯选者的JavaScript技能和他们解决问题的能力。有将会非常有趣!

问题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 < times; i++) {
      str += this;
   }
   return str;
};

现在的问题测试开发者有关JavaScript继承和prototype的知识点。这也验证了开发者是否知道该如何扩展内置对象(尽管这不应该做的)。

这里的另一个要点是,你要知道如何不覆盖可能已经定义的功能。通过测试一下该功能定义之前并不存在:

String.prototype.repeatify = String.prototype.repeatify || function(times) {/* code here */};

当你被要求做好JavaScript函数兼容时这种技术特别有用。

问题3:声明提升(Hoisting)


执行这段代码,输出什么结果。

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));


结论


在这篇文章中,我们已经讨论了用来测试JavaScript开发者的五个经典问题。面试的概念和涵盖的主题通常是非常相似的。如果你不知道的一些问题的答案,不必担心:学习和经验可以慢慢积累。

如果你有其他一些有趣的问题,不要犹豫,与我们分享。它会帮助很多开发者。









回复 (34)
  • #
  • #1 fragrant_wave 1411506048407

    答案是Aurelio De Rosa和Aurelio De Rosa。 编辑错误?

  • #2 ourjs 1411513059259

    @fragrant_wave #0

    非常感谢,已经更正

  • #3 陶手让 1413543373184

    非常好,感谢!

  • #4 余外朴 1414054138010

    这也能当面试题?

  • #5 颜争由 1417151548958

    @余外朴 #3

    确实,大多数题目除了奇淫技巧没看出这题有任何意义,项目将开发过程中代码的可读性要求是非常高的,如果打算让自己开发的项目别人未来无法接手,那确实可以这么写。

  • #6 龙区订 1419171121487

    用了 use strict 就都是浮云了。

  • #7 凌天 1423120959106

    @颜争由 #4 基本功是否扎实,直接影响代码质量和可读性。

  • #8 康灰压 1465372399953

    @fragrant_wave #0

    haha

  • #9 文什太 1465978171752

    话说这个markdown的编辑器挺好玩的

    console.log(console)
    
    1. 列表1
    2. 列表2
    3. 列表3
  • #10 关左乞 1468173979216

    @颜争由 #4

    是啊,我也没看出哪里有解决问题的思路,就是在玩弄大神的经验,我们没有经验的没遇到过那些问题的懂个叼啊,遇到问题解决问题就行了,哪有那么多的乱七八糟的问题

  • #11 郭伏心 1472201215888

    感觉还是挺有意思的

  • #12 孔水专 1473160208531

    @关左乞 #9

    很对

  • #13 庄切丙 1476410153436

    只有能力比较弱的面试官才喜欢问这种奇葩结果输出型的题目,因为答案是固定且唯一的这样让面试官很容易判断被面试者回答的正确与否。

    而真实项目中根本不能容忍这种试图混淆逻辑的代码,因为这种一来几乎不能维护、二来在工程移植新平台时也不能处理。原因是后面负责维护或者移植的人根本无法判断最初的作者写的这个代码是否真实的反映了他的意图,贸然照搬原逻辑到新代码或者新平台上去的风险远远大于将这段代码设计到的模块推翻重作。

  • #14 云爷叼 1477044187429

    只有能力比较弱的面试官才喜欢问这种奇葩结果输出型的题目,因为答案是固定且唯一的这样让面试官很容易判断被面试者回答的正确与否。

    而真实项目中根本不能容忍这种试图混淆逻辑的代码,因为这种一来几乎不能维护、二来在工程移植新平台时也不能处理。原因是后面负责维护或者移植的人根本无法判断最初的作者写的这个代码是否真实的反映了他的意图,贸然照搬原逻辑到新代码或者新平台上去的风险远远大于将这段代码设计到的模块推翻重作。

  • #15 雷奶团 1482298044650

    @关左乞 #9

    有点道理

  • #16 岑击尖 1484851339546
    alert('a')
  • #17 孙帅刃 1494386665585

    @fragrant_wave #0

    @ourjs #1

    为什么我打印出来的结果是Aurelio De Rosa 和undefined

  • #18 上官云 1495675588366

    试问。这到底是考逻辑判断还是怎么样?猿兄们。你们写真是项目真的用到过?

  • #19 魏安有 1495783679248

    alert("我不会")

  • #20 章仔予 1499957049552

    做项目的时候确实碰不到,但是面试是真的有可能遇到的!

  • #21 岳了乔 1500653862474

    @孙帅刃 #16

    node环境和浏览器上结果不一样 我去

  • #22 梅尽乒 1511148386957

    只有能力比较弱的面试官才喜欢问这种奇葩结果输出型的题目,因为答案是固定且唯一的这样让面试官很容易判断被面试者回答的正确与否。

    而真实项目中根本不能容忍这种试图混淆逻辑的代码,因为这种一来几乎不能维护、二来在工程移植新平台时也不能处理。原因是后面负责维护或者移植的人根本无法判断最初的作者写的这个代码是否真实的反映了他的意图,贸然照搬原逻辑到新代码或者新平台上去的风险远远大于将这段代码设计到的模块推翻重作。

  • #23 简年旦 1513757591249

    @梅尽乒 #21

    @梅尽乒 #21

    @梅尽乒 #21

    @梅尽乒 #21

    111

  • #24 郑士设 1514510849276

    三年前端开发,表示这些题我一个都不会...

  • #25 侯当艺 1517983938162

    这名儿起得,一个比一个难听

  • #26 皮几万 1520531438285

    js太多隐式规则。。。

  • #27 廉玉史 1522825550230

    有趣的名字,哈哈·

  • #28 邹血吸 1523440527191

    @梅尽乒 #21

    我也觉得,要么直接上级多好问这些不如多问点基础,然后在看你动手能力。

  • #29 蒋米吗 1528093750103
    在这里输入代码100102323
    
  • #30 华玉他 1529631387289

    console.log(“你是想绕死谁”)

  • #31 赵*天 1529631569908

    这些题当你答出来时,面试官会觉得这些都是底层基础他会很平淡,但当你答不出来时,我靠嫩姨他就会怀疑你

  • #32 司式打 1531214813131

    做项目你们用不到不代表这些东西没有用,不好意思,除了问题1其它的都已经应用到项目中了(JS-SDK)

  • #33 甘记回 1531879782356

    只是考我们前端对js原理的理解程度,你会做就代表理解的透彻,做起来项目写大白话的代码自然更得心应手。目前正在研究这些题目,从中学习其中的原理

  • #34 许丛早 1558269178291

    这些问题我基本都能理解,除了继承用到别的地方真没用到,我现在最担心的问题是,要是题目我不认得就尴尬了

微信扫码 立即评论