js中的原型链图 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

JS中的原型和原型链

---- 那么要点说完了，我们就根据这些要点来理解原型和原型链。原型我们先来看一个原型的例子。...这样每个对象都可以使用prototype属性里面的showName、showAge方法，并且节省了不少的资源。 ---- 原型链理解了原型，那么原型链就更好理解了。...所以当fn调用toString()时，JS发现fn中没有这个方法，于是它就去Foo.prototype中去找，发现还是没有这个方法，然后就去Object.prototype中去找，找到了，就调用Object.prototype...这就是原型链，fn能够调用Object.prototype中的方法正是因为存在原型链的机制。...另外，在使用原型的时候，一般推荐将需要扩展的方法写在构造函数的prototype属性中，避免写在_ proto _属性里面。

1.8K2 1

JS中的原型和原型链

js在创建对象的时候，都有一个叫做proto的属性，用于指向它的函数对象的原型对象prototype。 prototype可以让所有的对象实例共享它包含的属性和方法。...原型链每一个对象都可以有一个原型，这可原型还可以有它自己的原型，以此类推，就形成了原型链。...查找一个对象的属性或方法的时候，如果这个对象中没有这个属性或者方法，那就会在这个对象的原型对象中去找，以此类推，直到原型链结束。..._proto_ _proto_是原型链查询中实际用到的，指向构造函数的原型对象，他是对象独有的。对象._proto_ = 构造函数.prototype。在js中，万物皆是对象，函数也是对象。...3、构造函数的prototype指向原型对象，原型对象的constructor指向构造函数。使用 prototype最主要的用法就是将属性暴露成公用的。

1.5K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

js中的原型和原型链

一、原型 1、prototype和constructor 在js中每个函数（非箭头函数，一般关于原型的有关知识我们都只考虑构造函数）都会拥有一个 prototype 属性，该属性值是一个对象...__proto__) // true 二、原型链原型链：《JavaScript高级程序设计》中的描述是：每个构造函数都有一个原型对象，如果该原型是另一个类型的实例呢？...那就意味着这个原型本身有一个内部指针指向另一个原型，相应地另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间构造了一条原型链。这就是原型链的基本构想。...原型链中的查找机制：实例对象上找不到指定属性，就从该原型对象上找，如果还是找不到就到该原型对象上的原型上去找，。...逐层查找，直至查找到原型链的顶端 Object.prototype 它的 __proto 值为 null。

1.1K0 0

说说JS中的原型对象和原型链

理解原型对象（有些文章简称为原型）和原型链，是理解JS的重要一环。下面是笔者对JS中原型的理解，函数对象俗话说，JS中万物皆对象。函数也是一个对象，只不过函数是在特定环境中执行代码的对象。...JS中声明函数的方式有： function fn1(){} var fn2 = function(){} var fn3 = new Function() 所以可以理解为fn1、fn2、fn3都是函数对象...JS中还包括一些系统内置的函数对象，比如： Function Object Array String Number RegExp 函数对象之外的对象都是普通对象。...千言万语不如一幅图：原型链由上节我们可以知道，原型对象上的属性和方法被所有实例所共享的。...不说话看图：由此，可得到下面的关系图：思考原型链中的关系图其实还缺少一环，就是内置函数Function。

921 0

JS原型与原型链

原型与原型链 JavaScript有着七种基本类型String、Number、Boolean、Null、Undefined、Symbol、Object，前六种为基本数据类型，Object为引用类型。...值得注意的是typeof (null)会返回Object，这是因为JS二进制前三位都为0的话会被判断为Object类型，null的二进制表示是全0，自然前三位也是0，所以执行typeof时会返回Object...new Student(); console.log(stu1.from) // sdust console.log(stu2.from) // sdust __proto__ __proto__ 是原型链查询中实际用到的...原型链可以简单理解为将原型连成一条链，js每一次获取对象中的属性都是一次查询过程，如果在自有属性中找不到就会去原型对象中查找，如果原型对象中还查不到，就回去原型对象的原型中查找，也就是按照原型链查找，...直到查找到原型链的顶端，也就是Object的原型。

1.8K5 0

js原型和原型链

