原型链的查找规则

最新推荐文章于 2023-10-26 15:13:44 发布
原创 最新推荐文章于 2023-10-26 15:13:44 发布 · 661 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端

本文介绍了JavaScript中原型对象与__proto__属性的概念，解释了如何利用它们来节省内存，并详细阐述了原型链的查找规则。

要了解原型链的查找机制,必须了解以下2个概念:

原型对象(prototype)与原型(__proto__)

二者之前的关系:实例对象的__proto__等于创建这个实例对象的构造函数的原型对象.

一.原型对象

所有函数都有原型对象prototype,可以用来节约内存,若要将所有对象的公共方法或属性抽离出来,减少内存占用,那么可以将这些属性和方法放到原型对象上面去,因为原型对象上面所有的属性和方法都是共享的,所有对象实例都可以访问,原型对象只有一个地址,因此可以节约内存.实际上,原型对象也是由顶级对象Object,new出来的实例对象,Object(也是一个内置构造函数),且所有原型对象都有constructor-构造函数属性.

二. __proto__属性

所有对象都有一个属性__proto__,因为原型对象一定有constructor属性,则对象的__proto__一定也有constructor属性,且constructor属性值就是构造函数本身.

可以参考以下图片了解构造函数,实例对象与原型对象三者之间的关系...

 三.原型链的查找规则

1.当访问一个对象的属性或方法时,首先查找这个对象自身有没有该属性

2.如果没有就查找它的原型对象,也就是__proto__指向的prototype原型对象

3.如果还没有就查找原型对象的原型对象(Object的原型对象)

4.依此类推直到找到Object为止(null)

参考此图:

 

