返回

深入解析JavaScript常见笔试题:高效解决,彰显编程功底

前端

深入掌握 JavaScript 常见笔试题,提升求职竞争力

1. Promise 模拟实现

定义: Promise 是一种强大的工具,用于处理异步操作,它可以使代码更清晰、更易于管理。模拟实现 Promise 类可以测试您对 Promise 机制的深刻理解。

解决方案: 您需要创建一个 Promise 类,并实现 resolve() 和 reject() 方法来解决或拒绝 Promise。然后定义 then() 方法,当 Promise 被解决时,它将执行成功回调,当 Promise 被拒绝时,它将执行失败回调。

class Promise {
  constructor(executor) {
    this.state = 'pending';
    this.result = undefined;
    executor(resolve, reject);
  }

  resolve(result) {
    if (this.state === 'pending') {
      this.state = 'fulfilled';
      this.result = result;
      this.onFulfilledCallbacks.forEach((cb) => cb(result));
    }
  }

  reject(error) {
    if (this.state === 'pending') {
      this.state = 'rejected';
      this.result = error;
      this.onRejectedCallbacks.forEach((cb) => cb(error));
    }
  }

  then(onFulfilled, onRejected) {
    return new Promise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        resolve(onFulfilled(this.result));
      } else if (this.state === 'rejected') {
        reject(onRejected(this.result));
      } else {
        this.onFulfilledCallbacks.push(onFulfilled);
        this.onRejectedCallbacks.push(onRejected);
      }
    });
  }
}

2. Promise.all 实现

定义: Promise.all 是一种有用的方法,它允许您等待一组 Promise 同时解决。实现 Promise.all 可以表明您对 Promise 的高级用法和异步编程的理解。

解决方案: 您可以创建 Promise.all() 方法,它接收一个 Promise 数组作为参数。该方法创建一个结果数组和一个计数器。然后,它遍历 Promise 数组,为每个 Promise 添加一个 then() 方法,并在该 Promise 解决时更新结果数组。当计数器等于 Promise 数组的长度时,该方法将返回结果数组。

Promise.all = (promises) => {
  const result = [];
  let count = 0;
  return new Promise((resolve, reject) => {
    promises.forEach((promise, i) => {
      promise
        .then((res) => {
          result[i] = res;
          count++;
          if (count === promises.length) {
            resolve(result);
          }
        })
        .catch(reject);
    });
  });
};

3. call、apply 和 bind 实现

定义: call、apply 和 bind 方法使您可以控制函数的执行上下文。实现这些方法可以体现您对函数作用域和 JavaScript 语言机制的深入了解。

解决方案:

call 方法: 将一个函数绑定到一个对象上,并以该对象作为 this 调用该函数。

Function.prototype.call = function (context, ...args) {
  context.fn = this;
  const result = context.fn(...args);
  delete context.fn;
  return result;
};

apply 方法: 与 call 类似,但将参数作为数组传递。

Function.prototype.apply = function (context, args) {
  context.fn = this;
  const result = context.fn(...args);
  delete context.fn;
  return result;
};

bind 方法: 返回一个新函数,该函数以指定的 this 值绑定到原始函数。

Function.prototype.bind = function (context, ...args) {
  return (...args2) => this.apply(context, [...args, ...args2]);
};

4. 继承方法

定义: 继承是创建新对象的强大工具,这些新对象可以从现有对象继承属性和方法。实现一种继承方法可以展示您对 JavaScript 面向对象编程的掌握。

解决方案: 您可以使用 Object.create() 方法或原型链来创建继承机制。

Object.create() 方法:

const parent = {
  prop: 'parent property',
};

const child = Object.create(parent);
child.prop2 = 'child property';

原型链:

function Parent() {
  this.prop = 'parent property';
}

function Child() {
  this.prop2 = 'child property';
}

Child.prototype = new Parent();

结论

掌握 JavaScript 常见笔试题对于在技术面试中脱颖而出至关重要。通过理解本文所述的概念,您将为在开发人员求职过程中遇到的各种挑战做好准备。

常见问题解答

  1. 什么是 JavaScript 中的 Promise?
    Promise 是表示异步操作的最终完成或失败的一种对象。

  2. 如何实现 Promise.race()?
    Promise.race() 返回一个 Promise,该 Promise 在一组 Promise 中的任何一个被解决或拒绝时解决或拒绝。

  3. call、apply 和 bind 之间有什么区别?
    call 和 apply 都立即调用函数,而 bind 返回一个绑定到指定 this 值的新函数。

  4. 如何创建 JavaScript 类?
    您可以使用 ES6 的 class 或使用构造函数和原型链。

  5. 什么是 JavaScript 中的原型链?
    原型链是一种将对象链接在一起的机制,以便一个对象可以继承另一个对象的属性和方法。