; var person2 = new Person(); console.log(person1.name) // Kevin console.log(person2.name) // Kevin 原型链...但是当我们删除了 person 的 name 属性时，读取 person.name，从 person 对象中找不到 name 属性就会从 person 的原型也就是 person....原型和原型链一张图搞懂：函数与 Function 的关系函数就是 Function 的实例....Object 与 Function的关系 Object 是函数, 因为函数在 Function 中, 所以Object是Function的实例对象. 因此就构成一个三角形。...Object可以使用__proto__来访问对象的原型对象，即Object可通过__proto__访问Function的Function.prototype 原型继承的整个关系( 原型链 ) 可以知道所有的对象都有原型

2.1K1 0

JS 原型链

JS 原型链 1. 原型和原型链的基础结论 1.1 函数与对象的关系函数是对象，对象都是通过函数创建的。函数与对象并不是简单的包含与被包含的关系。...1.3 原型和原型链原型：一个函数可以看成一个类，原型是所有类都有的一个属性，原型的作用就是给这个类的一个对象都添加一个统一的方法。...Object的prototype，这个查询路径就是原型链。...__proto__ === Object.prototype image-20220110151917982 「最终我们将形成一个经典的原型图：」 image-20220110152037301 3...基于原型链的继承 JavaScript 对象有一个指向一个原型对象的链。

2.3K3 0

js原型链

) //true 5.构造函数与它的原型对象有一个相互引用的关系 6.原型对象上添加的方法用于实例对象上使用隐式原型每一个实例对象都有一个__proto__属性，称之为隐式原型对象的隐式原型的值为其对应构造函数的显示原型的值...__proto__) Fn.prototype.test = function(){ console.log('test') } fn.test() 原型链对象属性的查找规则原型链本质上是从隐式原型链...当执行 fn.test1()时先对象自身查找发现有，直接调用test1() 当执行fn.test2()时，自身对象上没有test2,接下来看构造函数的原型对象上是否有test2,发现有直接调用test2...当执行fn.toString(),时，自身对象没有，接下来查找它构造函数的原型对象上是否有toString(),发现没有，接下来又继续沿着Fn原型对象的构造函数的原型对象上查找找到toString()...当执行fn.test3()时，查找自身对象没有，它直接的构造函数对象的原型对象上也没有，接下来沿着Fn原型对象的构造函数的原型对象的构造函数的原型对象上查找，这里已经找到原型链的尽头，Object原型对象的

2.1K2 0

三张图轻松KO⚡ JS 原型和原型链

三张图轻松KO⚡ JS 原型和原型链 ? ? 大家好，我是小丞同学，这一篇是 JS 高程精读系列的第 n 篇文章，主要解释 JS 中的原型和原型链 ? 非常感谢你的阅读，不对的地方欢迎指正 ?...当我们展开 __proto__ 时就会发现，我们的 say 方法在其中，那这其实是因为我们在类中添加的方法，会被添加到这个类的原型对象上 ?...修改了构造函数的原型对象，constructor指向谁 functionName.prototype = {} 原型对象、实例对象、构造函数之间的关系一张图搞定，前面的内容懂了，自己推一下 ?...原型链原型链其实也很简单：对象 => 对象的原型 => 原型的原型 => 原型的原型的原型 => null，这就是原型链那这是什么意思呢，在我们前面在讲查找原则的时候，其实也有提到，当一个要查找对象上的属性或者方法时...，如果在自身上没有找到，就会在隐式原型对象下查找，直到找到，或者到达尽头 null 在这个查找的过程形成的一条由 __proto__ 连接而成的链就是原型链 ?

5203 0

三张图轻松KO⚡ JS 原型和原型链

三张图轻松KO⚡ JS 原型和原型链大家好，我是小丞同学，这一篇是 JS 高程精读系列的第 n 篇文章，主要解释 JS 中的原型和原型链非常感谢你的阅读，不对的地方欢迎指正愿你生活明朗...当我们展开 __proto__ 时就会发现，我们的 say 方法在其中，那这其实是因为我们在类中添加的方法，会被添加到这个类的原型对象上当我们在调用 say 方法时，在自身上并没有找到这个方法，就会在自身的...修改了构造函数的原型对象，constructor指向谁 functionName.prototype = {} 原型对象、实例对象、构造函数之间的关系一张图搞定，前面的内容懂了，自己推一下原型链...原型链其实也很简单：对象 => 对象的原型 => 原型的原型 => 原型的原型的原型 => null，这就是原型链那这是什么意思呢，在我们前面在讲查找原则的时候，其实也有提到，当一个要查找对象上的属性或者方法时...，如果在自身上没有找到，就会在隐式原型对象下查找，直到找到，或者到达尽头 null 在这个查找的过程形成的一条由 __proto__ 连接而成的链就是原型链总结 __proto__ 和 constructor

