面试 JavaScript 框架八股文十问十答第八期

面试 JavaScript 框架八股文十问十答第八期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）实现call、apply 及 bind 函数

下面是简单的 JavaScript 实现 call、apply 和 bind 函数的示例：

// 实现 call 函数
Function.prototype.myCall = function(context, ...args) {
  // 确保传递的上下文是对象，如果未传递或传递的是 null 或 undefined，则默认为全局对象
  context = context || window;
  
  // 在传入的上下文对象中创建一个临时函数，以便调用原函数
  context.tempFunction = this;

  // 调用原函数
  const result = context.tempFunction(...args);

  // 删除临时函数
  delete context.tempFunction;

  // 返回原函数的执行结果
  return result;
};

// 实现 apply 函数
Function.prototype.myApply = function(context, argsArray) {
  // 确保传递的上下文是对象，如果未传递或传递的是 null 或 undefined，则默认为全局对象
  context = context || window;

  // 在传入的上下文对象中创建一个临时函数，以便调用原函数
  context.tempFunction = this;

  // 调用原函数
  const result = context.tempFunction(...argsArray);

  // 删除临时函数
  delete context.tempFunction;

  // 返回原函数的执行结果
  return result;
};

// 实现 bind 函数
Function.prototype.myBind = function(context, ...args) {
  const fn = this;
  
  // 返回一个新的函数
  return function(...newArgs) {
    // 在调用时使用 myCall 方法，传入指定的上下文和参数
    return fn.myCall(context, ...args, ...newArgs);
  };
};

2）异步编程的实现方式？

在 JavaScript 中，异步编程的实现方式有多种，包括回调函数、Promise、Generator、Async/Await 等。下面是一些常见的异步编程实现方式：

• 回调函数（Callback）： 将函数作为参数传递给另一个函数，在异步操作完成后调用该函数。
• Promise： 使用 Promise 对象进行异步操作的管理，通过 then() 方法处理异步操作的结果，可以链式调用多个异步操作。
• Generator： 使用 Generator 函数可以暂停和恢复代码执行，配合遍历器对象可实现异步操作的同步化写法。
• Async/Await： 是基于 Promise 的一种异步编程语法糖，使用 async 和 await 关键字让异步代码看起来像同步代码，更易读和维护。

3）setTimeout、Promise、Async/Await 的区别

• setTimeout： 是 JavaScript 的一个全局函数，用于在一定的时间后执行指定的代码。
• Promise： 是 ECMAScript 6 新增的一个异步编程解决方案，用于处理异步操作。它可以将异步操作的成功结果和失败原因封装成一个 Promise 对象，可以链式调用 then() 方法处理异步操作的结果。
• Async/Await： 是 ECMAScript 2017 的新增特性，用于简化 Promise 的使用。async 函数声明异步函数，可以在函数内部使用 await 关键字等待 Promise 对象的处理结果，使异步代码看起来更像同步代码。

主要区别如下：

• setTimeout： 是用于延迟执行一段代码，是一种简单的定时器机制。
• Promise： 是一种用于处理异步操作的对象，可以处理异步操作的成功或失败。
• Async/Await： 是一种基于 Promise 的异步编程语法糖，可以更方便地编写异步代码，使其看起来像同步代码一样易读易维护。

4）对Promise的理解

Promise（承诺）： Promise 是 JavaScript 中用于处理异步操作的一种机制，它表示一个异步操作的最终完成或失败，并返回相应的结果。Promise 对象可以处于以下三种状态之一：

• Pending（进行中）： 初始状态，表示异步操作正在进行中，尚未完成。
• Fulfilled（已完成）： 表示异步操作已经成功完成，可以获取到异步操作的结果。
• Rejected（已失败）： 表示异步操作失败，无法获得异步操作的结果。

Promise 对象具有以下特点：

• Promise 对象一旦状态改变，就会凝固，无法再次改变。
• Promise 支持链式调用，可以通过 then() 方法指定异步操作成功和失败时的回调函数。

5）Promise的基本用法

下面是 Promise 的基本用法：

