OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

5个经典的前端面试问题


分享到
分类 JS学习   关键字 前端   发布 ourjs  1411470059061
注意 转载须保留原文链接,译文链接,作者译者等信息。  
注* 相关阅读 如何面试前端工程师: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开发者的五个经典问题。面试的概念和涵盖的主题通常是非常相似的。如果你不知道的一些问题的答案,不必担心:学习和经验可以慢慢积累。

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





原文地址: 点此
社区评论 ( Beta版 )
  • #0 fragrant_wave 1411506048407

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

  • #1 ourjs 1411513059259

    @fragrant_wave #0

    非常感谢,已经更正

  • #2 陶手让 1413543373184

    非常好,感谢!

  • #3 余外朴 1414054138010

    这也能当面试题?

  • #4 颜争由 1417151548958

    @余外朴 #3

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

  • #5 龙区订 1419171121487

    用了 use strict 就都是浮云了。

  • #6 凌天 1423120959106

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

  • #7 康灰压 1465372399953

    @fragrant_wave #0

    haha

  • #8 文什太 1465978171752

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

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

    @颜争由 #4

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

  • #10 郭伏心 1472201215888

    感觉还是挺有意思的

  • #11 孔水专 1473160208531

    @关左乞 #9

    很对

  • #12 庄切丙 1476410153436

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

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

  • #13 云爷叼 1477044187429

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

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

  • #14 雷奶团 1482298044650

    @关左乞 #9

    有点道理

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

    @fragrant_wave #0

    @ourjs #1

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

  • #17 上官云 1495675588366

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

  • #18 魏安有 1495783679248

    alert("我不会")

OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. NodeBots-JavaScript在智能设备驱动(物联网)中的崛起
  2. CSS的力量:用一个DIV画图
  3. 内存管理技巧:如何避免JavaScript的内存泄露
  4. 响应式设计在图片上的应用: 一个HTML元素如何让Web更快
  5. CSS垂直水平完全居中手册
  6. 今天我去面试, 受打击了:你是学 .net 的吧?
  7. JavaScript中匿名函数和命名函数的性能差异
  8. LowDB - 基于Node的纯Json文件数据库
  9. 创造canvas的艺术
  10. 前端开发薪资之各地区对比(图文分析)
  11. AirJD-简单好用的免费建站工具

 相关阅读 - JS学习
  1. 拿什么守护你的Node.JS进程: Node出错崩溃了怎么办?
  2. 合并JavaScript数组的N种方法
  3. 内存管理技巧:如何避免JavaScript的内存泄露
  4. JavaScript中匿名函数和命名函数的性能差异
  5. JavaScript中怪异的地方
  6. 前置逗号是不好的JavaScript代码书写习惯吗?
  7. 在node.js响应流中设置多个Set-Cookie header属性
  8. JavaScript:世界上误解最深的语言
  9. 告别Node.js
  10. Node.js手册:require是如何工作的

 关键字 - 前端
  1. AngularJS在大型单页面应用中的性能优化(一)
  2. 什么是Viewport Meta(width详解)及在手机上的应用
  3. 用纯css改变下拉列表select框的默认样式
  4. 5个经典的前端面试问题
  5. CSS3实现的响应式字体:自适应视图窗口大小的新单位
  6. 我们抛弃了AngularJS:单页面应用的5大缺陷
  7. Animate.css让添加CSS动画像喝水一样容易
  8. 我被问得最多的十个JavaScript前端面试问题
  9. 用纯CSS停止冒泡和阻止浏览器默认行为及事件响应,达到禁用(disable)的目的
  10. 10个值得前端收藏的CSS3动效库(工具)

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号