js原型和原型链_如何讲清楚JS原型链？

最新推荐文章于 2024-12-27 23:53:08 发布
最新推荐文章于 2024-12-27 23:53:08 发布
阅读量160 收藏 1
点赞数
文章标签： js原型和原型链
本文围绕JavaScript原型和原型链展开。先以单向链表引入，探讨原型对象来源，通过实例解答原型属性访问、实例对象原型共享、属性冲突访问、原型与继承关系及原型链形成等疑问，还补充了原型对象规则，指出原型重要作用是扩展能力。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

先看一个典型的单向链表

3cce475f5af4d026904cb781fac9b336.png

上面这段代码，是一个典型的单向链表

我们只能通过n.next来找到下一个节点

但是没有办法从当前节点找到上一个节点

0d7f617a7d25bc6f077894ca8537f91f.png

不过这和原型链有什么关系呢？ 目前还没有关系。

原型对象从哪来？

3f774e56e557ca3aeac7e966aa05896e.png

分析上面这段代码

为什么obj明明是空的,却还能调用toString方法?

这toString方法是哪里来的呢?

再比如我们的数组对象

170f791c186f6de55e755f5abf5c8b0c.png

其实,这些方法都来自于一个叫做原型的家伙

我们可以使用 对象.__proto__ 的形式把原型对象打印出来

dd550f5d8294acf6e8d947e9225d8546.png

这是所有对象的一个隐式属性, 也就是正常情况下打印对象, 我们是看不到这个属性的

但我们依然可以通过__proto__ 这样一个比较奇怪的属性名字来访问原型对象

这个属性名称访问起来确实不够方便,实际上它还有另外一种访问方式

也是一种比较正式的访问方式, 就是通过函数名来访问

例如看下面这个例子

adbe95ad5516061a3bfe887e9db9d56c.png

现在我们大概有了一些疑问

  • 1.原型对象中的所有属性,实例对象都能随便访问吗?
  • 2.每个实例对象都有自己的原型对象, 还是大家共用一个?
  • 3.实例对象自己的属性和原型的属性冲突了, 会访问谁呢?
  • 4.原型对象跟继承有什么关系?
  • 5.原型链又是怎么来的?

我们依次来解决这几个疑问

  • 原型对象中的所有属性,实例对象都能随便访问吗?

废话不多说, 我们来试验一下, 就知道结果

c1dfc20158a7525aa0956b80905327a0.png

在上面的代码中,我们创建一个构造函数 Phone

同时我们给原型对象,添加了 price、color两个属性

同时添加了 playmusic、phonecall两个方法

接下来我们通过实例对象来访问一下这些内容

2d2679a7a52e51d7279ad2aa4abc127b.png

可以看到,原型中的属性和方法都可以被实例对象直接访问!

  • 每个实例对象都有自己的原型对象, 还是大家共用一个?

这是一道非常简单的数学证明题,证明过程如下:

c60b6de72d8ec98a19ef238f77d26b64.png

最终结论是, 所有实例对象共享同一个原型对象

  • 实例对象自己的属性和原型的属性冲突了, 会访问谁呢?

我们再来试验一下

455bb698ab19832ef824272057966c35.png

可以看到, 如果对象本身存在这个属性或方法, 会优先访问自己的

如果没有, 则访问原型的属性, 访问过程如下图

cc81b430d2d9988e4f6dd9c00fc7f49a.png
  • 原型对象跟继承有什么关系呢 ?

请你再思考一个问题

如果原型也是一个对象

那么它必然也应该有自己的原型对象,不是吗?

我们可以通过 p1.__proto__.__proto__ 进行访问

8fb167d87b77cdf49ddc29f61cea93b0.png

我们把图画的再简单一点

0a99ed6df478ffd6500d756cddb1f780.png

从图中可以看出,只要原型对象一直存在

对象P1就拥有了所有原型对象的能力, 我们也管这个叫做 继承

而这些原型对象之间是什么关系呢?

