【js面试题】typeof与instanceof的区别

托尼比卡丘

已于 2024-08-16 21:26:16 修改

阅读量123

点赞数 2

分类专栏：每天搞懂一道面试题--JavaScript 文章标签： javascript 开发语言 ecmascript

于 2024-08-16 21:22:29 首次发布

本文链接：https://blog.csdn.net/weixin_44070058/article/details/141268575

版权

每天搞懂一道面试题--JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

typeof 和 instanceof 是 JavaScript 中用于检测数据类型和对象类型的两个操作符，它们各自有不同的特性和应用场景。

typeof

特性

typeof 用于检测基本数据类型（如字符串、数字、布尔值、undefined、symbol、bigInt）。
对于引用类型（如对象、数组、函数等），typeof 通常返回 "object"。
typeof 无法区分不同类型的对象（例如，无法区分数组和普通对象）。

应用场景

当需要快速检查一个变量是否为基本数据类型时使用。
用于检测未声明的变量时，typeof 会返回 "undefined" 而不会抛出错误。

示例

let num = 42;
console.log(typeof num); // 输出 "number"

let str = "Hello";
console.log(typeof str); // 输出 "string"

let func = function() {};
console.log(typeof func); // 输出 "function"

let arr = [];
console.log(typeof arr); // 输出 "object"，区分数组和普通对象需要使用 instanceof 或 Array.isArray

instanceof

特性

instanceof 用于检测一个对象是否为某个构造函数的实例。
它检查的是对象的原型链，可以区分不同类型的对象（如数组、日期对象等）。
instanceof 不能用于基本数据类型检测。

如何工作

instanceof 操作符在内部检查的是对象的原型链。如果在对象的原型链中找到了构造函数的 prototype 属性，那么 instanceof 返回 true；否则返回 false。

object instanceof constructor
object：要检测的对象。
constructor：某个构造函数。
示例
javascript
let arr = [];
console.log(arr instanceof Array); // true，因为数组的原型链中包含 Array.prototype

let obj = {};
console.log(obj instanceof Object); // true，因为普通对象的原型链中包含 Object.prototype

let date = new Date();
console.log(date instanceof Date); // true

let str = "Hello";
console.log(str instanceof String); // false，尽管 str 是通过 String 构造函数创建的，但当使用字面量创建字符串时，JavaScript 会进行类型转换，str 不再是 String 的实例

注意事项

1.基本数据类型：instanceof 不能用来检测基本数据类型（如 number, string, boolean, undefined, null），因为基本数据类型不是对象。对于基本数据类型，通常使用 typeof。
2.原型链变化：如果对象的原型链被修改（例如，通过 Object.setPrototypeOf 或 proto），instanceof 的结果可能会受到影响。
3 . 跨 iframe 检测：在不同 iframe 之间，由于每个 iframe 有自己独立的全局环境和原型链，instanceof 可能无法正确检测跨 iframe 创建的对象。
4. 多重继承：JavaScript 本身不支持多重继承，但通过原型链可以模拟。在模拟多重继承的情况下，instanceof 只能检测到对象原型链中第一个匹配的构造函数。

使用场景

instanceof 最常用于以下场景：

检查一个对象是否是某个特定类的实例。
在处理继承时，确保某个对象符合特定的接口或类型约束。

实现原理

function myInstanceof(left, right) {
    // 获取对象的原型
    let proto = Object.getPrototypeOf(left);

    // 获取构造函数的 prototype 属性
    let prototype = right.prototype;

    // 循环检查原型链
    while (proto) {
        // 如果原型等于构造函数的 prototype，返回 true
        if (proto === prototype) {
            return true;
        }
        // 否则，继续向上查找原型链
        proto = Object.getPrototypeOf(proto);
    }

    // 如果到达原型链的顶端还未找到，则返回 false
    return false;
}

// 测试用例
class MyClass {}
let myInstance = new MyClass();

console.log(myInstanceof(myInstance, MyClass)); // true
console.log(myInstanceof(myInstance, Object)); // true
console.log(myInstanceof(myInstance, Array)); // false

解释

获取原型：使用 Object.getPrototypeOf 方法获取传入对象 left 的原型。
获取构造函数的 prototype：获取 right 构造函数的 prototype 属性。
遍历原型链：通过一个循环，不断获取当前对象的原型（proto），直到找到 null（原型链的顶端）。
比较原型：在循环中，如果当前对象的原型与 right 构造函数的 prototype 相等，说明 left 是 right 的实例，返回 true。
返回结果：如果遍历完原型链都没有找到匹配的 prototype，则返回 false。