优秀的编程知识分享平台

网站首页 > 技术文章 正文

3 个高级 JavaScript 面试问题(前端js高级面试题)

nanyue 2025-05-02 20:18:15 技术文章 4 ℃

#记录我的9月生活#

在本篇文章中,我将分享 3 个高级 JavaScript 面试问题,这些是我在面试中经常问的问题。这类问题通常针对那些高级开发人员。

问题 1

描述事件循环及其在 JavaScript 异步编程中的作用。

我期望的答案:

事件循环是 JavaScript 环境中不断检查栈中任务是否要执行的机制。当一个同步任务完成后,事件循环会检查调用栈。如果栈为空,它会检查事件队列中是否有待处理的异步操作(如回调函数或已解决的 Promise)。如果有,事件循环会将相应的函数推入调用栈并执行它。这个过程重复进行,创建了一个非阻塞的执行模型。

示例:

console.log("Start");

setTimeout(function() {
  console.log("Callback");
}, 1000);

console.log("End");

输出:

Start
End
Callback

在以上示例中:

  1. "Start" 先被打印,因为它在主线程上执行。
  2. setTimeout 函数设置了一个 1 秒的计时器,并将回调函数交给事件循环处理。
  3. "End" 紧接着被打印,因为计时器尚未完成。
  4. 1 秒后,事件循环取回 setTimeout 的回调函数并执行,打印 "Callback"。

这种行为源于 JavaScript 的非阻塞、异步特性。事件循环允许主线程在等待异步操作完成时继续运行,避免了阻塞。

问题 2

解释变量和函数的提升(Hoisting)机制。

我期望的答案:

提升是 JavaScript 中的一种行为,在编译阶段,变量和函数声明会被移到各自作用域的顶部(无论是函数作用域还是全局作用域),甚至在代码执行之前。这意味着你可以在声明之前使用变量和函数。

不过,变量的值在被赋值之前会被初始化为 undefined

变量提升:

console.log(x); // 输出:undefined (x 被提升了,但尚未初始化)
var x = 10;

在以上示例中,x 的声明被提升到了顶部,但尚未初始化。因此,打印的结果是 undefined,而不是 15

var x;
console.log(x); // 输出:undefined
x = 5;

这是 JavaScript 在背后执行的代码机制。

函数提升:

函数声明也会被提升,但与 var 不同,它们在提升时会被完全初始化。这意味着你可以在函数声明之前调用它。

示例 1:

greet(); // 输出:Hello, World!

function greet() {
  console.log("Hello, World!");
}

示例 2:

greet(); // TypeError: greet is not a function

var greet = function() {
  console.log("Hello, World!");
};

在这个例子中,函数表达式通过变量声明,因此不会完全被提升。

注意:使用 var 声明的变量会被提升,而 let 和 const 声明的变量不会被提升。

问题 3

解释原型继承。

我期望的答案:

原型是 JavaScript 的核心概念,它允许任意对象从其他对象继承属性和方法。原型本质上是一个对象,作为新对象的模板。当我们创建一个对象时,它会从其原型对象(即 Object)继承属性和方法。

每个对象都有一个特殊属性 __proto__(内部为 [[Prototype]]),它指向另一个对象,从而形成一个原型链。这种机制帮助对象共享行为,而无需显式定义它们。

示例:

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  console.log("Hello, my name is " + this.name);
};

const john = new Person("John Doe");
john.greet(); // 输出:Hello, my name is John Doe

在此示例中,john 继承了 Person.prototype 中的 greet 方法。这个方法并没有直接定义在 john 对象上,但可以通过原型链访问。

结论

这些高级 JavaScript 面试问题旨在评估候选人对 JavaScript 深层机制的理解,帮助我们识别那些能够有效参与现代 JavaScript 项目的开发人员。

这些面试问题仅涵盖了部分内容。在实际面试中,你可能会遇到更多问题,或者遇到不同的问题。

欢迎关注,感谢阅读!

最近发表
标签列表