p1p1.__proto__p1.__proto__.__proto__p1.__proto__.__proto__.__proto__

原型链, 因此而得名

需要补充的问题

原型对象真的没有尽头吗?

当然不是的, 原型对象由浏览器自动创建, 当然也有它自己的规则

规则如下:

1.每个构造函数在诞生的时候, 都会创建一个该函数的实例对象作为默认原型

相当于 Phone.prototype = new Phone();

2.而这个原型对象的原型, 则默认指向Object.prototype

相当于 Phone.prototype.__proto__ = Object.prototype;

3.当然, Object.prototype 也是它自己的实例

相当于 Object.prototype = new Object();

4. 但是, Object.prototype不再拥有原型对象

相当于 Object.prototype.__proto__ = null

5. 因此,原型对象是有上限的

p1.__proto__ 可访问

p1.__proto__.__proto__ 可访问

p1.__proto__.__proto__.__proto__ 为null

原型的最重要的作用就是扩展能力

4beb309fe5d58cc6326a3b6d91a15c24.png
js的重点7：创建一个构造函数并生成实例并打印出构造函数的原型与实例的原型、数组对象的原型添加求和的方法、ES5实现继承、使用数组方法filter来实现数组的去重
小黄呀呀呀的博客
10-09 854
1、创建一个构造函数并生成实例并打印出构造函数的原型与实例的原型 <body> <!-- 创建一个构造函数并生成实例并打印出构造函数的原型与实例的原型 --> <script> function Star() { console.log('我是一个构造函数'); } //生成实例 var s = new Star() //打印出构造函数原型 console.log(Star.prototype);
Javascript原型与原型链由浅入深，让你再不害怕大小厂面试官，满满干货，遇到原型链的题就开心
luolvzhou的博客
12-25 1405
什么是原型？有铁子肯定会霸气回怼，ES6没出class 类的时候，Javascript想要实现面向对象这一层面的数据共享，想要占用的内存更小一点，想要保持自己面向对象特征下的封装，继承，多态，然后提供了原型和原型链来方面实现这一特性。当然，这话是没错的，可是你拿这个东西真正去理解原型和原型链的时候，你又懵了，因为面试官又会问，ES6的class跟原型之间什么关系，有什么共性？然后又答不上来。
JS的原型链
菜鸟先飞
03-25 491
原型链：每一个对象都有自己的原型，而原型也是对象，也有自己的原型，形成一个链式结构，称之为原型链。 1.怎么去理解原型链呢？ 我的办法是把原型对象理解成一个母系氏族社会，原型对象（母）、构造函数（父）、实例对象（子）： 实例对象（子）拥有的__proto__ 属性指向原型对母（母）； 原型对象（母）拥有的（constructor）属性指向构造函数（父）； 构造函数（父）拥有的（prototype）属性指向原型对象（母）； arr的对象原型链 //js通过原型链来实现继承的。 let arr = [1,
JS 原型原型链
无知小九的博客
08-02 301
可以看到重写原型的时候p的构造函数不是指向Person了，因为直接给Person的原型对象直接用对象赋值时，它的构造函数指向的了根构造函数Object，所以这时候。所有继承了 Object 的对象都会继承到 hasOwnProperty 方法。这个方法可以用来检测一个对象是否含有特定的自身属性，和。in 运算符不同，该方法会忽略掉那些从原型链上继承到的属性。原型链上的所有原型都是对象，所有的对象最终都是由。是构造函数，原型链终点是。，所以，原型链的终点是。...
js的原型链
weixin_43492777的博客
12-01 422
这是浏览器的window原型的上级 最上级是null。你就理解_proto是什么意思了。但如果要理解 可以用这种方法。
JS（原型链）
simon_dg的博客
09-26 3007
在聊原型链之前多对吹几句，为啥需要对象？对象的好处？在传统的开发中（也叫面向过程）。顾名思义，面向过程是你要写所有的操作代码，在这个过程中，代码重复，一旦出错或者用户修改要求，要修改的代码就很多，后期维护人员绝对累死。         在生活中，面向过程就是，你要去买东西，你要自己亲自去买，而面向对象，就是你在家里，叫别人去买。这里的“别人”就是对象。你只知道这个对象可以给你买来东西，但买的过程，
一文大白话讲清楚 ：类，实例，prototype，__proto__和原型链之间的关系
xiaobangkeji的博客
12-23 1705
一文大白话讲清楚 ：类，实例，prototype，__proto__和原型链之间的关系
一文大白话讲清楚javascript继承，包括原型链继承，构造函数继承，组合式继承，原型式继承，寄生式继承和寄生组合继承
xiaobangkeji的博客
12-27 694
一文大白话讲清楚javascript继承，包括原型链继承，构造函数继承，组合式继承，原型式继承，寄生式继承和寄生组合继承
Javascript原型和原型链透析详解—下（手写原型链，图文说明）
weixin_45745641的博客
01-12 537
前言 上一篇文章从class类入手写了个小案例，从而引入类型判断的方法 instanceof，带大家了解了什么是原型。这篇接着上篇去讲，给大家介绍重头戏—原型链，面试高频：如何手写原型链，对原型链的理解。 没看过上集的建议点下方链接去瞅瞅，图文并茂，方便理解本文 ✿(。◕ᴗ◕。)✿ Javascript原型和原型链透析详解—上 原型链 上集文章中我们写了一个案例。在案例中定义了父类People，子类Student继承父类，那么就有如下全等关系： People的显示原型prototype 全等 Studen
浅谈JS原型与原型链（一）
weixin_34357436的博客
11-18 378
最近学习JavaScript原型与原型链的时候，被这块知识烧得脑壳疼，prototype与__proto__混淆不清。网上各种图解，都画的好复杂，绕老绕去，不明所以，看得越来越糊涂。还是亲自动手敲敲，理解理解原型和原型链究竟是什么。 1、原型 （1）首先，什么是原型？ 1>.定义：在JavaScript 中，每当定义一个对象的时候，对象中都会包含一些预定义的属性。其中每个函数对象都有一个pr...
JavaScript中原型以及原型链
web00_11的博客
08-14 1007
js中原型以及原型链 每个函数身上都有一个原型，我们称之为 原型对象 函数的 prototype 属性指向原型对象，原型对象上的 constructor 指回构造函数 function Person() { this.uname = '张三', this.age = 22 } // 原型对象 Person.prototype.sex = '男' Person.prototype.head = 1 Person.prototype.sayName = function () { console.
Js 原型及原型链
单飞吧的博客
09-15 393
以下三点需要谨记 1.每个对象都具有一个名为__proto__的属性，字面量对象除外； 2.每个构造函数（构造函数标准为大写开头，如Function()，Object()等等JS中自带的构造函数，以及自己创建的）都具有一个名为prototype的方法（注意：既然是方法，那么就是一个对象（JS中函数同样是对象），所以prototype同样带有__proto__属性）； 3.每个对象的__proto__属性指向自身构造函数的prototype； 示例一 let obj = {} console.log(obj)
十一、JavaScript 原型和原型链
拾荒人博客
10-12 174
一、原型 prototype就是英语“原型”的意思。原型是构造函数创建对象的原始模型 原型的特点: 原型也是对象，原型是函数对象的一个属性。 原型自带constructor属性， constructor指定构造函数。 构造函数创建出的对象会继承原型的属性和方法。 在JavaScript中，任何一个函数，都有一个prototype属性，指向一个对象。打印prototype属性,你会发现这个属性指向一个空对象。打印prototype的类型，发现是object类型。 1.构造函数中prototyp
js 打印出来的节点多了m_js基础----dom节点使用console.log打印始终是最新的现象（待验证）...
weixin_32429589的博客
12-23 277
今天在复习dom节点的创建的时候发现打印日志的时候，不管log的位置在哪里，打印出的节点始终是最新的这就让我很困惑了，js不是由上到下执行的吗，然后问了同事，他分享了打印对象时候的类似的现象先展示下打印dom节点的demo/*创建标签节点*/var p_tag = document.createElement('p');console.log('p_tag: ', p_tag);/*创建文本节点*...
JS 原型（prototype）详解
自由的code
12-15 631
JS的原型是什么？ 首先来看一段代码： function C() { console.log("C is a class"); } function f() { console.log("f is a function"); } 在js中"function" 关键字有两个含义，既可以把它当作一个普通函数关键字，也可以把它当作类的构造函数（即定义类）关键字。 上面定义的两
10.1 JS中的原型
lazy_tomato的博客
06-08 407
多年以前学过JS中的原型，但是并没有彻底理解。导致每次看到 prototype —> 头大。深入学习JS的过程中才发现，原型无处不在。时至今日，就让我再学习一次 JavaScript 中的原型，顺便做个总结。我定义一个函数 Tomato,然后打印一下它。 可以发现函数Tomato，除了基本的几个属性，它还有一个属性：prototype。函数的prototype属性是什么？可以到上面的截图，就是一个对象。基于函数 ，我去 一个对象 ，然后打印一下 出来的对象 只有一个属性 。可以通过来获取的属性也可以通
js原型，原型链
dtbk123的博客
07-24 236
js中的对象中有一个prototype属性，这个就是函数中的原型，他的值也是一个对象，所以他也有自己的原型，这样连接起来就形成了原型链，原型链的顶端是object，它的prototype为null，如果自己设置了属性和函数，即任意一个对象都可以调用object原型上的函数和获取它的属性，前提是对象到object之间无同名属性和函数，再看下面代码 function Test(name){ ...
02 原型原型链
a201908130313的博客
10-02 237
02 彻底理解原型链 引言： 终于搞懂了JS中的原型，原型链。 现在来总结其中的规律。 看懂图就看懂了原型链 这张图在我不理解原型链，_ proto _，prototype之前是根本看不懂的，但也是弄懂了这张图我才充分理解了原型链到底是怎么回事。 可以说，看懂这张图，你就大致理解了原型链。 但在看懂这张图之前需要一些前置知识 JS的引用数据类型 JS是7种基础数据类型和1种引用类型，这个引用数据类型就是Object，其中又含有（Function，Array，Map，Set，Math…)等多种分类，但这些都
什么是js对象的原型链
最新发布
04-30
<think>好的，用户想了解JavaScript对象的原型链概念和工作原理。首先，我需要回忆一下之前关于Object.keys()的讨论，确保这次回答保持连贯。用户可能已经知道Object.keys()不包含原型链属性，现在想深入理解原型链本身。 首先，要解释原型链是什么。根据引用[4]，原型链是查找对象属性的链式规则，访问属性时会沿着__proto__向上查找，直到Object.prototype为止。需要把这个过程讲清楚，可能用例子说明。 然后要提到构造函数和原型对象的关系，比如每个函数都有prototype属性，实例的__proto__指向构造函数的prototype。这部分可能需要结合引用[1]和[3]中的内容，说明原型链如何实现继承。 接下来需要说明原型链的工作原理，分步骤解释属性查找过程。比如自身属性不存在时，沿着原型链查找，直到null。这里可以引用用户提供的引用[4]中的描述，强调查找机制。 还要对比原型链继承和类继承的区别，突出JavaScript的原型链特性，如动态性。引用[3]提到内置对象的原型可以修改，这也是一个重点，可以举例子，比如给Array原型添加方法。 可能用户会混淆__proto__和prototype，需要明确两者的区别。__proto__是实例的属性，指向构造函数的prototype，而prototype是函数的属性，用于实例继承。 最后总结原型链的作用，比如实现继承、共享方法，以及注意事项，如避免循环引用或过度修改内置原型。同时，相关问题需要覆盖用户可能进一步的问题，如修改原型的影响、原型链终点等，参考之前的引用内容来组织。</think>### JavaScript 原型链的概念与工作原理 JavaScript 的原型链（Prototype Chain）是对象之间实现属性/方法继承的核心机制。它通过将对象与原型对象链接起来，形成一个链式结构，使得对象可以访问其原型链上所有可枚举的属性和方法[^1][^4]。 --- #### **核心概念** 1. **原型对象（Prototype）** - 每个 JavaScript 对象（除 `null` 外）都有一个隐式引用 `__proto__`，指向其构造函数的 `prototype` 属性（即原型对象）。 - 例如，构造函数 `Person` 的实例 `p`，其 `p.__proto__ === Person.prototype`。 2. **构造函数与原型** - 函数在定义时会自动创建 `prototype` 属性（原型对象），而实例的 `__proto__` 默认指向该原型对象。 - 示例： ```javascript function Person(name) { this.name = name; } Person.prototype.sayHello = function() { console.log("Hello"); }; const p = new Person("Alice"); console.log(p.__proto__ === Person.prototype); // true ``` 3. **原型链的终点** - 所有对象的原型链最终指向 `Object.prototype`，而 `Object.prototype.__proto__` 是 `null`，表示链的终点[^4]。 --- #### **工作原理** 1. **属性访问规则** - 当访问对象的属性（如 `obj.x`）时，JavaScript 引擎会按以下顺序查找： 1. **对象自身属性**：检查 `obj` 自身是否直接定义了 `x`。 2. **原型链向上查找**：若未找到，则沿着 `obj.__proto__` 依次查找原型链上的每个原型对象。 3. **终止条件**：直到找到属性或抵达 `Object.prototype`（若仍未找到，返回 `undefined`）[^4]。 - 示例： ```javascript const parent = { a: 1 }; const child = Object.create(parent); child.b = 2; console.log(child.a); // 1（来自原型链） console.log(child.b); // 2（自身属性） ``` 2. **继承的实现** - 原型链是 JavaScript 实现继承的基础。例如，子类通过 `Child.prototype = Object.create(Parent.prototype)` 继承父类的方法[^1]。 - 动态性：若修改原型对象的属性，所有实例会立即继承这一变化[^3]： ```javascript Person.prototype.sayHello = function() { console.log("Hi"); }; p.sayHello(); // 输出 "Hi"（动态更新） ``` 3. **与类继承的对比** - 传统类继承是静态的，而 JavaScript 的原型链是动态的，允许运行时修改原型链[^1][^3]。 --- #### **关键特性与场景** 1. **共享方法与属性** - 原型对象上的属性和方法被所有实例共享，节省内存[^4]。 ```javascript function Car() {} Car.prototype.wheels = 4; const car1 = new Car(); const car2 = new Car(); console.log(car1.wheels, car2.wheels); // 4, 4 ``` 2. **内置对象的原型链** - 数组、字符串等内置对象通过原型链扩展方法（如 `Array.prototype.map`）[^3]。 - 示例：扩展 `Array` 原型： ```javascript Array.prototype.last = function() { return this[this.length - 1]; }; console.log([1, 2, 3].last()); // 3 ``` 3. **原型链的潜在问题** - 过度修改原型可能导致命名冲突或性能问题（如 `for...in` 遍历意外包含原型链属性）[^3]。 --- ### **总结** | 特性 | 说明 | |--------------------|----------------------------------------------------------------------| | **动态继承** | 原型链允许运行时动态修改继承关系[^3]。 | | **链式查找** | 属性查找沿 `__proto__` 逐级向上，直至 `Object.prototype`[^4]。 | | **共享属性** | 原型对象上的属性和方法被所有实例共享[^4]。 | | **与类的区别** | 原型链是 JavaScript 特有的动态继承机制，不同于静态类继承[^1][^3]。 | --- ### 相关问题 1. 如何通过原型链实现继承？ 2. 修改内置对象的原型（如 `Array.prototype`）有哪些风险？ 3. 原型链的终点为什么是 `null`？ 4. `__proto__` 和 `prototype` 有什么区别？ 如需进一步解释，请随时提问！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值