【面试题四】 2024 高频JS面试题总结第一篇(10道)

本文链接：https://blog.csdn.net/jiadsadfasfs/article/details/140938596

前言

提示：以下是本篇文章正文内容，下面案例可供参考

一、解释闭包的概念并给出一个实际的应用场景。

闭包是一个函数与其引用环境的组合。它使得函数可以访问并操作在其外部定义但在其内部作用域中的变量。

function createIncrementor() {
  let count = 0;
  return function increment() {
    count++;
    return count;
  };
}

const incrementor = createIncrementor();
console.log(incrementor()); // 1
console.log(incrementor()); // 2

二、this 在不同上下文中是如何工作的？

this 的值取决于函数的调用方式。在非严格模式下，全局作用域中的 this 指向全局对象（通常是 window），在对象的方法中指向该对象，在构造函数中指向新创建的对象。箭头函数没有自己的 this 绑定，而是继承其所在上下文的 this 值。

function example() {
  console.log(this); // 全局对象
}
example();

const obj = {
  method: function () {
    console.log(this); // 对象obj
  },
};
obj.method();

三、事件循环（Event Loop）是如何工作的？

事件循环管理着 JavaScript 引擎的执行顺序。它基于微任务（如 Promise）和宏任务（如 setTimeout）。引擎从调用栈中取出任务执行，然后处理微任务队列，再从消息队列中取出宏任务。

console.log('start');
Promise.resolve().then(() => console.log('Promise'));
setTimeout(() => console.log('timeout'), 0);
console.log('end');

四、解释原型链的工作原理。

每个 JavaScript 对象都有一个隐式的 [[Prototype]] 属性，它链接到该对象的原型对象。当试图访问一个对象的属性时，如果该对象本身没有这个属性，JavaScript 将沿着原型链查找，直到找到该属性或到达原型链的终点（通常是 null）。

function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function () {
  console.log(`Hello, ${this.name}!`);
};

const person = new Person('John');
person.sayHello(); // 输出: Hello, John!

五、let 和 var 有何不同？

let 和 var 都可以声明变量，但 let 具有块级作用域，而 var 具有函数级作用域。此外，let 不允许在同一作用域内重复声明同一变量，而 var 允许。

for (var i = 0; i < 3; i++) {
  console.log(i);
}
console.log(i); // 输出: 3

for (let j = 0; j < 3; j++) {
  console.log(j);
}
// ReferenceError: j is not defined

六、解释观察者模式（Observer Pattern）。

观察者模式是一种行为设计模式，当对象的状态改变时通知所有注册过的依赖对象。

class Observable {
  constructor() {
    this.observers = [];
  }

  subscribe(fn) {
    this.observers.push(fn);
  }

  unsubscribe(fn) {
    this.observers = this.observers.filter(observer => observer !== fn);
  }

  notify(data) {
    this.observers.forEach(observer => observer(data));
  }
}

const observable = new Observable();

observable.subscribe(data => console.log(`Observer 1: ${data}`));
observable.subscribe(data => console.log(`Observer 2: ${data}`));

observable.notify('Hello World!');

七、什么是 Promise？

Promise 是一种处理异步操作的模式，它可以解决回调地狱的问题。Promise 有三种状态：pending（等待中）、fulfilled（已成功）和 rejected（已失败）。一旦状态改变就不会再变回之前的状态。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Success!'), 1000);
});

promise.then(value => console.log(value)); // 输出: Success!

八、解释 async/await 语法。

async/await 是基于 Promise 的更简洁的异步编程方式。async 函数总是返回一个 Promise 对象，await 表达式只能在 async 函数中使用，它等待一个 Promise 完成并返回其结果。

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
}
fetchData();

九、解释 Array.prototype.reduce() 方法。

reduce() 方法对数组中的每个元素执行一个由您提供的 reducer 函数（升序执行），将其结果汇总为单个返回值。

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 输出: 10

十、解释 Symbol 类型。

Symbol 类型用于创建唯一且不可枚举的键。Symbol 可以帮助避免键名冲突，因为每个 Symbol 都是独一无二的。

const symbolKey = Symbol('key');
const obj = {};

obj[symbolKey] = 'Value';
console.log(obj[symbolKey]); // 输出: Value
console.log(Object.keys(obj)); // 输出: []