news 2026/6/15 19:22:13

深入 JavaScript 原型系统:为什么 typeof Object 是 “function”,而 typeof {} 是 “object”?

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
深入 JavaScript 原型系统:为什么 typeof Object 是 “function”,而 typeof {} 是 “object”?

在学习 JavaScript 的过程中,你是否曾被以下现象困惑过?

typeof Object; // "function" typeof {}; // "object"

明明Object是“对象”的代表,为什么它自己却是个函数?
{}才是我们日常使用的“对象”,却被识别为"object"

更令人费解的是,ObjectFunction之间还存在一种看似“循环引用”的原型关系:

Object.__proto__ === Function.prototype; // true Function.__proto__ === Function.prototype; // true

本文将带你彻底理清这两个问题背后的机制,揭开 JavaScript 原型系统的神秘面纱。


一、先回答:为什么typeof Objecttypeof {}

✅ 核心原因:它们根本不是同一类东西!

表达式实际类型说明
Object内置构造函数(函数)可调用:Object()new Object()
{}普通对象字面量不可调用,是Object的实例

根据 ECMAScript 规范,typeof可调用对象(即具有[[Call]]内部方法的对象)返回"function",否则返回"object"

所以:

  • Object是一个函数typeof Object === "function"
  • {}是一个普通对象typeof {} === "object"

💡 类比理解:

  • Object是“造车的工厂”(函数)
  • {}是“工厂生产出来的一辆车”(对象)

二、深入:ObjectFunction的原型关系

要理解上述现象,必须搞懂 JavaScript 中最核心的两个内置对象:ObjectFunction

1. 基本事实

  • 所有函数(包括ObjectArrayDate)都是Function的实例。
  • 所有普通对象(包括{}[]Function.prototype)最终都继承自Object.prototype

因此:

Object instanceof Function; // true Function instanceof Function; // true ({}).__proto__ === Object.prototype; // true

2. 它们的__proto__指向哪里?

表达式说明
Object.__proto__Function.prototypeObject是函数,由Function构造
Function.__proto__Function.prototypeFunction自身也是函数
Function.prototype.__proto__Object.prototypeFunction.prototype是普通对象
Object.prototype.__proto__null原型链终点

3. 原型关系图(文字版)

Function ──.__proto__──→ Function.prototype ──.__proto__──→ Object.prototype ──.__proto__──→ null ↑ │ (instanceof) Object ──.__proto__───────────────────────────────────────┘

🔁 这看起来像“鸡生蛋、蛋生鸡”,但实际上是 JS 引擎在初始化时预定义好的闭环结构


三、验证代码(建议在控制台运行)

// 1. typeof 差异 console.log(typeof Object); // "function" console.log(typeof {}); // "object" // 2. instanceof 验证 console.log(Object instanceof Function); // true console.log(Function instanceof Function); // true // 3. __proto__ 关系 console.log(Object.__proto__ === Function.prototype); // true console.log(Function.__proto__ === Function.prototype); // true // 4. Function.prototype 是普通对象 console.log(typeof Function.prototype); // "object" console.log(Function.prototype.__proto__ === Object.prototype); // true // 5. Object.prototype 是原型链顶端 console.log(Object.prototype.__proto__ === null); // true

四、常见误区澄清

误区1:Object是最顶层对象,所以Object.__proto__应该是null

✅ 正解:Object函数,不是普通对象。所有函数的__proto__都指向Function.prototype

误区2:Function.prototype是一个函数

✅ 正解:typeof Function.prototype返回"object",它是一个内置的普通对象,仅用于被函数实例继承。

误区3:{}Object是等价的,所以 typeof 应该一样

✅ 正解:{}Object实例,就像new Array()Array的关系一样——构造函数 vs 实例


五、延伸:如何正确判断类型?

由于typeof对对象一律返回"object"(连null也是!),我们常使用:

Object.prototype.toString.call(value).slice(8, -1)

例如:

