【高频考点精讲】手写instanceof运算符：深入理解原型链检测机制，掌握类型判断原理

手写instanceof运算符：深入理解原型链检测机制，掌握类型判断原理

大家好啊，我是全栈老李。今天咱们来聊聊JavaScript中一个看似简单实则暗藏玄机的小东西——instanceof运算符。这东西平时用起来挺顺手，但真要让你手写一个，估计不少同学都得挠头。别急，跟着老李的思路走，保证让你彻底搞明白。

先说说instanceof是干嘛的。简单来说，它就是用来检查一个对象是不是某个构造函数的实例。比如：

function Person() {
            }
const p = new Person()
console.log(p instanceof Person) // true

看起来挺简单对吧？但它的底层原理可一点都不简单，涉及到原型链的查找机制。咱们先来解剖一下它的工作原理。

原型链检测机制

instanceof的核心逻辑是这样的：它沿着对象的原型链向上查找，看看能不能找到构造函数的prototype属性。如果能找到就返回true，直到原型链尽头（null）还没找到就返回false。

举个例子，假设我们有个数组：

const arr = []
console.log(arr instanceof Array) // true
console.log(arr instanceof Object) // 也是true

为什么arr instanceof Object也是true？因为数组的原型链是这样的：arr -> Array.prototype -> Object.prototype -> null。顺着这条链能找到Object.prototype，所以返回true。

手写实现

理解了原理，咱们就可以动手实现一个自己的instanceof了。老李给你写个完整版：

/**
 * 自定义实现instanceof运算符
 * @param {*} instance 要检测的对象
 * @param {Function} constructor 构造函数
 * @returns {boolean} 是否是构造函数的实例
 * 全栈老李原创实现，转载请注明出处
 */
function myInstanceof(instance, constructor) {
            
    // 基本数据类型直接返回false
    if (instance === null || typeof instance !== 'object' && typeof instance !== 'function') {
            
        return false
    }
    
    // 获取对象的原型
    let proto = Object.getPrototypeOf(instance)
    
    // 沿着原型链向上查找
    while (proto !== null) {
            
        // 如果找到了构造函数的prototype
        if (proto === constructor.prototype) {
            
            return true
        }
        // 继续向上查找
        proto = Object.getPrototypeOf(proto)
    }
    
    // 没找到返回false
    return false
}

// 测试用例
function Person() {
            }
const p = new Person()
console.log(myInstanceof(p, Person)) // true
console.log(myInstanceof(p, Object)) // true
console.log(myInstanceof([], Array)) // true
console.log(myInstanceof(123, Number)) // false，注意和原生instanceof的区别

这个实现有几个关键点需要注意：

基本数据类型（非object/function）直接返回false
使用Object.getPrototypeOf获取对象的原型
循环向上查找原型链
找到匹配就返回true，到null还没找到就返回false

使用场景

instanceof在实际开发中主要有这些用途：

类型检查：比typeof更精确的对象类型判断

if (value instanceof Date) {
              
    // 处理日期逻辑
}

框架/库开发：验证参数类型

function processInput(input) {
              
    if (!(input instanceof MyCustomClass)) {
              
        throw new Error('Invalid input type')
    }
    // ...
}

继承关系验证：检查对象是否属于某个类或其父类

不过要注意，instanceof在多全局对象环境（比如iframe）中可能会失效，因为不同环境的构造函数引用不同。

边界情况

咱们的实现和原生instanceof还有些细微差别：

对于基本包装类型（如new Number(123)），原生instanceof会返回true，但我们的实现也会返回true
对于Object.create(null)创建的对象，两者都会返回false
对于Symbol.hasInstance自定义的情况，原生会遵循自定义逻辑，我们的实现则不会

课后作业

来道面试题练练手吧！下面代码的输出是什么？为什么？

function Foo() {
            }
function Bar() {
            }
Bar.prototype = Object.create(Foo.prototype)

const b = new Bar()

console.log(b instanceof Bar) // ?
console.log(b instanceof Foo) // ?
console.log(Bar instanceof Foo) // ?
console.log(Bar instanceof Function) // ?
console.log(Function instanceof Object) // ?
console.log(Object instanceof Function) // ?
console.log(Function instanceof Function) // ?

把你的答案写在评论区，老李会随机抽几位同学的答案进行点评哦～这道题涵盖了原型链最绕的几个点，能全答对说明你对原型链的理解已经相当到位了！