前端高频手写题

Function.prototype.myCall = function (ctx, ...args) {
  ctx = ctx == null ? globalThis : Object(ctx);
  const key = Symbol('fn');
  Object.defineProperty(ctx, key, { value: this, configurable: true });
  const ret = ctx[key](...args); delete ctx[key];
  return ret;
};
Function.prototype.myApply = function (ctx, args = []) { return this.myCall(ctx, ...args); };
Function.prototype.myBind = function (ctx, ...preset) {
  const fn = this;
  function bound(...args) { return fn.apply(this instanceof bound ? this : ctx, [...preset, ...args]); }
  bound.prototype = Object.create(fn.prototype || null);
  return bound;
};

5. new

• 题目：创建实例、绑定原型、执行构造函数、按返回值决定结果。
• 易错：返回对象要以返回值为准；返回基本类型要忽略。
• 追问：new.target 有什么用？

function myNew(Ctor, ...args) {
  if (typeof Ctor !== 'function') throw new TypeError('not a constructor');
  const obj = Object.create(Ctor.prototype);
  const ret = Ctor.apply(obj, args);
  return ret && (typeof ret === 'object' || typeof ret === 'function') ? ret : obj;
}

6. instanceof

• 题目：沿原型链查找 Ctor.prototype。
• 易错：基本类型返回 false；右操作数必须是函数。
• 追问：Symbol.hasInstance 如何自定义？和 isPrototypeOf 的区别？

function myInstanceof(obj, Ctor) {
  if (obj === null || (typeof obj !== 'object' && typeof obj !== 'function')) return false;
  let proto = Object.getPrototypeOf(obj);
  while (proto) { if (proto === Ctor.prototype) return true; proto = Object.getPrototypeOf(proto); }
  return false;
}

7. 柯里化

• 题目：把多参函数转成分批传参，参数够了才执行。
• 易错：fn.length 不含默认参数与 rest；丢失 this。
• 追问：add(1)(2)(3) 与 add(1, 2)(3) 都要支持，怎么写？

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) return fn.apply(this, args);
    return (...rest) => curried.apply(this, [...args, ...rest]);
  };
}

8. 发布订阅

• 题目：事件与回调映射，支持 on / off / once / emit。
• 易错：emit 遍历时增删导致漏发；once 需先解绑。
• 追问：和观察者模式的区别？如何做优先级？

class EventEmitter {
  constructor() { this.map = new Map(); }
  on(type, fn) {
    if (!this.map.has(type)) this.map.set(type, new Set());
    this.map.get(type).add(fn); return () => this.off(type, fn);
  }
  off(type, fn) { this.map.get(type)?.delete(fn); }
  once(type, fn) { const wrap = (...a) => { this.off(type, wrap); fn(...a); }; return this.on(type, wrap); }
  emit(type, ...args) { [...(this.map.get(type) || [])].forEach((fn) => fn(...args)); }
}

9. Promise

• 题目：状态机加 then 链，回调异步，支持值穿透。
• 易错：状态单向流转；then 返回新实例；回调进微任务。
• 追问：回调为什么必须异步？thenable 与 Promise 的区别？

class MyPromise {
  constructor(executor) {
    this.state = 'pending'; this.value = undefined; this.cbs = [];
    const reject = (e) => this.settle('rejected', e);
    const resolve = (v) => {
      if (v === this) throw new TypeError('chaining cycle');
      if (v instanceof MyPromise) return v.then(resolve, reject);
      this.settle('fulfilled', v);
    };
    try { executor(resolve, reject); } catch (e) { reject(e); }
  }
  settle(state, value) {
    if (this.state !== 'pending') return;
    this.state = state; this.value = value;
    queueMicrotask(() => this.cbs.splice(0).forEach((run) => run()));
  }
  then(onFulfilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      this.cbs.push(() => {
        const fn = this.state === 'fulfilled' ? onFulfilled : onRejected;
        if (typeof fn !== 'function') return this.state === 'fulfilled' ? resolve(this.value) : reject(this.value);
        try { resolve(fn(this.value)); } catch (e) { reject(e); }
      });
      if (this.state !== 'pending') queueMicrotask(() => this.cbs.splice(0).forEach((run) => run()));
    });
  }
  catch(onRejected) { return this.then(null, onRejected); }
}

10. Promise.all / allSettled

• 题目：all 任一失败即失败；allSettled 永远成功。
• 易错：空数组立即 resolve；结果顺序按输入；非 Promise 要包裹。
• 追问：race 与 any 的区别？

const promiseAll = (list) => new Promise((resolve, reject) => {
  const items = Array.from(list), result = new Array(items.length); let count = 0;
  if (!items.length) return resolve(result);
  items.forEach((item, i) => {
    Promise.resolve(item).then((v) => { result[i] = v; if (++count === items.length) resolve(result); }, reject);
  });
});
const promiseAllSettled = (list) => Promise.all(Array.from(list, (item) => Promise.resolve(item).then(
  (value) => ({ status: 'fulfilled', value }), (reason) => ({ status: 'rejected', reason }))));

11. 数组扁平化与去重

• 题目：按深度拍平数组，并对结果去重。
• 易错：depth 为 0 要浅拷贝而非返回原引用。
• 追问：递归爆栈怎么办？按字段去重怎么写？

function flatten(arr, depth = Infinity) {
  if (depth < 1) return arr.slice();
  return arr.reduce((acc, item) => acc.concat(Array.isArray(item) ? flatten(item, depth - 1) : item), []);
}
const unique = (arr) => [...new Set(arr)];
const uniqueBy = (arr, keyOf) => {
  const seen = new Set();
  return arr.filter((item) => { const k = keyOf(item); if (seen.has(k)) return false; seen.add(k); return true; });
};

12. Object.create 与继承

• 题目：手写原型创建，并实现寄生组合继承。
• 易错：proto 为 null 时不能直接 new；要修正 constructor。
• 追问：class extends 编译后是什么？

function myCreate(proto) {
  if (proto !== null && typeof proto !== 'object' && typeof proto !== 'function') throw new TypeError('bad proto');
  function F() {}
  F.prototype = proto; return new F();
}
function inherit(Child, Parent) {
  Child.prototype = myCreate(Parent.prototype);
  Child.prototype.constructor = Child;
  Object.setPrototypeOf(Child, Parent);
}

13. LRU 缓存

• 题目：容量满时淘汰最久未使用的键，读写 O(1)。
• 易错：get 命中要刷新顺序；容量为 0 要直接返回。
• 追问：不用 Map 怎么手写？

class LRUCache {
  constructor(capacity) { this.capacity = capacity; this.map = new Map(); }
  get(key) {
    if (!this.map.has(key)) return -1;
    const value = this.map.get(key);
    this.map.delete(key); this.map.set(key, value);
    return value;
  }
  put(key, value) {
    this.map.delete(key); this.map.set(key, value);
    if (this.map.size > this.capacity) this.map.delete(this.map.keys().next().value);
  }
}

关联阅读

• JS 面试
• 作业队列与事件循环
• 面试专项总览