五个典型的JavaScript面试题

Posted 2022-12-09 旗smile

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了五个典型的JavaScript面试题相关的知识，希望对你有一定的参考价值。

本文转载自：众成翻译
译者：cherryvenus
链接：http://www.zcfy.cc/article/1960
原文：https://www.sitepoint.com/5-typical-javascript-interview-exercises/

在IT界，需要大量的javascript开发者。如果这个角色能够最佳地展现你的能力，那么你有许多机会换家公司，以及提高薪水。但是在你被公司录取之前，你需要展现你的技术，以便通过面试环节。在这篇文章中，我会展示你五个典型的问题。

问题1: 范围（Scope）

思考以下代码：

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

console.log(b);

控制台（console）会打印出什么？

答案

上述代码会打印出5。

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

这个问题另一个陷阱就是，在函数中他没有使用“严格模式” ('use strict';)。如果严格模式开启，那么代码就会报出未捕获引用错误（Uncaught ReferenceError）：b没有定义。记住严格模式要求，如果这个是预期的行为，你需要明确地引用全局变量，。因此，你需要像下面这么写：

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

答案

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

这个结果的原因是，变量和函数都被提升了（hoisted）。因此，那个时候a被打印了，它存在函数之中（也就是声明了），但是依然是 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。原因是在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()也可以获得相同的结果：