6222 0

JS中的面向对象、原型、原型链、继承总结大全

补充: js中说一切都是对象,是不完全的,在js中6种数据类型(Undefined,Null,Number,Boolean,String,Object)中,前五种是基本数据类型,是原始值类型,这些值是在底层实现的...都指向了Person.prototype中的showName 这种构造函数模式和原型模式组合使用,基本上可以说是js中面向对象开发的一种默认模式,介绍了以上这几种常用创建对象的方式, 还有其他不常用的模式就不介绍了...,假如另一个原型又是另一个类型的实例,这样就形成了原型链的概念,原型链最底层为Object.prototype....属性查找机制 js中实例属性的查找,是按照原型链进行查找,先找实例本身有没有这个属性,如果没有就去查找查找实例的原型对象,也就是[[prototype]]属性指向的原型对象,一直查到Object.prototype...方法继承,就是上文讲的到的原型链机制继承,另外可以给子构造函数添加自己的属性和方法。这就是经典继承,避免了但是使用构造函数或者单独使用原型链的缺陷,成为js中最常用的继承方式。

1.4K2 2

js原型及原型链解析

js原型、原型链这几天闲了看了下js的原型，以下内容为个人理解，如有错误，尽请指正。...首先，明确一点：js中的对象分为普通对象和函数对象，一般我们自定义的可以被new的函数称作函数对象，另外js内置了譬如：Array、Date、Object、Function、Number、String、...__proto__属性，该属性指向其构造的原型，使用__proto__将所有对象联系起来，才形成了所谓的原型链，举个栗子： function Person() {} const p1 = new Person...__proto__ === null) // true, Object的原型是由null"产生"的，null处于原型链顶端这个从根本上印证了道德经那句：道（null）生一，一生二，二生三，三生万物...__proto__ === p.constructor.prototype) // true 下一节的话讲下js中的继承~

2.2K3 0

JS进阶：原型与原型链

JS进阶：原型与原型链 image.png JavaScript中除了基础数据类型外都是对象（引用类型）。...但是由于其没有类（ES6 引入了 class，但其只是语法糖）的概念，为了保证对象之间的联系，就有了原型和原型链的概念。...该原型对象也有一个自己的原型对象( __proto__ ) ，层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。...所有原型链的终点都是Object函数的prototype属性，因为在JavaScript中的对象都默认由Object()构造。...通过原型链就可以在JavaScript中实现继承，JavaScript中的继承相当灵活，有多种继承的实现方法，这里只介绍一种最常用的继承方法也就是组合继承。

1.4K3 0

js对象和原型、原型链的关系

JS的原型、原型链一直是比较难理解的内容，不少初学者甚至有一定经验的老鸟都不一定能完全说清楚，更多的"很可能"是一知半解，而这部分内容又是JS的核心内容，想要技术进阶的话肯定不能对这个概念一知半解，碰到问题靠...写操作）、Object.create(target)（生成操作）代替构造函数是什么、它做了什么出自《你不知道的js》：在js中, 实际上并不存在所谓的'构造函数'，只有对于函数的'构造调用'。...判断方式有两种，但都是根据构造函数的prototype是否在原型链上来判断的：instanceof: 用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置语法：object instanceof...拒绝查找原型链：hasOwnProperty: 指示对象自身属性中是否具有指定的属性语法：obj.hasOwnProperty(prop)参数: prop 要查找的属性返回值: 用来判断某个对象是否含有指定的属性的...原型对象改变，原型链下游获取的值也会改变上面那个例子中的foo1.test的值是什么？

1.5K2 0

JS进阶-原型链

原型链的定义 JavaScript 是基于原型（prototype）继承的语言，每个对象都可以从它的原型继承属性和方法。...原型链（Prototype Chain）就是多个对象通过 prototype 关联形成的链式结构，用于实现继承。...__proto__（原型指向）：实例对象内部的 __proto__ 连接到其构造函数的 prototype，形成原型链。实例对象....下面用js来深刻体会一下原型链： // 1 定义一个模具（构造函数） function Product(color) { this.color = color; // 每个产品（实例）都有不同的颜色...) | | __proto__ ↓ Object.prototype | | __proto__ ↓ null (原型链终点) 深入思考——方法写在构造函数内部

