JavaScript原型，原型链

最新推荐文章于 2025-11-24 03:12:01 发布
原创 最新推荐文章于 2025-11-24 03:12:01 发布 · 852 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #原型模式 #开发语言

本文介绍了JavaScript中对象的__proto__属性和原型链的工作原理。对象通过__proto__查找属性，且JavaScript对象没有原型副本。构造函数的prototype影响实例的原型。原型链机制使得属性查找沿着原型链递归进行。

总体的概述

每个对象都会在其内部初始化一个属性，也就是__proto__，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去__proto__里找这个属性，这个__proto__有会有自己的__proto__，于是就这也一直找下去，也就是我们平时所说的原型链的概念。
按照标准，__proto__是不对外公开的，也就是说是个私有属性
关系：instance.constructor.prototype == instance. __proto __

特点：JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变

  • 当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 如果没有的
  • 就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象
原型 
  • JavaScript的所有对象中都包含了一个 [__proto__] 内部属性，这个属性所对应的就是该对象的原型
  • ·JavaScript的函数对象，除了原型 [__proto__] 之外，还预置了 prototype 属性
  • 当函数对象作为构造函数创建实例时，该 prototype 属性值将被作为实例对象的原型 [__proto__]。
原型链 
  • 当一个对象调用的属性/方法自身不存在时，就会去自己 [__proto__] 关联的前辈 prototype 对象上去找
  • 如果没找到，就会去该 prototype 原型 [__proto__] 关联的前辈 prototype 去找。依次类推，直到找到属性/方法或 undefined 为止。从而形成了所谓的“原型链”
