5个典型的JavaScript访谈练习

核心要点

• 常见的JavaScript面试题通常围绕理解关键概念展开，例如作用域、创建原生方法、提升、this关键字以及call()和apply()函数。
• 在JavaScript中，理解函数的上下文以及如何调用函数至关重要。this关键字指的是上下文，它会根据函数是作为对象的一部分被调用还是作为独立函数被调用而有所不同。
• JavaScript中的提升是指变量和函数被移动到其包含作用域顶部的过程。然而，虽然函数保留其初始值，但变量不会，并且最初被设置为undefined。

JavaScript开发人员在IT领域非常抢手。如果这个角色最能体现你的知识，你有很多机会改变你的工作公司并提高你的薪水。但在你被公司录用之前，你必须展示你的技能才能通过面试过程。在本文中，我将向你展示五个在前端工作面试中常见的测试候选人JavaScript技能及其相关解决方案的问题。这将会很有趣！

问题1：作用域

考虑以下代码：

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

console.log(b);

控制台将打印什么？

答案

上面的代码打印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：创建“原生”方法

在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：提升

执行这段代码的结果是什么？为什么？

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

console.log(b);

答案

这段代码的结果是undefined和2。原因是变量和函数都被提升（移动到函数的顶部），但是变量不保留任何赋值的值。因此，在打印变量a时，它存在于函数中（它已声明），但它仍然是undefined。换句话说，上面的代码等效于以下代码：

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

console.log(b);

问题4：this在JavaScript中的工作方式

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

console.log('hello'.repeatify(3));

答案

代码打印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()函数强制函数的上下文来修复此问题。如果你不了解它们以及它们的区别，我建议你阅读文章《function.call和function.apply的区别》。在下面的代码中，我将使用call()，但在这种情况下，apply()也会产生相同的结果：

String.prototype.repeatify = String.prototype.repeatify || function(times) {
   var str = '';

   for (var i = 0; i < times; i++) {
       str += this;
   }

   return str;
};

结论

在本文中，我们讨论了面试中用来测试JavaScript开发人员的五个常见问题。实际问题可能因面试而异，但涵盖的概念和主题通常非常相似。我希望你玩得开心，测试你的知识。如果你在面试中被问到其他有趣的问题，请随时与我们分享。这将帮助很多开发人员。

关于JavaScript面试练习的常见问题解答 (FAQ)

在JavaScript编码面试中，应该避免哪些常见错误？

最常见的错误之一是在开始编码之前没有完全理解问题。花时间理解问题，如果需要，提出澄清问题。另一个错误是没有考虑边缘情况。始终考虑潜在的边缘情况以及你的代码将如何处理它们。此外，避免硬编码值。你的解决方案应该适用于所有输入，而不仅仅是提供的示例。最后，记住要沟通你的思考过程。面试官对你的解决问题的方法感兴趣，而不仅仅是最终的解决方案。

如何准备JavaScript编码面试？

首先要彻底理解JavaScript的基础知识。这包括理解闭包、Promise、async/await和ES6特性等概念。在LeetCode、HackerRank和Codewars等平台上练习编码问题。此外，阅读常见的JavaScript面试问题，并尝试自己解决它们。最后，了解JavaScript的底层工作原理。这包括理解事件循环、调用堆栈和JavaScript的非阻塞特性。

什么是JavaScript中的闭包，为什么它们很重要？

JavaScript中的闭包是能够访问父作用域的函数，即使父函数已经关闭。它们很重要，因为它们能够实现数据隐私，并且用于函数工厂和模块模式。理解闭包至关重要，因为它们是JavaScript的基础部分。

你能解释JavaScript中“this”的概念吗？

JavaScript中的“this”是一个特殊的关键字，它指的是调用函数的上下文。它的值取决于函数的调用方式。它可以指全局对象、当前正在由函数处理的对象、由构造函数创建的对象，或者使用call、apply或bind方法时指定的对象。

JavaScript如何处理异步操作？

JavaScript使用回调、Promise和async/await来处理异步操作。回调是作为参数传递给其他函数并在某些操作完成后调用的函数。Promise是表示异步操作最终完成或失败的对象。async/await是Promise的语法糖，它使异步代码看起来和行为都像同步代码。

什么是JavaScript中的原型？

JavaScript中的原型是JavaScript对象相互继承特性的机制。JavaScript通常被称为基于原型的语言，理解原型是理解JavaScript的关键。

你能解释JavaScript中“==”和“===”的区别吗？

“==”是松散相等运算符，它在进行比较之前将操作数转换为相同的类型。“===”是严格相等运算符，它不进行类型转换，它按原样比较操作数。

什么是JavaScript中的事件循环？

事件循环是JavaScript中的一种机制，它不断检查调用堆栈是否为空。如果是，它从任务队列中获取第一个任务并将其推送到调用堆栈。它允许JavaScript成为非阻塞的并处理异步操作。

什么是JavaScript Promise？

JavaScript中的Promise是表示异步操作最终完成或失败的对象。它们可以处于三种状态之一：等待中、已完成或已拒绝。Promise用于以比回调更灵活的方式处理异步操作。

一些常见的JavaScript设计模式是什么？

一些常见的JavaScript设计模式包括模块模式、原型模式、观察者模式和单例模式。理解这些模式可以帮助你编写更高效、更易维护和更可扩展的代码。

以上是5个典型的JavaScript访谈练习的详细内容。更多信息请关注PHP中文网其他相关文章！