前端面试中JavaScript函数相关问题有哪些？

JavaScript 函数相关问题全梳理

在前端开发领域，JavaScript 是构建动态、交互式网页的核心技术之一，而函数作为 JavaScript 的重要组成部分，在前端面试中常常成为考察的重点，无论是基础概念还是实际应用，函数相关的问题都能很好地检验面试者的 JavaScript 水平，下面就为大家详细梳理前端面试中常见的 JavaScript 函数相关问题。

函数定义相关

在 JavaScript 中，有多种定义函数的方式,这也是面试中常被问到的点。

• 函数声明：使用 function 关键字，function add(a, b) { return a + b; }，函数声明会被提升，这意味着在代码执行前，函数就已经可以被调用,无论它在代码中的位置如何。
• 函数表达式：可以将函数赋值给一个变量，如 const subtract = function(a, b) { return a - b; };，函数表达式不会被提升（或者说是变量提升，函数本身未赋值前为 undefined）,只有在赋值之后才能调用。
• 箭头函数：ES6 引入的箭头函数语法更加简洁，const multiply = (a, b) => a * b;，箭头函数没有自己的 this，它继承自外层作用域，这在处理 this 指向问题时非常有用。

this 指向问题

this 的指向在 JavaScript 函数中是一个复杂且容易出错的地方,也是面试高频考点。

• 全局环境：在全局执行环境中，this 指向全局对象，浏览器中是 window，Node.js 中是 global。
• 函数调用：普通函数调用时，this 也指向全局对象（非严格模式），但在严格模式下，this 为 undefined。
• 方法调用：当函数作为对象的方法被调用时，this 指向该对象。

  const obj = {
  name: 'Object',
  sayName: function() {
    console.log(this.name);
  }
  };
  obj.sayName(); // 输出 'Object'

• 构造函数调用：使用 new 关键字调用函数时，函数作为构造函数，this 指向新创建的对象实例。
• 箭头函数：如前面所说，箭头函数没有自己的 this，它捕获其所在上下文的 this 值作为自己的 this。

闭包相关

闭包是 JavaScript 中一个强大且重要的概念，面试中也经常涉及。 闭包是指那些能够访问自由变量的函数,或者说函数和其周围状态的引用捆绑在一起构成闭包。

function outer() {
  const outerVar = 'I am outside';
  function inner() {
    console.log(outerVar);
  }
  return inner;
}
const innerFunc = outer();
innerFunc(); // 输出 'I am outside'

在这个例子中，inner 函数就是闭包，它能够访问 outer 函数中的 outerVar 变量，闭包常用于创建私有变量、模块化开发等场景，但如果不正确使用,可能会导致内存泄漏。

函数柯里化

函数柯里化（Currying）是一种将多参数函数转换为一系列单参数函数的技术。

function curryAdd(a) {
  return function(b) {
    return a + b;
  };
}
const addFive = curryAdd(5);
console.log(addFive(3)); // 输出 8

柯里化的主要作用是实现参数复用、延迟执行等,在一些函数式编程的场景中非常有用。

防抖与节流

防抖（debounce）和节流（throttle）是两种优化高频触发函数执行的技术，常用于处理滚动、输入等事件。

• 防抖：在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时，搜索框输入时，防止频繁发送请求，可以使用防抖函数。

  function debounce(func, delay) {
  let timer;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
  }

• 节流：规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次能生效，页面滚动事件，使用节流可以避免函数过于频繁地执行。

  function throttle(func, limit) {
  let inThrottle;
  return function() {
    const context = this;
    const args = arguments;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
  }

就是前端面试中常见的 JavaScript 函数相关问题，掌握这些知识点，不仅能帮助你在面试中脱颖而出，更能提升你在实际开发中运用 JavaScript 函数的能力，希望每一位前端开发者都能深入理解这些概念,写出高质量的代码。