网站首页 > 技术文章 正文
先看一个典型的单向链表
上面这段代码,是一个典型的单向链表
我们只能通过n.next来找到下一个节点
但是没有办法从当前节点找到上一个节点
不过这和原型链有什么关系呢? 目前还没有关系。
原型对象从哪来?
分析上面这段代码
为什么obj明明是空的,却还能调用toString方法?
这toString方法是哪里来的呢?
再比如我们的数组对象
其实,这些方法都来自于一个叫做原型的家伙
我们可以使用 对象.__proto__ 的形式把原型对象打印出来
这是所有对象的一个隐式属性, 也就是正常情况下打印对象, 我们是看不到这个属性的
但我们依然可以通过__proto__ 这样一个比较奇怪的属性名字来访问原型对象
这个属性名称访问起来确实不够方便,实际上它还有另外一种访问方式
也是一种比较正式的访问方式, 就是通过函数名来访问
例如看下面这个例子
现在我们大概有了一些疑问
- 1.原型对象中的所有属性,实例对象都能随便访问吗?
- 2.每个实例对象都有自己的原型对象, 还是大家共用一个?
- 3.实例对象自己的属性和原型的属性冲突了, 会访问谁呢?
- 4.原型对象跟继承有什么关系?
- 5.原型链又是怎么来的?
我们依次来解决这几个疑问
- 原型对象中的所有属性,实例对象都能随便访问吗?
废话不多说, 我们来试验一下, 就知道结果
在上面的代码中,我们创建一个构造函数 Phone
同时我们给原型对象,添加了 price、color两个属性
同时添加了 playmusic、phonecall两个方法
接下来我们通过实例对象来访问一下这些内容
可以看到,原型中的属性和方法都可以被实例对象直接访问!
- 每个实例对象都有自己的原型对象, 还是大家共用一个?
这是一道非常简单的数学证明题,证明过程如下:
最终结论是, 所有实例对象共享同一个原型对象
- 实例对象自己的属性和原型的属性冲突了, 会访问谁呢?
我们再来试验一下
可以看到, 如果对象本身存在这个属性或方法, 会优先访问自己的
如果没有, 则访问原型的属性, 访问过程如下图
- 原型对象跟继承有什么关系呢 ?
请你再思考一个问题
如果原型也是一个对象
那么它必然也应该有自己的原型对象,不是吗?
我们可以通过 p1.__proto__.__proto__ 进行访问
我们把图画的再简单一点
从图中可以看出,只要原型对象一直存在
对象P1就拥有了所有原型对象的能力, 我们也管这个叫做 继承
而这些原型对象之间是什么关系呢?
p1
p1.__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
原型的最重要的作用就是扩展能力
猜你喜欢
- 2024-11-10 这样理解 JS 原型链,通透 js原型链的理解
- 2024-11-10 JavaScript-原型链 javascript 原型,原型链 ? 有什么特点?
- 2024-11-10 javascript原型链 js原型链的用处
- 2024-11-10 js 原型/原型链/构造函数/实例/继承
- 2024-11-10 【JavaScript 高级】深入了解原型链
- 2024-11-10 快速读懂JavaScript中的原型链 js的原型和原型链是什么
- 2024-11-10 你可能不太理解的JavaScript - 原型与原型链
- 2024-11-10 我在jacascript中学习到的那些原型链,你知道吗?
- 2024-11-10 JavaScript中的原型prototype和__proto__的区别及原型链概念
- 2024-11-10 面试问题分享 - 5:解释一下 原型、构造函、实例、原型链 之间的关系
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-