741 0

JS原型链笔记

，这个对象就是我们所说的原型，每一个对象都会从原型"继承"属性。...在这里插入图片描述 constructor 每个原型都有一个 constructor 属性指向关联的构造函数实例原型指向构造函数 function Person() { } console.log(...但是当我们删除了 person 的 name 属性时，读取 person.name，从 person 对象中找不到 name 属性就会从 person 的原型也就是 person.proto ，也就是...Person.prototype中查找，幸运的是我们找到了 name 属性，结果为 Kevin。...在这里插入图片描述原型链 console.log(Object.prototype.__proto__ === null) // true ?

1.7K2 0

【说站】js原型链默认的原型

js原型链默认的原型 1、默认情况下，所有引用类型值都继承了Object，这种继承也是通过原型链实现的。...2、所有函数的默认原型都是Object的实例，所以默认原型包含一个内部指针，指向Object.prototype。...=父构造函数的实例对象 Children.prototype = new Father() // 创建子实例 let c = new Children() // 使用 Object 原型上的方法 console.log...(c.hasOwnProperty('name'))//true 以上就是js原型链默认的原型，希望对大家有所帮助。...更多js学习指路：js教程推荐操作环境：windows7系统、jquery3.2.1版本，DELL G3电脑。

8592 0

JS原型链温故

在js中，对于对象的理解很重要。 js的数据类型主要分为基本类型和引用类型。基本类型包括String、Number、Boolean、undefined、null。引用类型包括Object。...此时我又要祭出我珍藏已久的JS万物图了，相信筒子们可以图中理解Function和Object之间的互相关系了。 ?...所以结合上面几个图，可以形成这样一个结论：在JS世界中，null为开始，由null开始衍生出Object.prototype。Object.prototype的隐式原型链指向null。...从上图可以看出一个关系，那就是js中的各对象间都是通过原型链来互相连接起来的，这个原型链将所有对象链接在了一起，这就是为什么说JS是基于原型的面向对象编程语言，即使现在有es6 7有了class类，它本质上也是基于原型链形成的语法糖而已...js中实现的继承就是通过这条原型链来工作的：在访问一个对象的某个属性时，先该对象的现有属性中查找，如果没有，再沿着__proto__这种链向上找，这就是原型链。

1.3K2 0

理解JS 原型链

一直以来对于JavaScript 的原型链的概念，始终有些东西有一种模糊感，最近刚好有时间就塌下心认真的把《JavaScript高级程序设计》中相关内容认真读了一遍，也查看了很多网上很多资料，以前很多不明白的地方也渐渐明白了起来...__proto__; // true 为了便于理解，来看一张图。 ? 恩~他们的关系大概就是这样。...#原型链原型链简单用一句话概括就是：原型链就是对象的__proto__所连接的链状结构为了方便我们理解原型链，举一个简单的例子： function F(){ this.a = 1;...我们画张图来表示： ? 图中这条红色的线就是原型链。由此可见，实例对象可访问自己原型对象上的属性和方法，额..准确来说是: 当一个对象查找属性或方法时，自己有，停止查找，返回结果。...#补充 constructor 说一下我的经历，一开始理解原型链时，一直在prototype、__proto__、constructor在这个三个属性中绕来绕去。

1.7K1 0

js原型链污染

js原型链前两天，做了一道CTF题目，遇到了js原型链污染。 js原型，我的理解，类似于java中的静态属性。...原型（Prototype）在JavaScript中，每个对象都有一个关联的原型对象（prototype object）。原型对象是一个普通的对象，它包含可以在实例中共享的属性和方法。...原型链（Prototype Chain）原型链是一种对象之间的关系，它是由对象的原型对象构成的链式结构。...当试图访问一个对象的属性或方法时，JavaScript引擎会沿着原型链向上查找，直到找到匹配的属性或方法或者到达原型链的顶端。...原型链污染通过修改或者添加其原型链上的原型对象，使其当前对象可以访问到错误或者不具备的属性。

1801 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