五个典型的JavaScript面试题

本是古典何须时尚 2022-07-14 13:52 193阅读 0赞

> 本文转载自：[众成翻译][Link 1]  
> 译者：[cherryvenus][]  
> 链接：[http://www.zcfy.cc/article/1960][http_www.zcfy.cc_article_1960]  
> 原文：[https://www.sitepoint.com/5-typical-javascript-interview-exercises/][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';`)。如果 [严格模式][Link 2]开启，那么代码就会报出未捕获引用错误（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中是如何工作的 ##

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

### 答案 ###

代码打印了`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之间有和区别?][function.call_function.apply]。在以下代码中，我会用`call()`，但是在这个案例中，`apply()`也可以获得相同的结果：

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

## 结论 ##

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

如果你在面试中被问到了其他有趣的问题，不要犹豫马上来和我们分享吧。这会帮助到很多的开发者。

[Link 1]: http://www.zcfy.cc
[cherryvenus]: http://www.zcfy.cc/@cherryvenus
[http_www.zcfy.cc_article_1960]: http://www.zcfy.cc/article/1960
[https_www.sitepoint.com_5-typical-javascript-interview-exercises]: https://www.sitepoint.com/5-typical-javascript-interview-exercises/
[Link 2]: http://cjihrig.com/blog/javascripts-strict-mode-and-why-you-should-use-it/
[hoisted]: http://www.sitepoint.com/back-to-basics-javascript-hoisting/
[function.call_function.apply]: http://www.sitepoint.com/whats-the-difference-between-function-call-and-function-apply/