Fairy_tutu
关注
js原型链原理与查找机制
猿码互联
06-18 615
通过以上的示例和解析，可以看出 JavaScript 的原型链是一种非常灵活和强大的继承机制，它使得我们可以在对象之间共享属性和方法，并且可以简化代码的编写。原型链的作用是在查找对象属性时，先从对象本身查找，如果找不到，则沿着原型链向上查找，直到找到该属性或者原型链的顶端（Object.prototype）为止。原型链的查找机制是从下往上查找，即先从对象本身查找属性，如果找不到，则沿着原型链向上查找。原型对象也是一个对象，同样具有自己的原型对象，形成一个链式结构，称为原型链。中找到了，所以直接输出了结果。
原型与原型链
weixin_50756332的博客
01-15 1552
原型链在结构上很像链表，每个对象中都保存着一个地址，指向当前对象的原型，可以层层向上查找，起到继承的效果。原型链是JS实现继承的一种机制。
原型链查找
qq_45011985的博客
07-09 177
原理 进行方法调用的时候， 会先在实例自身查找， 如果没有就去该实例的原型上找. function People() { this.name = 'a people'; } People.prototype.say = function () { this.age = '10'; console.log(this.name, this.age); } c...
原型链是什么? 查找规则又是怎样的?
鬼鬼的博客
09-18 555
只要是对象内部就有_proto_ ,而 proto_指向原型对象 通过对象的_proto 属性 形成的链式查找机制,即原型链 查找规则: 1.当访问一个对象的属性或者方法时,首先看该对象自身是否有该属性或方法 2.如果没有就查找它的原型(即_proto_) 看_proto_指向的原型对象上有没有 3.如果还没有 继续查找 看原型对象的原型 4.以此类推 直至找到 Object.prototype._proto_为null为止 ...
[js高手之路]从原型链开始图解继承到组合继承的产生详解
12-12
于javascript原型链的层层递进查找规则，以及原型对象(prototype)的共享特性，实现继承是非常简单的事情 一、把父类的实例对象赋给子类的原型对象（prototype），可以实现继承 function Person(){ this.userName =...
JS原型、原型链深入理解
10-22
当查找对象的属性时，JavaScript会向上遍历原型链，直到找到给定名称的属性或者到达原型链的顶部（Object.prototype）。如果在原型链上没有找到指定的属性，则会返回undefined。 举例来说，我们有一个Person构造...
JavaScript中构造函数与原型链之间的关系详解
10-17
- 当试图访问一个对象的属性时，JavaScript会首先在该对象自身查找，如果找不到，就会沿着原型链向上查找，直到找到该属性或到达原型链的顶端（即`null`）。 - 对象的`__proto__`属性指向其原型对象，这在旧版本的...
深入浅出理解javaScript原型链
12-01
JavaScript的原型链是其面向对象特性的重要组成部分，它允许对象之间共享属性和方法，从而实现继承。本文将深入探讨JavaScript的原型链，包括显式和隐式原型链，以及它们在实际编程中的应用。 首先，我们需要了解两...
【JavaScript】原型对象、对象原型、原型链及其查找规则
weixin_43790653的博客
03-21 2758
【JavaScript】原型对象、对象原型、原型链及其查找规则
原型链-查找机制
weixin_45856239的博客
12-04 314
原型链-查找机制
原型链和原型链的查找机制
weixin_45644355的博客
09-03 528
原型链： 它是一种基于_proto_向上查找的机制，当我们操作实例的某个属性或者方法的时候，首先找自己空间中私有的属性或者方法 1.找到了，则结束查找，使用自己私有的即可 2.没有找到，则基于_proto_找所属类的prototype，如果找到就用这个公有的，如果没找到，基于原型上的_proto_继续向上查找，一直找到Object.prototype的原型为止，如果再没有，操作的属性或者方法不存在 【注】1.所有的函数数据类型都天生自带一个属性：prototype（原型）， 这个属性的值是一个对象，浏览器
原型链及其查找机制
weixin_74469640的博客
10-26 337
​每一个实例对象又有一个属性，指向的构造函数的原型对象，构造函数的原型对象也是一个对象，也有属性，这样一层一层往上找就形成了原型链。
07-原型链成员查找规则.html
m0_59556655的博客
09-14 133
【代码】07-原型链成员查找规则.html。
原型对象的使用，原型链是如何进行查找的？
weixin_47097924的博客
07-19 589
万物皆对象，每个对象都有一个原型__proto__ 构造函数有原型对象prototype 创建一个构造函数 function Star(name, age) { this.name = name this.age = age } 用new关键字创建一个构造函数的实例 let ww = new Star('李四', 29) 构造函数上有原型对象prototype,构造函数实例上有原型__proto__ console.log(Star.prototype === ww.__proto__) //true co
js 原型链 成员查找机制
weixin_42448623的博客
10-12 542
如何形成原型链 Object.prototype 所有对象的最终原型 function Per(){ } console.log(Per.prototype); Per.prototype.__proto__ = Object.prototype; 原型还有原型 function Ground(lastname){ this.lastname = lastname; } Ground.p...
原型以及原型链
梦在风中的博客
03-30 648
js中的原型和原型链         当我们使用构造函数时，每次实例化构造函数的时候，也就是用new改变函数的指向时，在函数中我们有一些属性不能够完全使用时，这些不使用的属性也会被创建出来，这样就会在我们的计算机中无形的增加计算机的内存，所以有了我们更加优化的节省计算机内存的方法，也就是原型。 每个函数在创建的时候都会自带一个原型对象。比如： var Fn = functio
JS原型链——即数据查找时的链式结构
摸鱼小队
04-02 623
一、前置知识 1.构造函数 （Person） 定义：构造函数就是一个普通函数，一般首字母大写，配合new可以新建对象。 function Person () { this.name = '小卤蛋'} 2.原型对象（Person.prototype） 定义： 任何一个函数都有一个prototype属性，函数的prototype属性值就是这个函数的原型对象 作用： 1、 解决构造函数创建对象内存浪费问题 2、把属性和方法添加在该函数原型对象中，创建出来的实例对象都可以访问原型上的方法，内存中只有一份 3.原
原型链查找属性的顺序 + 原型链的三角关系
qq_38857381的博客
05-11 2208
原型：是一种关系，实例对象和原型对象的一种关系，关系是通过原型来联系的 原型链：任何一个对象都有 __proto__ 属性， 指向了原型对象，原型对象也是对象，也有__proto__ 属性，指向了自己的原型对象，这样形成的链式结构叫做原型链。 先要了解： （1）实例对象中有__proto__原型。指向了构造函数的prototype的 （2）函数中有prototype原型，指向的是某个构造...
解释原型和原型链
最新发布
03-08
<think>好的，用户现在需要我解释原型和原型链。之前他们问过闭包，现在转向原型相关的问题，可能是在学习JavaScript的核心概念。我需要确保他们理解这两个概念，以及它们在JavaScript中的作用。 首先，用户可能已经了解闭包，现在想深入对象和继承机制。原型和原型链是JavaScript中实现继承的基础，但很多初学者会觉得这部分有点抽象。我得用简单易懂的语言，结合例子来说明。 原型是什么？每个JavaScript对象都有一个原型对象，从中继承属性和方法。构造函数通过prototype属性指向原型，而实例通过__proto__访问原型。这部分需要分点解释，避免混淆。 原型链呢？当访问对象的属性时，如果对象本身没有，就会沿着原型链向上查找，直到找到或到达null。这个过程就是原型链的机制。比如实例的原型是构造函数的prototype，而构造函数的prototype本身可能有自己的原型，形成链式结构。 要注意用户可能的疑问点，比如构造函数和实例的关系，__proto__和prototype的区别，以及如何通过原型链实现继承。可能需要用例子来演示，比如Person构造函数，实例person如何访问原型上的方法。 还要提到现代JavaScript中推荐使用Object.getPrototypeOf而不是直接访问__proto__，以及ES6的class语法糖背后还是基于原型链的。这样用户能理解新旧方法的不同，但本质是一样的。 用户可能的问题包括为什么要有原型链，和类继承有什么不同，或者如何自己实现继承。这时候可能需要补充原型继承的优点，比如灵活、节省内存，以及可能的缺点，比如理解成本高。 另外，注意用户之前的问题是关于闭包的，可能他们正在系统学习JavaScript的核心概念，所以需要确保解释清晰，结构合理，帮助他们建立知识体系。最后总结原型链的重要性，比如在继承、方法共享、instanceof机制中的应用。</think>--- ### 一、原型（Prototype）的本质 **每个 JavaScript 对象都有一个隐藏的 `[[Prototype]]` 属性**，指向它的原型对象（即父对象）。 通过原型，对象可以继承其他对象的属性和方法。 --- ### 二、关键概念对应关系 | 角色 | 描述 | 代码表示 | 实际指向 | |---------------|--------------------------|-------------------|----------------------| | 构造函数 | 创建对象的模板 | `function Foo(){}`| - | | `prototype` | 构造函数的原型属性 | `Foo.prototype` | 实例的原型对象 | | 实例 | 构造函数创建的具体对象 | `const obj = new Foo()` | - | | `__proto__` | 实例的原型引用（已弃用） | `obj.__proto__` | `Foo.prototype` | | `Object.getPrototypeOf()` | 获取对象的原型（推荐） | `Object.getPrototypeOf(obj)` | 同 `__proto__` | --- ### 三、原型链（Prototype Chain）的运作 1. **查找规则**： 当访问对象属性时，会按以下顺序查找： **对象自身属性 → 原型对象属性 → 原型的原型属性 → ... → `null`** 2. **链式结构演示**： ```javascript // 1. 定义构造函数和原型方法 function Person(name) { this.name = name; } Person.prototype.sayHi = function() { console.log("Hi, I'm " + this.name); }; // 2. 创建实例 const person = new Person("Alice"); // 3. 属性查找路径 person.sayHi(); // 触发原型链查找： // person → Person.prototype → Object.prototype → null ``` 3. **原型链终点**： 所有对象的原型链最终都指向 `Object.prototype`，而 `Object.prototype.__proto__` 是 `null`。 --- ### 四、手绘图解原型链 ``` 实例 (person) │ ▼ __proto__ Person.prototype 原型对象 │ ↑ constructor │ │ └─────────────────────┘ ▼ __proto__ Object.prototype 顶级原型 │ ▼ __proto__ null ``` --- ### 五、原型链的核心作用 1. **实现继承**： ```javascript function Student(name, grade) { Person.call(this, name); // 继承属性 this.grade = grade; } Student.prototype = Object.create(Person.prototype); // 继承方法 Student.prototype.study = function() { /*...*/ }; ``` 2. **方法共享**： 所有实例共享原型上的方法，节省内存（与每次创建实例都复制方法对比）。 3. **动态修改**： 修改原型会立即影响所有实例： ```javascript Person.prototype.sayBye = function() { console.log("Bye!"); }; person.sayBye(); // 所有实例均可调用 ``` --- ### 六、关键特性 - **`instanceof` 的原理**： 检查构造函数的 `prototype` 是否在对象的原型链上。 - **现代替代方案**： ES6 的 `class` 语法本质仍是原型链（语法糖），如： ```javascript class Person { constructor(name) { this.name = name; } sayHi() { console.log(`Hi, I'm ${this.name}`); } } // sayHi 实际存储在 Person.prototype 上 ``` --- ### 七、总结要点 | 概念 | 核心描述 | 典型应用场景 | |-----------|---------------------------------------|----------------------| | 原型 | 对象继承属性和方法的来源 | 方法共享、继承实现 | | 原型链 | 通过 `__proto__` 链接的多级查找机制 | 属性查找、继承体系 |
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值