前端面试题（十六）

news2024/10/11 11:22:12

89. 什么是闭包？

闭包的定义：
闭包是指一个函数可以访问它的词法作用域中的变量，即使这个函数在它的词法作用域之外被调用。换句话说，闭包使得函数可以记住并访问它所在的作用域中的变量，即使该函数在这个作用域之外执行。
闭包的用途：
1. 数据的持久化：闭包可以用于创建私有变量或持久化状态。
2. 函数工厂：可以用来创建不同作用域中的函数。
3. 回调函数：在异步操作或事件处理程序中使用闭包，以保持对外部变量的访问。

闭包示例：

function outerFunction(outerVariable) {
  return function innerFunction(innerVariable) {
    console.log('Outer Variable:', outerVariable);
    console.log('Inner Variable:', innerVariable);
  };
}

const newFunction = outerFunction('外部');
newFunction('内部');

在这个例子中，innerFunction 是一个闭包，因为它可以访问 outerFunction 的 outerVariable 变量，即使 outerFunction 已经执行完毕。

90. 作用域链

作用域链的定义：
当访问一个变量时，JavaScript 引擎会首先在当前作用域中查找该变量。如果找不到，它会沿着作用域链向外层作用域查找，直到全局作用域。如果仍未找到，则会抛出 ReferenceError。
作用域链的结构：
1. 当前函数作用域。
2. 外层函数作用域（如果有的话）。
3. 全局作用域。

作用域链示例：

const globalVar = 'global';

function outerFunction() {
  const outerVar = 'outer';
  
  function innerFunction() {
    const innerVar = 'inner';
    console.log(globalVar); // 'global'
    console.log(outerVar);  // 'outer'
    console.log(innerVar);  // 'inner'
  }
  
  innerFunction();
}

outerFunction();

在这个例子中，innerFunction 可以访问全局变量 globalVar，外层函数 outerVar，以及自身作用域中的 innerVar，这就是作用域链的工作方式。

91. 什么是事件循环（Event Loop）？

事件循环的定义：
事件循环 是 JavaScript 处理异步操作的机制。JavaScript 是单线程语言，它通过事件循环机制使得异步任务不会阻塞主线程，从而实现非阻塞的并发执行。
事件循环的工作原理：
1. 同步任务 被直接放入主线程执行栈中，按顺序执行。
2. 异步任务（如定时器、网络请求）会被放入 任务队列 中，当主线程执行栈为空时，事件循环会检查任务队列，依次执行任务队列中的任务。
微任务与宏任务：
- 宏任务 (macro task)：如 setTimeout、setInterval、I/O 操作等。
- 微任务 (micro task)：如 Promise.then()、MutationObserver 等。
- 每次事件循环会先清空所有微任务队列，然后再执行一个宏任务。

事件循环示例：

console.log('Start');

setTimeout(() => {
  console.log('宏任务：setTimeout');
}, 0);

Promise.resolve().then(() => {
  console.log('微任务：Promise.then');
});

console.log('End');

执行结果：

Start
End
微任务：Promise.then
宏任务：setTimeout

解释：同步任务先执行，随后执行所有微任务，最后执行宏任务。

92. 什么是跨域？如何解决跨域问题？

跨域的定义：
跨域是指浏览器执行 XMLHttpRequest 或 Fetch 请求时，因 同源策略 限制，不允许访问不同源的资源。同源指协议、域名、端口号必须一致，跨域即其中任一不一致。
跨域的常见解决方法：
1. JSONP (JSON with Padding)：
  - 利用 <script> 标签不受跨域限制的特点，通过动态插入 <script> 标签来请求跨域资源。服务端返回一个包含回调函数的 JSON 数据。
  - 缺点：只支持 GET 请求。
```
<script>
  function handleResponse(data) {
    console.log(data);
  }
</script>
<script src="https://example.com/data?callback=handleResponse"></script>
```
2. CORS (Cross-Origin Resource Sharing)：
  - 服务端设置响应头 Access-Control-Allow-Origin 来允许跨域请求。
  - 示例：
```
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type
```
3. 代理服务器：
  - 通过设置一个代理服务器，由同源的服务器发送请求到不同源的服务器，从而实现跨域。
4. 服务器端转发：
  - 在服务器上设置路由，服务器请求跨域资源并将结果返回给客户端，从而避免浏览器的跨域限制。

93. 防抖与节流

防抖 (Debounce)：
防抖是一种函数优化技术，用于限制函数的执行频率。防抖的关键在于，如果在一定时间内函数再次被触发，计时器将重新计时。适用于输入框输入或窗口调整等频繁触发的事件。

防抖实现：

function debounce(func, wait) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

window.addEventListener('resize', debounce(() => {
  console.log('窗口大小已调整');
}, 500));

节流 (Throttle)：
节流同样是一种函数优化技术，但与防抖不同，节流限制的是一段时间内函数只会执行一次。适用于页面滚动或鼠标移动等持续触发的事件。

节流实现：

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

window.addEventListener('scroll', throttle(() => {
  console.log('页面正在滚动');
}, 1000));

94. Set 和 Map 的区别

Set：
- Set 是一种无序且唯一的集合，可以存储任何类型的值。
- 常见方法：
  - add(value)：向 Set 中添加值。
  - has(value)：检查值是否存在于 Set 中。
  - delete(value)：从 Set 中删除值。
- Set 示例：
```
const set = new Set();
set.add(1);
set.add(2);
set.add(2); // 重复值不会添加
console.log(set.has(1)); // true
set.delete(1);
console.log(set); // Set { 2 }
```
Map：
- Map 是一种键值对集合，允许任何类型的键。
- 常见方法：
  - set(key, value)：向 Map 中添加键值对。
  - get(key)：根据键获取值。
  - delete(key)：删除键值对。
- Map 示例：
```
const map = new Map();
map.set('name', 'Alice');
map.set('age', 25);
console.log(map.get('name')); // 'Alice'
map.delete('age');
console.log(map); // Map { 'name' => 'Alice' }
```