首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript面试题补充(1---5)

JavaScript面试题补充(1---5)

作者头像
用户1272076
发布2019-03-26 15:53:30
3710
发布2019-03-26 15:53:30
举报
文章被收录于专栏:张培跃张培跃张培跃

本文主要介绍了10道典型的JavaScript面试题。具有很好的参考价值。

在IT界中,JavaScript开发人员的需求量一直居高不下。如果你的能力能够胜任这一角色,那么你有很多机会换一家公司,并提高薪水。但在你被一家公司聘用之前,你必须展示你的技能,以通过面试环节。在本文中,我将向您展示10个 JavaScript 技能典型问题以及其相关解决方案,来面试前端工程师。它们很有意思!

问题1: 作用域(Scope)

考虑以下代码:

(function() {
   var a = b = 5;
})(); 
console.log(b);

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

答案

上述代码会打印出5

这个问题的陷阱就是,在立即执行函数表达式(IIFE)中,有两个赋值,但是其中变量a使用关键词var来声明。这就意味着a是这个函数的局部变量。与此相反,b被分配给了全局作用域(译注:也就是全局变量)。

这个问题另一个陷阱就是,在函数中没有使用”严格模式” ('use strict';)。如果 严格模式开启,那么代码就会报错 ” Uncaught ReferenceError: b is not defined” 。请记住,如果这是预期的行为,严格模式要求你显式地引用全局作用域。所以,你需要像下面这么写:

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

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

String 对象上定义一个 repeatify 函数。这个函数接受一个整数参数,来明确字符串需要重复几次。这个函数要求字符串重复指定的次数。举个例子:

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

答案

这段代码的执行结果是undefined2

这个结果的原因是,变量和函数都被提升(hoisted) 到了函数体的顶部。因此,当打印变量a时,它虽存在于函数体(因为a已经被声明),但仍然是undefined。换言之,上面的代码等同于下面的代码:

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

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

以下代码的结果是什么?请解释你的答案。

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 RosaJohn Doe 。原因是,JavaScript中关键字this所引用的是函数上下文,取决于函数是如何调用的,而不是怎么被定义的。

在第一个console.log()getFullname()是作为obj.prop对象的函数被调用。因此,当前的上下文指代后者,并且函数返回这个对象的fullname属性。相反,当getFullname()被赋值给test变量时,当前的上下文是全局对象window,这是因为test被隐式地作为全局对象的属性。基于这一点,函数返回windowfullname,在本例中即为第一行代码设置的。

问题5: call() 和 apply()

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

答案

这个问题可以通过运用call()或者apply()方法强制转换上下文环境。 下面的代码中,我用了call(),但apply()也能产生同样的结果:

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

版权声明:转载文章和图片均来自公开网络,版权归作者本人所有,推送文章除非无法确认,我们都会注明作者和来源。如果出处有误或侵犯到原作者权益与我们联系删除或授权事宜。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-06-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 张培跃 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 答案
  • 问题2: 创建 “原生(native)” 方法
    • 答案
    • 问题3: 变量提升(Hoisting)
      • 答案
      • 问题4: 在javascript中,this是如何工作的
        • 答案
        • 问题5: call() 和 apply()
          • 答案
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档