// 创建一个 Promise 对象
const myPromise = new Promise((resolve, reject) => {
  // 执行异步操作
  setTimeout(() => {
    const randomNumber = Math.random();
    if (randomNumber > 0.5) {
      // 异步操作成功，调用 resolve 方法
      resolve(randomNumber);
    } else {
      // 异步操作失败，调用 reject 方法
      reject(new Error('Random number is less than 0.5'));
    }
  }, 1000);
});

// 使用 then() 方法处理异步操作的结果
myPromise.then(
  // 处理成功情况
  (result) => {
    console.log('Async operation succeeded:', result);
  },
  // 处理失败情况
  (error) => {
    console.error('Async operation failed:', error);
  }
);

6）Promise解决了什么问题

Promise 解决了 JavaScript 异步编程中的回调地狱（Callback Hell）问题。在以往的回调函数中，多个异步操作嵌套使用时，代码结构会变得非常复杂和难以维护，容易出现回调地狱的情况。而使用 Promise 可以通过链式调用 then() 方法来处理异步操作的结果，使代码更加清晰和可读，减少了回调嵌套的层级，提高了代码的可维护性和可扩展性。

7）Promise.all和Promise.race的区别的使用场景

• Promise.all： 接受一个包含多个 Promise 的可迭代对象（如数组），返回一个新的 Promise。这个新的 Promise 在传入的所有 Promise 都成功完成时才会被成功解决，如果有一个 Promise 失败，则整个 Promise.all 将被拒绝。

  const promises = [promise1, promise2, promise3];
  
  Promise.all(promises)
    .then(results => {
      // 所有 Promise 都成功，results 是一个包含所有成功结果的数组
    })
    .catch(error => {
      // 任何一个 Promise 失败，error 是第一个失败 Promise 的原因
    });
  

• Promise.race： 也接受一个包含多个 Promise 的可迭代对象，返回一个新的 Promise。这个新的 Promise 在传入的 Promise 中有一个率先解决（无论是成功还是失败），则它就会解决或拒绝。

  const promises = [promise1, promise2, promise3];
  
  Promise.race(promises)
    .then(result => {
      // 第一个率先解决的 Promise 成功，result 是第一个成功的结果
    })
    .catch(error => {
      // 第一个率先解决的 Promise 失败，error 是第一个失败 Promise 的原因
    });
  

使用场景：

• Promise.all： 当需要等待多个异步操作都完成，并且需要所有结果时，例如同时请求多个资源时。
• Promise.race： 当只需要获取最先完成的异步操作结果，例如设置一个超时机制，只关心最先返回的结果。

8）对async/await 的理解

• async： async 关键字用于声明一个函数是异步的。异步函数会返回一个 Promise 对象，可以使用 await 关键字在异步函数内部等待其他 Promise 对象的解决或拒绝。
• await： await 关键字用于暂停异步函数的执行，等待 Promise 对象解决，然后返回解决的结果。await 只能在异步函数内部使用。

async function example() {
  const result = await someAsyncFunction();
  console.log(result);
}

9）await 到底在等啥？

await 关键字等待的是一个 Promise 对象的解决。当在异步函数中使用 await 时，它会暂停函数的执行，直到等待的 Promise 对象解决为止。如果等待的 Promise 对象解决了，await 表达式会返回解决的值；如果 Promise 对象被拒绝，await 表达式会抛出拒绝的原因。

async function example() {
  try {
    const result = await someAsyncFunction(); // 等待 someAsyncFunction 的解决或拒绝
    console.log(result); // 如果解决，打印解决的值
  } catch (error) {
    console.error(error); // 如果拒绝，打印拒绝的原因
  }
}

10）async/await的优势

• 清晰简洁： 使用 async/await 使异步代码看起来更像同步代码，提高了代码的可读性和可维护性。
• 错误处理： 使用 try/catch 块捕获异步操作的错误，使错误处理更加直观，而不需要使用回调函数或链式的 .catch()。
• 逻辑结构： 使用 async/await 可以更自然地表示异步操作的逻辑结构，避免了回调地狱，使代码层次更加清晰。
• 同步风格： 使得异步代码可以按照同步的方式编写，提高了代码的可读性，也使得编写异步代码更加容易。

开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star！

⭐点赞⭐收藏⭐不迷路！⭐