JS手写常用代码，带你亲身体验编程精髓

2024-01-07 11:07:12

在前端开发中，手写常用代码是一种深入理解JavaScript机制的绝妙方式。它让我们从零开始构建基本功能，从而对语言的底层工作原理有更深入的认识。本文将带你一一分解几个最常用的JavaScript手写代码，让你亲身体验编程的精髓。

1. 手写new

new关键字是创建对象实例的基石。其内部实现如下：

function newOperator(constructor, ...args) {
  // 1. 创建一个新对象
  const obj = Object.create(constructor.prototype);

  // 2. 将this指向新对象
  const result = constructor.call(obj, ...args);

  // 3. 如果result不是一个对象，则返回obj
  return typeof result === 'object' ? result : obj;
}

2. 手写instanceof

instanceof用于检查一个对象是否属于某个类的实例。其内部实现如下：

function instanceOf(obj, constructor) {
  // 1. 获取对象的原型对象
  const proto = Object.getPrototypeOf(obj);

  // 2. 遍历原型链，检查是否能找到constructor
  while (proto) {
    if (proto === constructor.prototype) {
      return true;
    }
    proto = Object.getPrototypeOf(proto);
  }

  // 3. 未找到，返回false
  return false;
}

3. 数组扁平化

数组扁平化将多维数组转换为一维数组。其实现方式如下：

function flatten(arr) {
  // 1. 创建一个新数组来存储扁平化后的元素
  const result = [];

  // 2. 遍历arr
  for (let i = 0; i < arr.length; i++) {
    // 3. 如果arr[i]是一个数组，则递归调用flatten
    if (Array.isArray(arr[i])) {
      result.push(...flatten(arr[i]));
    } else {
      // 4. 否则，将arr[i]添加到结果中
      result.push(arr[i]);
    }
  }

  // 5. 返回扁平化后的数组
  return result;
}