开心点啦.
关注
Javascript原型链的原理详解
11-22
JavaScript原型链是JavaScript实现继承和共享属性的一种机制。在JavaScript中，每个对象都有一个内部属性`[[Prototype]]`，通常可以通过`__proto__`（非标准，但常见于许多环境）或`Object.getPrototypeOf()`来访问...
JavaScript原型链
03-25
JavaScript原型链是JavaScript语言中的一个核心特性，它关乎对象之间的继承关系。在JavaScript中，一切皆为对象，而原型链则是实现对象间属性和方法共享的一种机制。理解原型链对于深入学习JavaScript至关重要。 ...
javascript原型 原型链
gqk01的博客
08-20 1309
1 一切都是对象 “一切都是对象”这句话的重点在于如何去理解“对象”这个概念。 ——当然，也不是所有的都是对象，值类型就不是对象。 首先咱们还是先看看javascript中一个常用的运算符——typeof <script type="text/javascript"> //1. 基本 // typeof返回数据类型的字符串表达 // <!-- // 1. 分类 // * 基本(值)类型 // * String: 任意字符串 // * Number
JavaScript原型和原型链精讲
太阳与星辰的博客
02-17 1336
原型和原型链精讲
javascript中的原型与原型链_javascript 原型,原型链
2401_87288877的博客
09-22 1697
原型：每一个javascript对象(除null外)创建的时候，都会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型中“继承”属性。例如创建一个对象的时候都会同时关联一个对象，如图，关联的这个对象就是新建的对象obj的原型。
JavaScript 原型与原型链详解
小蜗牛的珍贵百宝箱
01-05 893
每个 JavaScript 对象都有一个与之相关的“原型”，这是一个对象，它包含了当前对象可以访问的属性和方法。原型是对象的模板或蓝图，通过原型链机制，实现了对象间的继承。原型是对象的一个属性，指向它的构造函数的原型对象。原型链是 JavaScript 对象通过原型相互连接的链条，用于继承属性和方法。JavaScript 的继承机制是基于原型链的，子对象可以继承父对象的属性和方法。通过__proto__和prototype，我们可以实现对象之间的继承和共享方法。
JavaScript 原型链详解
boyfsfs的博客
07-04 447
JavaScript的原型链是实现对象继承的一种机制。每个对象都有一个原型对象，对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型，并从中继承方法和属性，一层一层、以此类推。当我们试图访问一个对象的属性时，JavaScript 会首先在对象自身上查找该属性。如果没找到，就会继续在该对象的原型上查找，然后是原型的原型，以此类推，直到找到一个名字匹配的属性或到达原型链的末尾。它是 JavaScript 实现面向对象编程的核心机制之一。每个JavaScript对象都有一个指向其原型对象的内部链接。
JavaScript 原型和原型链详解
qq_46032105的博客
08-31 1065
JavaScript 中的原型和原型链是实现继承的核心机制。每个对象都有[[Prototype]]属性指向原型对象，通过构造函数创建的对象原型指向其prototype属性。原型链是由对象原型层层链接形成的链式结构，当访问属性时，引擎会沿原型链向上查找。Object.prototype是原型链顶端，其原型为null。这种机制支持属性查找和方法继承，提高代码复用性，如构造函数的实例可共享原型上定义的方法和属性。
一文读懂JavaScript原型链
zhuanzhuantech的博客
08-13 1158
每个对象（Object）都有一个私有属性指向另一个名为原型（prototype）的对象。原型对象也有一个自己的原型，层层向上直到一个对象的原型为null。根据定义，null没有原型，并作为这个原型链（prototype chain）中的最后一个环节。​ 摘自：MDN - 继承与原型链对象通过隐式原型(__proto__)属性指向其构造函数的原型对象(prototype)，进而通过原型对象(prototype)的隐式原型(__proto__)属性指向更高层级的原型对象(prototype)，最终指向。
javascript原型继承与原型链
2301_82023822的博客
04-10 1135
当访问一个对象的属性或方法时，首先查找这个对象自身有没有该属性如果没有就查找它的原型（也就是 __proto__ 指向的 prototype 原型对象）如果还没有就查找原型对象的原型（Object的原型对象）以此类推一直找到 Object 为止（null）__proto__ 对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线可以使用 instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上三、实现继承的方式。
JavaScript 原型 原型链 详解
m0_46221967的博客
12-08 404
JavaScript 原型，原型链 ，详解
JavaScript原型链污染学习记录
YJ_12340的博客
04-30 959
设计原型的初衷无非是对于每个实例对象，其拥有的共同属性没必要对每个对象实例再分配一片内存来存放这个属性。而可以上升到所有对象共享这个属性，而这个属性的实体在内存中也仅仅只有一份。CVE-2019-10744：在低版本中的lodash.defaultDeep函数中，Object对象可以被原型链污染，从而可以配合其他漏洞。我们创建的每个函数都有一个 prototype（原型）属性，这个属性是一个指针，指向一个对象，，发现这是一个迭代合并的过程，先判断是否都为对象。中（即匿名函数中），若为对象，则选择深拷贝。
深入理解javascript原型链和继承
01-21
在上一篇文章中，介绍了原型的概念，了解到在javascript中构造函数、原型对象、实例三个好基友之间的关系：每一个构造函数都有一个“守护神”——原型对象，原型对象心里面也存着一个构造函数的“位置”，两情相悦，...
精选资源
javascript原型和原型链
01-08
一、原型规则 1、所有的引用类型（数组、对象、函数）都具有对象特性，即可自由扩展属性（除了“null”） var array=[];array.a=1; var object={};object.a=1; function func(){}; func.a=1; 2、所有的引用类型...
Vue开发工具使用技巧
2509_93946471的博客
11-24 313
打开DevTools的"Events"标签页，所有组件间传递的事件都会按时间顺序列出来，连事件负载数据都能展开看详情。更绝的是，你还能手动触发事件——比如在父组件里模拟一个事件，直接测试子组件的响应逻辑，省得反复修改代码来调试。如果组件用了作用域插槽，可以在"Scoped Slots"子面板里实时查看slot传递的数据内容，比在模板里写调试代码清爽得多。路由调试经常被忽略。热重载调试时，如果发现修改代码后页面没及时更新，可以到DevTools的"Settings"里勾选"Log reloads"选项。
【基础】EGG.js 框架内置基础对象
林见鹿鸣
11-24 907
在。
Vue 项目实战《尚医通》，路由鉴权完成，笔记71
Rockandrollman的博客
11-23 143
Vue 项目实战《尚医通》，路由鉴权完成，笔记71
Vue网站
最新发布
2509_93947362的博客
11-24 187
给大家分享个实用技巧：组件通信时，简单的父子传参用props/$emit搞定，复杂场景就用Vuex，千万别为了省事滥用event bus，不然项目大了事件流会乱成麻花。以前写数据绑定总要搞一堆繁琐的DOM操作，现在一个双大括号{{data}}就能搞定，新手看了五分钟就能上手写页面。刚开始觉得小项目用Vuex太重量级，后来发现即便是最简单的购物车功能，随着业务复杂度的提升，最终还是得引入状态管理。特别是把相同业务逻辑抽离成composable函数后，在不同组件里直接引入就能用，代码复用率明显提升。
JavaScript原型 原型链
02-18
JavaScript 中的原型和原型链是理解其面向对象特性的关键部分。 ### 什么是原型 (Prototype)？ 每个函数在创建时都会自动获得一个名为 `prototype` 的属性，这个属性指向一个对象（称为原型对象）。当通过构造函数 (`new`) 创建实例时，该实例内部会有一个指针（通常表示为 `__proto__`），它指向构造函数的 `prototype` 属性所引用的对象。因此，所有从同一个构造函数创建出来的对象都共享相同的原型对象。 例如： ```javascript function Person(name) { this.name = name; } Person.prototype.sayHello = function() { console.log('Hello, I am ' + this.name); }; let person1 = new Person('Alice'); ``` 在这个例子中： - `person1.__proto__ === Person.prototype // true` - 当访问 `person1` 上不存在的方法如 `sayHello()` 时，JS 引擎会在它的原型上查找并找到该方法，然后执行之 ### 什么是原型链(Prototype Chain)? 原型链是指由一系列相互关联的原型组成的链条结构。当我们尝试读取某个对象的一个属性或调用其方法时，并不一定能在当前对象自身直接找得到；如果找不到，则继续沿著这条“线”向上级寻找直到根部(null)，这就是所谓的**委托机制**。 每当你创建一个新的普通对象 `{}` 或者使用 `Object.create(null)` 来建立自定义原型的对象外的所有对象，默认都有一个内置 Object 原型作为它们最终极祖先(`null`)之前的部分。 简单来说就是: 1. 对象本身 -> 如果没找到就去检查下一个层级... 2. 它们的直接原型对象(`__proto__`) 3. 再到更高级别的原型... 举个例子说明一下: ```js const animal = { breath: () => {console.log("Breathing");} }; function Dog(){ } Dog.prototype=animal; var doggy=new Dog(); doggy.breath(); // 输出 "Breathing" // 因为我们无法在 doggy 自身找到 .breath(), 所以沿着 __proto__ 寻找，在 Animal 那里找到了对应的实现. ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值