前端面试题：2023 最新面试题推荐及答案

由于前端技术发展迅速，每年都会有新的面试题出现。以下是 2023 年最新的前端面试题推荐及答案：

请解释一下什么是闭包，并且举个例子。

答：闭包是指函数可以访问在其外部定义的变量，即使函数在其外部被调用。闭包可以用于实现私有变量和函数等。例如：

function outer() {
  var count = 0;
  function inner() {
    count++;
    console.log(count);
  }
  return inner;
}

var fn = outer();
fn(); // 输出 1
fn(); // 输出 2

请解释一下 JavaScript 中的 'this' 关键字，并举个例子。

答：'this' 关键字在 JavaScript 中表示当前执行上下文的对象。'this' 的值取决于函数是如何被调用的。例如：

var obj = {
  name: '小明',
  sayName: function() {
    console.log(this.name);
  }
};

obj.sayName(); // 输出 小明

请解释一下什么是事件冒泡和事件捕获，并举个例子。

答：事件冒泡和事件捕获是指浏览器处理事件时的两种不同方式。事件冒泡是指事件从最具体的元素开始向上传播，直到到达文档的根节点。事件捕获则是相反的，事件从文档的根节点开始，直到到达最具体的元素。例如：

<div id='outer'>
  <div id='inner'>
    <button id='btn'>点击</button>
  </div>
</div>

var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var btn = document.getElementById('btn');

outer.addEventListener('click', function() {
  console.log('outer clicked');
}, true); // 事件捕获

inner.addEventListener('click', function() {
  console.log('inner clicked');
}, true); // 事件捕获

btn.addEventListener('click', function() {
  console.log('button clicked');
}, true); // 事件捕获

在这个例子中，如果点击按钮，会依次输出 'outer clicked'、'inner clicked' 和 'button clicked'，因为事件是从文档的根节点开始向下传播的，然后再从最具体的元素向上传播的。

请解释一下什么是 AJAX，并举个例子。

答：AJAX 是指使用 JavaScript 和 XML（或 JSON）来异步地向服务器发送请求和接收响应。这使得 Web 应用程序可以在不刷新页面的情况下更新页面内容。例如：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.github.com/users/octocat');
xhr.onload = function() {
  if (xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data.name);
  }
};
xhr.send();

这个例子中，我们使用 XMLHttpRequest 对象向 GitHub API 发送 GET 请求，并在收到响应后输出用户名。在这个过程中，页面不会被刷新。