js原型和原型链_如何讲清楚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
<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、付费专栏及课程。

余额充值