前端经典面试题合集, JavaScript

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their containing scope during the compile phase. However, only the declarations are hoisted, not the initializations. Example: console.log(x); var x = 5; // Output: undefined because the declaration var x is hoisted to the top.

var is function-scoped and can be re-declared and updated. let is block-scoped and can be updated but not re-declared. const is block-scoped and cannot be updated or re-declared. Example: { var a = 1; let b = 2; const c = 3; }

In JavaScript, objects can inherit properties and methods from other objects via the prototype chain. This is called prototypal inheritance. Example: function Person(name) { this.name = name; } Person.prototype.greet = function() { console.log('Hello ' + this.name); }; var john = new Person('John'); john.greet(); // Logs 'Hello John'.

async/await are syntactic sugars built on promises to make asynchronous code look more like synchronous code, making it easier to read and write. Example: async function fetchData() { try { let response = await fetch('url'); let data = await response.json(); console.log(data); } catch (error) { console.error(error); } }

'this' refers to the object it belongs to. In a method, 'this' refers to the owner object. In a function, 'this' refers to the global object (in non-strict mode) or undefined (in strict mode). Example: var obj = { a: 10, b: function() { console.log(this.a); } }; obj.b(); // Logs 10.

JavaScript 中的作用域是指程序中变量、函数和对象可访问的范围。主要有全局作用域、函数作用域和块级作用域（在 ES6 中引入）。

 
// 全局作用域
var globalVar = 'I am global';
function foo() {
  // 函数作用域
  var functionVar = 'I am local';
  if (true) {
    // 块级作用域
    let blockVar = 'I am block-scoped';
  }
}
 

柯里化是将一个接受多个参数的函数转化为一系列接受单一参数的函数的过程。实现示例：

 
function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function(...args2) {
        return curried.apply(this, args.concat(args2));
      };
    }
  };
}
// 使用示例
function sum(a, b, c) {
  return a + b + c;
}
let curriedSum = curry(sum);
console.log(curriedSum(1)(2)(3)); // 输出 6
 

JavaScript 中的垃圾回收机制主要是通过标记清除(Mark-and-Sweep)算法实现的。它会定期找出那些不再使用的变量，并释放它们所占用的内存。

Hoisting是JavaScript的行为，在代码执行之前将变量和函数声明移到其所在作用域的顶部。需要注意的是，只有声明会被提升，赋值不会。

this关键字的值取决于函数的调用方式。在全局上下文中，this指向全局对象。在对象方法中，this指向调用该方法的对象。在构造函数中，this指向新创建的实例对象。在箭头函数中，this继承自外层作用域。

事件委托是一种将事件处理程序添加到一个父元素上，而不是每个子元素的技术。事件处理程序会利用事件冒泡，在事件冒泡过程中捕获事件。这种方式可以提高性能，特别是在有大量子元素时。

可以通过使用Promise、async/await或者生成器（Generators）来避免回调地狱。Promise和async/await使代码看起来更像同步代码，生成器则通过yield关键字可以中断和恢复执行。

块级作用域是在一个代码块（如 if、for、while 块）中声明的变量，不能在块外访问。let 和 const 是 ES6 引入的用于块级作用域的变量声明方式。块级作用域的重要性在于，它可以避免变量提升导致的意外行为，确保变量只在需要的地方有效。

ES6 引入了默认参数功能，允许在函数定义时为参数指定默认值，从而避免在函数调用时未传递参数时的错误。剩余参数（rest parameter）允许将函数的剩余参数收集为一个数组，从而支持不定参数的函数处理。这些特性极大地增强了函数定义的灵活性和简洁性。

模块化是将代码分割成独立的模块，以提高代码的可维护性和重用性。ES6 引入了 import 和 export 关键字，用于模块间的导入和导出，使得 JavaScript 自带模块化支持，而不再依赖外部工具如 CommonJS 或 AMD。这种原生支持使得代码的组织和依赖管理更加方便和标准化。

async/await 是基于 Promise 的语法糖，旨在简化异步代码的书写。通过将函数标记为 async，可以在该函数内部使用 await 来等待 Promise 的结果。相比于直接使用 then 和 catch，async/await 使得异步代码看起来更像同步代码，从而更容易编写和阅读。

浅拷贝仅拷贝对象的第一层属性，如果属性是引用类型（例如对象或数组），则只会拷贝引用，不会拷贝引用指向的实际内容。而深拷贝则会递归地拷贝对象的所有层级的属性，确保拷贝后的对象与原对象完全独立。常用的深拷贝方法有递归、使用JSON.parse(JSON.stringify(obj))以及一些第三方库。

this关键字在JavaScript中指代函数执行时的上下文对象，其值在不同的调用场景下会有所不同。在全局环境中，this指代全局对象（在浏览器中是window对象）。在对象方法中，this指代该方法所属的对象。在事件处理中，this通常指向触发事件的元素。使用箭头函数时，this会绑定到函数定义时的上下文，而不是调用时的上下文。

Promise是JavaScript中用于处理异步操作的一种机制。它表示一个操作的最终完成（或失败）及其结果值。Promise可以解决回调地狱问题，使代码更具可读性和维护性。常见的使用场景包括网络请求、文件读取等需要等待结果的操作。通过then``, catch 和 finally方法可以链式处理Promise的结果和错误。

箭头函数是ES6中引入的一种简洁的函数定义方式。它与普通函数的区别主要有以下几点：1. 语法更简洁，省略了function关键字。2. 箭头函数没有自己的this，它会捕获定义时的this值。3. 不能用作构造函数，不能使用new关键字。4. 没有arguments对象，但可以使用REST参数来代替。

JavaScript中的异步编程通常通过回调函数、Promise、async/await等模式来实现。回调函数是一种最简单的异步处理方式，但容易造成回调地狱。Promise通过链式调用改善了回调函数的层级问题，适合处理依赖关系明确的异步操作。async/await是基于Promise的语法糖，使异步代码看起来更像同步代码，提高了代码的可读性和维护性。