3.实现 instanceof

前端面试中常见的基础题之一，莫过于手写 instanceof 和 new 的实现原理。理解这两者，有助于我们深刻掌握 JavaScript 中原型链、构造函数、执行上下文等底层机制。

一、手动实现 instanceof

🧠 实现原理

我们先来复习下原生 instanceof 的判断逻辑：

instance instanceof Constructor 判断的核心是：Constructor.prototype 是否存在于 instance 的原型链上。

也就是说：判断目标对象的原型链中，是否能找到构造函数的 prototype。

🔍 原理图解

✅ 代码实现

function _instanceof(instance, constructor) {
  if (typeof instance !== 'object' || instance === null) return false;

  let proto = Object.getPrototypeOf(instance); // 等价于 instance.__proto__
  while (proto) {
    if (proto === constructor.prototype) return true;
    proto = Object.getPrototypeOf(proto); // 向上一层原型链查找
  }

  return false;
}

🧪 测试用例

console.log(_instanceof([], Array)); // true
console.log(_instanceof({}, Object)); // true
console.log(_instanceof('hello', String)); // false
console.log(_instanceof(null, Object)); // false

二、面试总结句式建议

“我在实现 instanceof 时，是通过遍历目标对象的原型链，看是否能找到目标构造函数的 prototype。而实现 new 则主要是模拟创建对象、连接原型链、绑定 this、处理返回值这几个关键步骤。”

三、补充知识点

✅ instanceof 与 typeof 对比

✅ 特殊情况注意

• null instanceof Object // ❌ false，因为 null 没有原型链

• Symbol() instanceof Symbol // ❌ false，基本类型不是对象

• 跨 iframe 的对象 instanceof 判断可能失败，因为原型链是跨作用域隔离的

📌 小结

📎 参考资料

• MDN - instanceof

• MDN - new operator

🧠 如果你觉得这篇文章对你有帮助，欢迎点赞 👍 收藏 ⭐ 评论 💬 你的鼓励是我持续分享的最大动力！