news 2026/4/16 14:26:59

深入 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/4/16 7:45:21

iOS核心开发手册【1.0】

第1章 手势与触摸触摸是iOS交互的核心,它提供了一种非常关键的手段,使用户可以向应用程序表达自己的意图。触摸并不局限于“按下按钮”或“点击键盘”这两种动作。你可以设计并构建出一种应用程序,令其能够以有意义的方式来直接处理用户的手势…

作者头像 李华
网站建设 2026/4/16 7:44:27

医院资源调度优化:床位/医生分配在TensorRT上动态平衡

医院资源调度优化:床位/医生分配在TensorRT上动态平衡 在大型三甲医院的指挥中心,凌晨两点的急诊科刚刚接收了五名车祸伤员。与此同时,心内科ICU有两位患者病情恶化,急需转出普通病房腾出监护床位;而骨科手术室因一台复…

作者头像 李华
网站建设 2026/4/16 7:45:17

Keil入门操作指南:如何烧录程序到单片机

从零开始用 Keil 烧录程序到单片机:新手也能懂的实战指南你有没有遇到过这种情况——代码写得飞快,编译也通过了,可下载到板子上就是不运行?LED 不闪、串口没输出、调试器连不上……别急,这几乎是每个嵌入式初学者都会…

作者头像 李华
网站建设 2026/4/15 15:33:47

Keil4安装完整指南:从下载到运行的全过程详解

Keil4安装实战指南:从零搭建稳定嵌入式开发环境 在嵌入式开发的世界里,一个可靠、高效的IDE往往决定了项目启动的成败。尽管如今Keil Vision6已崭露头角, Keil4(即MDK-ARM v4.x) 依然是许多工程师心中的“定海神针”…

作者头像 李华