news 2026/5/10 16:51:32

别再混淆了!一张图彻底搞懂 proto 和 prototype 的区别

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
别再混淆了!一张图彻底搞懂 proto 和 prototype 的区别

彻底搞懂 JavaScript 原型与原型链:proto和 prototype 到底有什么区别?

写在前面:核心结论速读

如果你时间紧迫,请先记住这 3 点核心区别,带着结论去看正文会更清晰:

  1. 持有者不同prototype属于构造函数(它是模具);__proto__属于实例对象(它是产品)。

  2. 作用不同prototype是“公共仓库”,用来存放**共用方法;__proto__是“线索指针”,用来指向那个仓库。

  3. 一句话总结:开发者通过prototype往里存,实例对象通过__proto__往外找

在学习 JavaScript 的过程中,原型(Prototype)和原型链(Prototype Chain)无疑是最容易让人混淆的概念之一。特别是__proto__prototype这两个属性,名字相似但作用完全不同。

本文将通过一个通俗易懂的例子,并配合图解,帮助大家彻底厘清这两个概念的关系以及背后的查找机制。

1. 从一个具体的例子开始

为了理解这个概念,我们定义一个简单的构造函数Pig(猪):

JavaScript

function Pig(name, age, father) { this.name = name; this.age = age; this.father = father; } // 往原型对象(公共仓库)里添加方法 Pig.prototype.sleep = function() { console.log(this.name + ' 正在睡觉...'); }; // 创建一个实例对象 const peppa = new Pig('Peppa', 5, 'Daddy Pig');

当我们写下这段代码时,JavaScript 引擎在后台建立了关键的连接。我们需要关注两个核心角色:构造函数实例对象

2. 核心关系图解:一张图看懂

在我们深入概念之前,先看这张核心关系图。这是理解一切的基础:

Code snippet

拥有 prototype
拥有 __proto__
拥有 constructor
new 创建
构造函数 Pig
原型对象 Pig.prototype
实例对象 peppa
Pig.prototype 存放公共方法 sleep

从图中我们可以清晰地看到:

  • 左上:构造函数Pig

  • 中间:公共仓库Pig.prototype

  • 左下:也就是我们需要关注的实例peppa

  • 关键点peppaPig并没有直接的物理连接,它们是通过中间的Pig.prototype关联起来的。

3. 核心概念一:prototype(显式原型)

谁拥有它?只有构造函数(函数)。

在上面的例子中,Pig是一个构造函数。在声明这个函数时,JavaScript 会自动给它创建一个属性叫做prototype

它的作用是什么?

prototype 是一个对象,我们可以把它理解为一个公共仓库或者模具。它的主要作用是存储所有 Pig 实例都需要共享的属性和方法。

我的理解总结:prototype是构造函数特有的,它指向一个对象(原型对象),用来存放公共功能。

4. 核心概念二:proto(隐式原型)

谁拥有它?所有的对象(包括实例对象)。

当我们使用new Pig()创建出peppa这个实例时,peppa身上会自动带有一个属性叫做__proto__

它的作用是什么?

proto是一个指针(或线索)。它指向哪里?它指向构造函数的 prototype。

本质上,__proto__的存在就是为了让实例对象能够找到它的“出身”,从而访问那个公共仓库里的方法。

JavaScript

// 验证关系 console.log(peppa.__proto__ === Pig.prototype); // true

我的理解总结:实例对象通过__proto__属性,指向了构造函数的原型对象。

5. 原型链:本质是“查找机制”

当我们理解了上面两个概念,原型链其实就是一个顺着__proto__向上查找的机制。

当我们调用peppa.sleep()时,查找过程如下:

Code snippet

没有找到 sleep
找到了! 执行 sleep()
假设还没找到
还没找到
终点
1. 检查 peppa 自身
2. 检查 peppa.__proto__
即 Pig.prototype
3. 检查 Pig.prototype.__proto__
即 Object.prototype
4. 检查 Object.prototype.__proto__
即 null
结束查找
返回 undefined
  1. 第一步(查自己):引擎首先检查peppa实例本身有没有sleep属性。

    • 结果:没有(只有 name, age, father)。
  2. 第二步(顺藤摸瓜):引擎顺着peppa.__proto__找到Pig.prototype

    • 结果:找到了!
  3. 第三步(执行):执行该方法。

如果还没找到呢?

如果 Pig.prototype 里也没有这个方法,引擎会继续找 Pig.prototype 的proto(即 Object.prototype),一直找到 null 为止。这条查找的链路,就叫做原型链。

6. 总结与对比表

为了防止再次混淆,请记住这张对比表:

属性名prototypeproto
持有者构造函数 (Function)实例对象 (Object)
形象比喻公共仓库 / 模具连接线 / 寻宝地图
核心作用存放共享的方法和属性指向原型对象,用于查找方法

最终结论:

  • 构造函数负责建立公共仓库prototype)。

  • 实例对象负责持有线索__proto__)。

  • 原型链负责提供查找机制,确保实例能够通过线索找到仓库中的方法。

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

终极深空摄影指南:DeepSkyStacker新手完全教程

终极深空摄影指南:DeepSkyStacker新手完全教程 【免费下载链接】DSS DeepSkyStacker 项目地址: https://gitcode.com/gh_mirrors/ds/DSS 🚀 开启宇宙探索之旅! 深空摄影的魅力在于捕捉遥远星系的壮丽景象,但单张照片往往因…

作者头像 李华
网站建设 2026/5/10 5:16:12

HyperLPR深度学习车牌识别框架的架构设计与性能优化深度解析

HyperLPR深度学习车牌识别框架的架构设计与性能优化深度解析 【免费下载链接】HyperLPR 基于深度学习高性能中文车牌识别 High Performance Chinese License Plate Recognition Framework. 项目地址: https://gitcode.com/gh_mirrors/hy/HyperLPR 在智能交通系统快速发展…

作者头像 李华
网站建设 2026/5/10 7:18:11

60、事件驱动的套接字程序与CGI编程

事件驱动的套接字程序与CGI编程 1. 底层编程的复杂性与测试 在底层进行网络编程会带来诸多复杂问题,例如示例20 - 6及其数据结构就体现了这种复杂性。可以在终端窗口运行示例20 - 6的服务器,然后多次运行示例20 - 2。还可以在其他终端窗口使用 telnet localhost 8881 (或…

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

64、Python 中的 MIME 与 HTML 处理

Python 中的 MIME 与 HTML 处理 1. MIME 处理 MIME(多用途互联网邮件扩展)在邮件处理中起着重要作用。下面是一个将指定源目录下的所有文件打包成适合邮件发送的文件的示例代码: def pack_mail(source_dir, **headers): Given source_dir, a string that is a path to a…

作者头像 李华
网站建设 2026/5/9 9:02:14

Evernote2md:高效实现Evernote到Markdown的笔记迁移转换

Evernote2md:高效实现Evernote到Markdown的笔记迁移转换 【免费下载链接】evernote2md Convert Evernote .enex files to Markdown 项目地址: https://gitcode.com/gh_mirrors/ev/evernote2md 你是否正在寻找一种简单可靠的方式,将Evernote中的宝…

作者头像 李华
网站建设 2026/5/9 9:34:13

vue基于Spring Boot的快递管理系统_394je5q0_大白-java毕业设计

目录已开发项目效果实现截图开发技术系统开发工具:核心代码参考示例1.建立用户稀疏矩阵,用于用户相似度计算【相似度矩阵】2.计算目标用户与其他用户的相似度系统测试总结源码文档获取/同行可拿货,招校园代理 :文章底部获取博主联系方式&…

作者头像 李华