UDN-企业互联网技术人气社区

板块导航

浏览  : 892
回复  : 5

[面试] 五个典型的JavaScript面试题

[复制链接]
cat77的头像 楼主
发表于 2016-12-21 10:25:01 | 显示全部楼层 |阅读模式
  在IT界,需要大量的JavaScript开发者。如果这个角色能够最佳地展现你的能力,那么你有许多机会换家公司,以及提高薪水。但是在你被公司录取之前,你需要展现你的技术,以便通过面试环节。在这篇文章中,我会展示你五个典型的问题。

  问题1: 范围(Scope)

  思考以下代码:
  1. (function() {
  2.    var a = b = 5;
  3. })();

  4. console.log(b);
复制代码

  控制台(console)会打印出什么?

  答案

  上述代码会打印出 5 。

  这个问题的陷阱就是,在立即执行函数表达式(IIFE)中,有两个命名,但是其中变量是通过关键词 var 来声明的。这就意味着 a 是这个函数的本地变量。与此相反, b 是属于这个函数的全局变量的。

  这个问题另一个陷阱就是,在函数中他没有使用 "严格模式" ( 'use strict'; )。如果 严格模式 开启,那么代码就会报出未捕获引用错误(Uncaught ReferenceError):b没有定义。记住严格模式要求,如果这个是预期的行为,你需要明确地引用全局变量,。因此,你需要像下面这么写:
  1. (function() {
  2.    'use strict';
  3.    var a = window.b = 5;
  4. })();

  5. console.log(b);
复制代码

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

  在 String 对象上定义一个 repeatify 函数。这个函数接受一个整数参数,来明确字符串需要重复几次。这个函数要求字符串重复指定的次数。举个例子:
  1. `console.log('hello'.repeatify(3));``
复制代码

  应该打印出 hellohellohello .

  答案

  一种可能的实现如下所示:
  1. String.prototype.repeatify = String.prototype.repeatify || function(times) {
  2.    var str = '';

  3.    for (var i = 0; i < times; i++) {
  4.       str += this;
  5.    }

  6.    return str;
  7. };
复制代码

  这个问题测试了开发人员对于JavaScript中继承的掌握,以及 prototype 这个属性。这也验证了开发人员是否有能力扩展原生数据类型函数(虽然不应该这么做)。

  在这里,另一种重点是,展示你意识到如何在不重写可能已经定义的函数。这个需要在自定义函数之前判断函数不存在。
  1. `String.prototype.repeatify = String.prototype.repeatify || function(times) {/* code here */};``
复制代码

  当你被要求一个垫片JavaScript函数时,这个技巧十分有用。

  问题3: 提升变量(Hoisting)

  执行以下代码会有什么结果?为什么会这样?
  1. function test() {
  2.    console.log(a);
  3.    console.log(foo());

  4.    var a = 1;
  5.    function foo() {
  6.       return 2;
  7.    }
  8. }

  9. test();
复制代码

  答案

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

  这个结果的原因是,变量和函数都被提升了( hoisted )。因此,那个时候 a 被打印了,它存在函数之中(也就是声明了),但是依然是 undefined 。换言之,上述代码和以下代码是相同的。
  1. function test() {
  2.    var a;
  3.    function foo() {
  4.       return 2;
  5.    }

  6.    console.log(a);
  7.    console.log(foo());

  8.    a = 1;
  9. }

  10. test();
复制代码

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

  以下代码的结果是什么?请解释你的答案。
  1. var fullname = 'John Doe';
  2. var obj = {
  3.    fullname: 'Colin Ihrig',
  4.    prop: {
  5.       fullname: 'Aurelio De Rosa',
  6.       getFullname: function() {
  7.          return this.fullname;
  8.       }
  9.    }
  10. };

  11. console.log(obj.prop.getFullname());

  12. var test = obj.prop.getFullname;

  13. console.log(test());
复制代码

  答案

  代码打印了 Aurelio De Rosa 和 John Doe 。原因是在JavaScript中,一个函数的语境,也就是 this 这个关键词引用的,依赖于函数是如何调用的,不是如何定义的。

  在第一个 console.log() 调用中, getFullname() 是作为 obj.prop 的函数被调用的。因此,这里的语境指向后者并且函数返回对象的 fullname 属性。相反,当 getFullname() 被指定为 test 的变量,那个语境指向全局对象( window )。因为 test 相当于设置为全局对象的属性。因为这个原因,函数返回 window 的一个 fullname 属性,这在这个案例中是在代码片段中第一行设置的。

  问题5: call() 和 apply()

  修复上一个问题,让最后一个 console.log() 打印出 Aurelio De Rosa 。

  答案

  这个问题可以通过函数 call() 或者 apply() 强制函数语境。如果你不知道 call() 和 apply() 之间的区别,我推荐阅读文章 function.call和function.apply之间有和区别? 。在以下代码中,我会用 call() ,但是在这个案例中, apply() 也可以获得相同的结果:
  1. `console.log(test.call(obj.prop));``
复制代码

  结论

  在这篇文章中,我们讨论了,在面试中为了测试JavaScript开发者,而会问到的五种典型的问题。来自面试的真实问题可能会有所不同,但是涵盖的概念和主题通常都是十分相似的。我希望你愉悦地测试你的能力。万一你不知道所有的答案,不要担心:没有学习和经验不能解决的问题。

相关帖子

发表于 2016-12-21 10:25:31 | 显示全部楼层
LZ敢整点更有创意的不?兄弟们等着围观捏~
使用道具 举报

回复

发表于 2016-12-21 10:25:31 | 显示全部楼层
无论是不是沙发都得回复下
使用道具 举报

回复

发表于 2016-12-21 10:25:31 | 显示全部楼层
个人觉得js是一种解释性语言,它提供了一个非常方便的开发过程,不需要编译,js与HTML标识结合在一起,从而方便用户的使用操作。
使用道具 举报

回复

发表于 2016-12-21 10:25:31 | 显示全部楼层
不错的帖子,支持下
使用道具 举报

回复

发表于 2016-12-21 10:25:31 | 显示全部楼层
总觉得哪里有点问题啊
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部