JS原型链图解：prototype和__proto__联系图

于 2022-03-08 15:51:40 发布
阅读量816 收藏
点赞数
分类专栏： 前端 文章标签： javascript 前端 typescript html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45912061/article/details/123355350
版权

大家学到JavaScript原型链的时候可能一脸懵逼，小编刚开始也是这样的，但经过查资料，敲代码慢慢总结出以下一图，方便大家了解prototype和__proto__：图解如下：
在这里插入图片描述
比较特殊的情况：
1、Function 的prototype 和 __proto__指向同一个原型
2、Object.prototype是原型链的终点
3、一个普通的实例没有指向一个未定义空的prototype，但是一定有在浏览器中显示 [[prototype]] 通过__proto__指向其构造父函数的prototype
4、Object是Function的实例同时，Function是Object的实例（可以这样理解，原型链指示如图）

marko.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS中原型链中的prototype与_proto_的个人理解与详细总结（**************************************************************）...
weixin_33989780的博客
10-31 1600
一直认为原型链太过复杂，尤其看过某图后被绕晕了一整子，今天清理硬盘空间（渣电脑），偶然又看到这图，勾起了点回忆，于是索性复习一下原型链相关的内容，表达能力欠缺逻辑混乱别见怪（为了防止新人__（此处指我）__被在此绕晕，图片就放在末尾了。） 以下三点需要谨记 1.每个对象都具有一个名为__proto__的属性； 2.每个构造函数（构造函数标准为大写开头，如Function()，Object()等等J...
一张图彻底掌握prototype、__proto__、constructor之前的关系（JS原型、原型链）
weixin_42662753的博客
07-01 196
一张图彻底掌握prototype、__proto__、constructor之前的关系（JS原型、原型链）
js原型链之prototype和__proto__的关系(一张图让你秒懂)
lishuaihao的博客
07-04 153
今天学到的内容： 1.Date.now()与 new Date().getTime()相等，都可以得到1970 年 1 月 1 日至今的毫秒数。 2.向Array函数中增加新的方法。 代码见下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
图解_proto_和prototype的关系及区别
kairrys
08-03 406
原型是javascript面向对象编程中非常重要的概念，而且并不是那么容易懂。偶然看到一个题目：阐述proto和prototype的关系。看到这个问题的时候，我的脑海浮现出一些概念，但却说不出来。先来看一张图 如果能看懂图中的关系基本上就可以解释出proto和prototype的关系和区别了 所以接下来一一介绍图中的一些概念 构造函数 使用构造函数创建对象 Person就是一个构造函数，通过new创建了person1对象实例 其实构造函数就和普通函数没有多大区别，首字母大写只是约定俗成，不大写照样可以。
js 原型_proto_和prototype图解
okyoung188的博客
04-27 391
转载地址：从__proto__和prototype来深入理解JS对象和原型链                     js object layout
JS原型prototype和__proto__用法实例分析
10-15
主要介绍了JS原型prototype和__proto__用法,结合实例形式分析了JS原型prototype和__proto__使用方法及相关操作注意事项,需要的朋友可以参考下
js prototype和__proto__的关系是什么
10-16
主要介绍了js prototype和__proto__的关系是什么，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
浅谈javascript中的prototype和__proto__的理解
10-17
主要介绍了浅谈javascript中的prototype和__proto__的理解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Javascript中prototype与__proto__的关系详解
10-18
主要给大家介绍了关于Javascript中prototype与__proto__的关系的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
javascript 中的constructor和prototype图
withasi的专栏
08-19 561
今天见到一个描述constructor和prototype的图，贴来给大家看看
用一张简单的图理解JavaScript对象的prototype原型
web学记
03-05 1224
1. 当创建一个构造函数时，在内存中会自动生成该函数的原型对象。 2. 构造函数的prototype属性指向原型对象。 3. 原型对象的constructor属性指向构造函数。 4. 可以通过 构造函数的prototype给原型增加属性和方法。 5. 通过该构造函数创建的对象，继承原型中的所有属性和方法。 6. 当改变对象继承而来的属性值时，并不会改变原型中的值。
走一遍流程图，了解 [[prototype]]、__proto__、prototype究竟是什么
weixin_33813128的博客
09-19 860
大纲 [[prototype]]、proto、prototype究竟是什么。遍走这个经典的流程图，遍解释它们的含义。 写在最前面 原型链的尽头（root）是Object.prototype。所有对象均从Object.prototype继承属性。 prototype 每个函数都有prototype属性(图一：1)，也只有函数才有prototype属性。除了 Function.prototype...
一幅图看懂prototype与[[Prototype]]
weixin_30797027的博客
04-26 305
首先明确： 1、任何对象都有属性[[Prototype]]； 2、只有函数有属性prototype。 Pet为父类，子类Dog继承Pet。示意图如下： 继承的样例代码： // 父类构造函数 function Pet(name,sound){ var name = name; this.sound = "Pet sa...
原型模式（Prototype模式）
qq_35784669的博客
11-07 1270
在有些系统中，存在大量相同或相似对象的创建问题，如果用传统的构造函数来创建对象，会比较复杂且耗时耗资源，用原型模式生成对象就很高效，就像孙悟空拔下猴毛轻轻一吹就变出很多孙悟空一样简单。 一原型模式的定义与特点 原型（Prototype）模式的定义如下：用一个已经创建的实例作为原型，通过复制该原型对象来创建一个和原型相同或相似的新对象。在这里，原型实例指定了要创建的对象的种类。用这种方式创建对象非常高效，根本无须知道对象创建的细节。例如，Windows 操作系统的安装通常较耗时，如果复制就快了很多。在生活
帮你彻底搞懂 JS 中的 prototype、__proto__与constructor（图解）
octopus的专栏
05-11 186
1. 前言 作为一名前端工程师，必须搞懂JS中的prototype、__proto__与constructor属性，相信很多初学者对这些属性存在许多困惑，容易把它们混淆，本文旨在帮助大家理清它们之间的关系并彻底搞懂它们。这里说明一点，__proto__属性的两边是各由两个下划线构成（这里为了方便大家看清，在两下划线之间加入了一个空格：_ _proto_ _，读作“dunder proto”，“double underscore proto”的缩写），实际上，该属性在ES标准定义中的名字应该是[[Proto
Prototype （原型）模式
矢落叶の博客
05-25 2280
6.1 Prototype 模式   通常，我们使用 new 方式来生成类的实例。   new Something();   像这样 new 的方式来生成实例时，是必须指定类名的。但是，有时也需要 “不指定类名的前提下生成实例” 的需求。   （1） 对象种类繁多，无法将他们整合到一个类中时   此时需要要编写多个类文件来处理。   （2） 难以根据类生成实例时   生成实例的过程太过复杂，很难根...
JavaScript原型（prototype）、__proto__、原型链及其结构图
sun10367的博客
03-22 411
原型链结构图 原型 每个函数都有一个prototype属性, 默认指向一个Object实例对象，即原型对象 原型对象中有一个属性constructor, 它指向函数对象 即：构造函数与它的原型对象相互引用（暂不考虑改变原型指向问题） 可以给原型对象添加属性(一般都是方法)，函数的实例对象可以继承原型中的属性(方法) 显式原型和隐式原型 每个函数对象都有一个prototype属性，即显式...
帮你彻底搞懂JS中的prototype、__proto__与constructor（图解）
热门推荐
码飞_CC的博客
07-25 18万+
  作为一名前端工程师，必须搞懂JS中的prototype、__proto__与constructor属性，相信很多初学者对这些属性存在许多困惑，容易把它们混淆，本文旨在帮助大家理清它们之间的关系并彻底搞懂它们。这里说明一点，__proto__属性的两边是各由两个下划线构成（这里为了方便大家看清，在两下划线之间加入了一个空格：_ _proto_ _）。   现在正式开始！让我们从如下一个简单的例...
JS中的prototype、__proto__与constructor
weixin_30561177的博客
09-04 454
1.前言 作为一名前端工程师，必须搞懂JS中的prototype、__proto__与constructor属性，相信很多初学者对这些属性存在许多困惑，容易把它们混淆，本文旨在帮助大家理清它们之间的关系并彻底搞懂它们。这里说明一点，__proto__属性的两边是各由两个下划线构成（这里为了方便大家看清，在两下划线之间加入了一个空格：_ _proto_ _），实际上，该属性在ES标准定义...
js中prototype和__proto__的关系和区别
最新发布
04-11
prototype和__proto__都是JavaScript中用于原型链的属性，但它们的作用和区别不同。 prototype是函数的一个属性，它指向一个对象，这个对象包含该函数的所有实例共享的属性和方法。可以通过给prototype添加属性和方法来实现原型继承。 __proto__（双下划线proto）是一个对象的一个属性，它指向该对象的原型。换句话说，__proto__就是实现原型链的关键。当读取一个对象的属性时，如果该对象没有这个属性，JavaScript会沿着它的__proto__指向的对象查找，直到找到该属性或达到原型链的顶部为止。 因此，可以说prototype是用于定义函数以便实现原型继承的，而__proto__是在实例化对象时连接原型链的指针。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值