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

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

typeof

特性
  • typeof 用于检测基本数据类型(如字符串、数字、布尔值、undefined、symbol、bigInt)。
  • 对于引用类型(如对象、数组、函数等),typeof 通常返回 "object"
  • typeof 无法区分不同类型的对象(例如,无法区分数组和普通对象)。
应用场景
  • 当需要快速检查一个变量是否为基本数据类型时使用。
  • 用于检测未声明的变量时,typeof 会返回 "undefined" 而不会抛出错误。
示例
javascript 复制代码
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。

javascript 复制代码
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 创建的对象。

  1. 多重继承:JavaScript 本身不支持多重继承,但通过原型链可以模拟。在模拟多重继承的情况下,instanceof 只能检测到对象原型链中第一个匹配的构造函数。
使用场景

instanceof 最常用于以下场景:

检查一个对象是否是某个特定类的实例。

在处理继承时,确保某个对象符合特定的接口或类型约束。

实现原理
javascript 复制代码
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

解释

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

结论

instanceof 是一个强大的工具,用于检测对象是否属于某个特定的类或构造函数。然而,它主要适用于对象,

区别

  • typeof 主要用于基本数据类型的检测,返回一个字符串表示数据类型。
  • instanceof 用于检测对象是否为特定构造函数的实例,返回一个布尔值。
  • typeof 对于所有对象(不包括 null)返回 "object",而 instanceof 可以区分不同类型的对象。
  • instanceof 无法检测基本数据类型,而 typeof 不能区分对象类型。

了解这些差异有助于在编写 JavaScript 代码时选择合适的类型检测方法。

相关推荐
June_liu1 小时前
列太多vxe-table自动启用横向虚拟滚动引起的bug
前端·javascript
云枫晖1 小时前
手写Promise-then的基础实现
前端·javascript
养生达人_zzzz1 小时前
飞书三方登录功能实现与行业思考
前端·javascript·架构
GarrettGao1 小时前
Frida常见用法
javascript·python·逆向
肥晨1 小时前
前端私有化变量还只会加前缀嘛?保姆级教程教你4种私有化变量方法
前端·javascript
小高0071 小时前
前端 Class 不是花架子!3 个大厂常用场景,告诉你它有多实用
前端·javascript·面试
没有鸡汤吃不下饭3 小时前
前端【数据类型】 No.1 Javascript的数据类型与区别
前端·javascript·面试
码流之上3 小时前
【一看就会一写就废 指间算法】设计电子表格 —— 哈希表、字符串处理
javascript·算法
Asort5 小时前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
真夜5 小时前
关于rngh手势与Slider组件手势与事件冲突解决问题记录
android·javascript·app