Object.prototype.toString.call([]) // "[object Array]" Object.prototype.toString.call(new Date()) // "[object Date]" Object.prototype.toString.call(/regex/) // "[object RegExp]" Object.prototype.toString.call(null) // "[object Null]" Object.prototype.toString.call(undefined) // "[object Undefined]" Object.prototype.toString.call(123) // "[object Number]" Object.prototype.toString.call("str") // "[object String]" Object.prototype.toString.call(true) // "[object Boolean]" Object.prototype.toString.call(Symbol()) // "[object Symbol]" Object.prototype.toString.call(() => {}) // "[object Function]" Object.prototype.toString.call({}) // "[object Object]"

这正是利用了Object.prototype.toString能返回内部[[Class]]标签的特性。


六、总结

问题答案
为什么typeof Object"function"因为Object是一个可调用的构造函数
为什么typeof {}"object"因为{}是一个普通对象实例
Object.__proto__指向哪?Function.prototype
Function.__proto__指向哪?Function.prototype
原型链终点是?Object.prototype.__proto__ === null

🌟记住

  • 函数也是对象,但可调用 →typeof返回"function"
  • Object是“模具”,{}是“产品”
  • 整个原型系统由ObjectFunction共同构建

参考资料

  • ECMAScript® 2024 Language Specification
  • MDN:typeof
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/15 13:10:55

iOS核心开发手册【1.2】

1.7 解决方案:针对位图的触摸测试解决方案1-5所用的触摸判定方式非常直观,它只做了一些简单的几何运算,但不巧的是,大部分视图都不是解决方案1-5所演示的样子。比方说,对于图1-1中的花朵,其边界就是不规则的…

作者头像 李华
网站建设 2026/6/15 13:11:52

iOS核心开发手册【1.3】

1.13 解决方案:把滚动视图中的内容拖曳到外面iOS所提供的手势识别器的功能确实很丰富,但并不总是能够满足开发者的需要。比方说,有个可以水平滚动的视图,里面包含许多相邻的图像视图ImageView,用户可以左右滚动这个大视…

作者头像 李华
网站建设 2026/6/15 18:27:05

手把手教你搭建RAG系统:解决大模型幻觉问题,程序员必学收藏指南

本文分享了作者从头搭建RAG系统的实践经历。RAG通过检索增强生成解决大模型幻觉问题,提供可靠信息来源。文章详细介绍了系统搭建步骤(文档加载、文本分割、向量嵌入存储等)及实现过程中遇到的技术难题(数据更新、本地AI设置、嵌入…

作者头像 李华
网站建设 2026/6/15 18:28:11

科研协作匹配平台:研究方向关联由TensorRT智能发现

科研协作匹配平台:研究方向关联由TensorRT智能发现 在当今跨学科融合日益频繁的科研生态中,如何快速找到潜在的合作对象,已成为许多研究者面临的真实挑战。传统的“靠人脉”或“看单位”的合作模式正逐渐被数据驱动的智能匹配所取代。越来越多…

作者头像 李华
网站建设 2026/6/15 18:59:12

ST7789V SPI模式配置超详细版操作指南

ST7789V SPI驱动实战指南:从硬件连接到稳定显示的全链路解析你有没有遇到过这样的场景?新买的2.4寸TFT屏,接上STM32后只显示白屏、花屏,或者图像上下颠倒?明明代码烧进去了,屏幕却毫无反应。如果你正在使用…

作者头像 李华
网站建设 2026/6/15 14:04:20

24-Redis Cluster 核心解析:分布式架构入门指南

目录 前言 一、Redis Cluster 的核心定位:解决什么核心问题? 二、Redis Cluster 核心特性:关键设计与原理 2.1 核心架构:主从节点与哈希槽 2.2 核心特性:无需实操也能懂的关键能力 2.3 与主从 + 哨兵架构的核心区别 三、Redis Cluster 的适用场景与局限性 3.1 适用场景 3.…

作者头像 李华