JavaScript的原型链图

最新推荐文章于 2023-08-09 18:13:09 发布
最新推荐文章于 2023-08-09 18:13:09 发布
阅读量154 收藏
点赞数
分类专栏： JavaScript 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45566319/article/details/102483305
版权

各种对象的__proto__和函数的prototype 都阐明了

不能保证100% 正确（有问题直接注释或者私信偶） 但是互联网上原型链图比这个全的偶没见过（右上角的Number Date们需要改进）

可以改进但是 不能再简单了

有点晕吧 大部分人都会晕

所有网上 一堆 xxx.proto.proto.proto 皆可由此图搞定

那些刁钻古怪的问题退化为孔乙己的茴字问题

死记硬背吧 先 要不改行

90%的前端或者js程序员或者老师们对Javascript懂得不比这个多 嘿嘿

给手机看的

在这里插入图片描述
但是这个图里的所有褐色单向箭头链就是Javascript的原型链（颜色标注对理解js原型链很关键）

原型链大部分时候是不可见的（__proto__在firefox nodejs中可见）那么图退化为

在这里插入图片描述
上二图三特点

1.所有对象都在原型链上

2.除了null 每个对象都有且唯一的__proto__原型对象

3.除了null, Object.prototype,其它对象的原型对象虽然不可通过.__proto__操作访问 但是通过原型链上某个构造器（函数）的prototype属性都可以访问到

js coder大多时候要面对的是

在这里插入图片描述
优雅了吧 ：-（）

所有javascript重度编码都是操作上面这个图的元素 但是你心里至少要有下图

在这里插入图片描述
如果连这图都嫌弃不好记 最简单的铁三角 javascript 99%的幻化都由此来
在这里插入图片描述

原型链的本质是嘛？以后分解 嘿嘿

最后

分享移动开发与微信小程序开发该做哪些！其中有哪些关键的技术点！需要下图学习教程的欢迎加入web前端交流群：854591759获取！
点击链接加入群聊【web前端交流群】：
在这里插入图片描述

