前端面试知识点总结（JS篇）

对于前端开发工程师来说，JavaScript 无疑是最重要的编程语言之一。在前端面试中，JS 相关知识点也是考查的重点。本文总结了 JS 常见的面试题，并对相关知识点进行了详细的讲解。希望对大家备战前端面试有所帮助。

this 的应用场景

• 作为普通函数被调用

  function sayHello() {
    console.log(this); // 输出：window
  }
  
  sayHello();
  

  在这个例子中，this 作为普通函数被调用，因此 this 指向全局对象 window。

• 使用 call apply bind

  const obj = {
    name: '小明',
    sayHello() {
      console.log(this.name); // 输出：小明
    }
  };
  
  obj.sayHello(); // 输出：小明
  
  const func = obj.sayHello;
  func(); // 输出：undefined
  
  const newFunc = func.bind(obj);
  newFunc(); // 输出：小明
  
  const newFunc2 = func.apply(obj);
  newFunc2(); // 输出：小明
  
  const newFunc3 = func.call(obj);
  newFunc3(); // 输出：小明
  

  在这个例子中，我们使用 call、apply 和 bind 方法将 sayHello 函数绑定到 obj 对象上，因此 this 指向 obj 对象。

• 作为构造函数被调用

  function Person(name) {
    this.name = name;
  }
  
  const person = new Person('小明');
  console.log(person.name); // 输出：小明
  

  在这个例子中，Person 函数作为构造函数被调用，因此 this 指向新创建的对象 person。

作用域

作用域是 JavaScript 中一个重要的概念。它决定了变量和函数的可见性。在 JavaScript 中，作用域分为全局作用域和局部作用域。

• 全局作用域

  全局作用域是整个脚本或模块的范围。在这个作用域中定义的变量和函数可以在脚本或模块的任何地方访问。

• 局部作用域

  局部作用域是函数或块的作用域。在这个作用域中定义的变量和函数只能在函数或块内部访问。

作用域链是指从当前作用域到全局作用域的一系列作用域。当 JavaScript 引擎在局部作用域中找不到变量或函数时，它会沿着作用域链向上查找，直到在全局作用域中找到该变量或函数。

闭包

闭包是指一个函数及其所在的词法作用域。闭包可以在词法作用域之外访问词法作用域内的变量。

闭包有以下几个特点：

• 闭包可以访问词法作用域内的变量，即使词法作用域已经结束。
• 闭包可以修改词法作用域内的变量。
• 闭包可以返回另一个函数，而这个函数也可以访问词法作用域内的变量。

闭包在 JavaScript 中有很多应用，例如：

• 事件处理程序
• 定时器
• 模块化

原型链

原型链是 JavaScript 中另一个重要的概念。它决定了对象之间的继承关系。

在 JavaScript 中，每个对象都有一个原型对象。原型对象是该对象继承属性和方法的对象。

原型链从一个对象一直向上追溯到 Object.prototype 对象。Object.prototype 对象是所有 JavaScript 对象的原型对象。

原型链的作用是：

• 允许对象继承另一个对象的属性和方法。
• 允许对象访问另一个对象的属性和方法，即使该属性或方法不在该对象本身中定义。

事件循环

事件循环是 JavaScript 中的一个基本机制。它负责处理事件和任务。

事件循环分为两个阶段：

• 执行阶段

  执行阶段负责执行 JavaScript 代码。在这个阶段，JavaScript 引擎会执行当前任务队列中的所有任务。

• 事件处理阶段

  事件处理阶段负责处理事件。在这个阶段，JavaScript 引擎会从事件队列中取出所有事件并执行相应的事件处理程序。

事件循环是异步的，这意味着它不会阻塞 JavaScript 代码的执行。JavaScript 代码可以继续执行，而事件循环会继续处理事件。

Web API

Web API 是 JavaScript 的一组接口，允许 JavaScript 代码与浏览器进行交互。

Web API 包括以下几个部分：

• DOM API

  DOM API 允许 JavaScript 代码访问和修改文档对象模型 (DOM)。

• BOM API

  BOM API 允许 JavaScript 代码访问和修改浏览器对象模型 (BOM)。

• 网络 API

  网络 API 允许 JavaScript 代码与服务器进行通信。

• 图形 API

  图形 API 允许 JavaScript 代码创建和操作图形。

框架和库

框架和库是 JavaScript 的两个重要工具。

• 框架

  框架是为特定的目的而设计的一组类和函数。框架可以帮助开发人员快速构建应用程序。

• 库

  库是一组可重用的代码。库可以帮助开发人员在应用程序中执行常见任务。

性能优化

性能优化是前端开发中一个重要的话题。性能优化可以提高应用程序的运行速度和响应速度。

性能优化的常见方法包括：

• 减少 HTTP 请求

• 使用 CDN

• 使用 Gzip 压缩

• 减少 JavaScript 代码的大小

• 使用缓存