小可乐程序员
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript原型链示例分享
10-26
主要介绍了JavaScript原型链示例，有需要的朋友可以参考一下
原型与原型链详解（带图方便理解）
m0_55734030的博客
11-21 9775
每一个类（构造函数）都有一个显示原型prototype（本质就是个对象）01 类：是创建对象实例的模板 本质上讲类是个函数 (例如Array object String )001 构造函数 ：用new来执行的函数02 实例:就是由类创建的对象 本质上就是对象例如 [1,2,3] {name : "mumu " } , “abc”以上就是面试经常会问到的内容啦，希望对你们有用哈。
完整原型链详细图解（构造函数、原型、实例化对象）
spicyboiledfish的博客
05-03 1万+
一、首先说一下什么是构造函数： 构造函数：用来在创建对象时初始化对象。特点：构造函数名一般为大写字母开头；与new运算符一起使用来实例化对象。 举例： function Person(){} //Person构造函数 var p=new Person(); //Person构造函数创建对象,也可叫做实例化 二、什么是原型？ 原型：构造函数在实例化对象的过程中，系统自动创建出来与其相关联的一个空的对象。可以由构造函数.prototype来访问到。 举例：在实例
详解原型与原型链
赤蓝紫の博客
03-16 4806
详解原型与原型链 其实，刚开始学JavaScript时，就有学过原型与原型链的相关知识了，只是当时还没有养成写笔记的习惯，导致现在已经忘的七七八八了。 这边文章真是花了很多心思，写了两天，看了很多篇篇博文，其中有小参考的，有解决一点疑惑的，但是最后只标注了一篇帮助最大的。 构造函数 实例的构造函数属性(constructor)指向其构造函数 function Person(name) { this.name = name } const person = new Person('clz') cons
JS中的原型和原型链（图解）
热门推荐
qq_36996271的博客
09-09 5万+
JS中的原型和原型链 讲原型的时候，我们应该先要记住以下几个要点，这几个要点是理解原型的关键： 1、所有的引用类型（数组、函数、对象）可以自由扩展属性（除null以外）。 2、所有的引用类型都有一个’_ _ proto_ _’属性(也叫隐式原型，它是一个普通的对象)。 3、所有的函数都有一个’prototype’属性(这也叫显式原型，它也是一个普通的对象)。 ...
一张图带你理解 什么是 JavaScript 原型链（本文很长 需要泡杯茶耐心看完
zqy123456789000的博客
04-13 880
初识原型链 学过前端的小伙伴对 原型链肯定不陌生，接下来我需要一张图，带领大家一起理解原型链，不多说，上图。 搞错了，再来，把下方这张图简单的看一看就行，来接下来我们，一步步分析 原型链 ------ > 查找机制 我的好朋友们 先简单记住 原型链，简单理解它是一种查找机制 接下来看下图 在线翻译官：英文直译: prototype (原型) JavaScript中是 原型对象 __ proto__ ( 对象原型) 在现在版本浏览器中可能长这样 [[Prototype]] 重点 好
Javascript原型链的原理详解
10-23
主要介绍了Javascript原型链的原理,结合实例形式深入分析了JavaScript原型链的原理与使用技巧,需要的朋友可以参考下
JavaScript原型链与继承操作实例总结
10-18
主要介绍了JavaScript原型链与继承操作,结合实例形式总结分析了javascript原形链与继承的相关概念、使用方法及操作注意事项,需要的朋友可以参考下
深入理解javascript原型链和继承
10-25
主要介绍了javascript原型链和继承的概念，以及使用原型链实现继承、经典继承、组合式继承、寄生组合式继承。非常实用，是篇非常不错的文章，这里推荐给大家。
原型、原型链图解（详细易懂2023）
我们好像在哪见过
08-09 382
构造函数是使用了new关键字的函数，用来创建对象，所有函数都是Function()的实例 原型对象是用来存放实例对象的公有属性和公有方法的一个公共对象，所有原型对象都是Object()的实例 原型链又叫隐式原型链，是由__proto__属性串联起来，原型链的尽头是Object.prototype
JavaScript原型链简单图解
11-03
JavaSciptDOM基本操作,JavaScipt函数基础,JavaScipt流程语句,JavaScript变量,JavaScript数据类型,JavaScript数组,JavaScript正则表达式,JavaScript字符串函数,Window对象等图解。JS高手进阶的工具图谱
原型链图片
11-23
类，原型，构造函数
什么是原型，原型链？原型链是如何实现的？(带图清晰理解)
weixin_51345789的博客
11-16 1391
以下认识都属于个人观点：首先先了解原型对象和原型的概念：一张通俗易懂的原型链图能够了解其中的结构：注：所有的构造函数都是对象，故称为函数对象。如上图中从实例对象中开始寻找：实例对象p1.__proto__ ==>原型对象Person.__proto__ ==>原型对象Object.__proto__ ==>null
[JS]_proto_和prototype到底有啥区别
weixin_34194087的博客
08-20 445
是时候拿出我珍藏多年的这张图了： 首先，要明确几个点： 1.在JS里，万物皆对象。方法（Function）是对象，方法的原型(Function.prototype)是对象。因此，它们都会具有对象共有的特点。 即：对象具有属性__proto__，可称为隐式原型，一个对象的隐式原型指向构造该对象的构造函数的原型，这也保证了实例能够访问在构造函数原型中定义的属性和方法。 2.方法(Function...
javascript完整原型链详细图解（构造函数，原型，实例化对象）
grbrb的博客
07-01 2450
javascript完整原型链详细图解（构造函数，原型，实例化对象） 一、首先说一下什么是构造函数： 构造函数：用来在创建对象时初始化对象。特点：构造函数名一般为大写字母开头；与new运算符一起使用来实例化对象。 举例： function Person(){} //Person构造函数 var p=new Person(); //Person构造函数创建对象,也可叫做实例化 二、什么是原型？ 原型：构造函数在创建的过程中，系统自动创建出来与构造函数相关联的一个空的对象。
JavaScript完整原型链图解
DDboom的博客
07-06 4474
了解完整原型链对我们有什么帮助? 没什么帮助，装逼意义大于实用（doge） 好的吧，可能是我还是新手，没碰上这方面的需求 完整原型链图示 上图里，我们常用的部分是右下至右上的链，即从构造函数到构造函数原型对象再到null的部分。 而实际上，我们常见的Function和Object也参与了原型访问链。 在这个图中，不管将哪个块当作实例对象，总有一个构造函数和一个原型对象和它组成三角关系。 只有一个块例外，那就是Object.prototype。若Object.prototype.__proto__ ===
原型链图解总结及实践
gsnmtorrent的博客
12-29 524
原型链 在ES6中引入了class关键字，但是JS依然是基于原型的，class实际上是语法糖。 举个例子，有一个people class： class People { constructor(props) { this.name = props.name; } run() { console.log('run') } } 通过new people 这个class 产生了许多的人，张三，李四： let lisi = new People('李四') 但是茫茫人海中，有一类
原型链详解（附带图解）
weixin_44766633的博客
06-18 1743
2）原型以及原型链（实质是引用非赋值） 2.1）定义 定义：是function（构造函数函数）对象的一个属性，它定义了构造函数构造出来的对象的公共祖先。通过该构造函数创建的对象，可以继承他的原型的属性和方法。（eg:person.prototype就是一个原型） 举个例子： Grand.prototype.lastName = '何'; function Grand() { }
JavaScript中原型和原型链（图解）
zsl15039718107的博客
11-16 3774
JavaScript中原型和原型链 用构造函数创建一个对象 function Person(){ this.age = '18'; } let person1 = new Person(); Person.prototype.name = 'zsl'; console.log(person1.name); //zsl console.log(pe...
Javascript原型链
最新发布
08-10
- *2* [JavaScript原型链(重要)](https://blog.csdn.net/liyuchenii/article/details/125957625)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值