JavaScript简餐——原型链是什么？
文章目录
- 前言
- 一、原型链
- 二、原型链示例
- 二、示例图解
- 总结
前言
写本《JavaScript简餐》系列文章的目的是记录在阅读学习《JavaScript高级程序设计（第4版）》一书时出现的各个知识点。虽是对读书的笔记和总结，但是希望它轻量、简洁、犀利，不会引起阅读疲劳，可以在碎片化时间和闲暇之余轻巧地沐浴一下知识点。每篇文章只针对一个小部分进行讲解式的梳理，来达到个人复习总结和分享知识的目的。
一、原型链
重温一下构造函数，原型和实例的关系：每个构造函数都有一个原型对象，原型有一个属性指回构造函数，而实例有一个内部指针__proto__指向原型。并且我们还要知道，实例与构造函数原型之间有直接的联系，但实例与构造函数之间没有。那么，如果原型是另一个类型的实例呢？那就意味着这个原型本身有一个内部指针指向另一个原型，相应地另一个原型也有一个指针指向另一个构造函数。这样就实现了实例和原型之间构造了一条链，这条链就是我们所说的原型链。说白了就是疯狂套娃。下面看一个实例代码：
二、原型链示例
function country () {this.countryName = 'China';}function province () {this.provinceName = 'Zhejiang';}function city () {this.cityName = 'Hangzhou';}province.prototype = new country(); //构造函数province()的原型设为构造函数country()的实例city.prototype = new province(); //构造函数city()的原型设为构造函数province()的实例let myCity = new city();console.log(`${myCity.cityName} is the capital of ${myCity.provinceName}, ${myCity.countryName}`);console.log(myCity);
这里我们有三个构造函数，分别代表了国家、省份和城市，并且都有代表各自名字的属性。定义好构造函数之后，我们让构造函数province()的原型设为构造函数country()的实例，再让构造函数city()的原型设为构造函数province()的实例。最后我们定义一个City()的实例。这样就构成了一个原型链。来看看打印结果：
可以看到，myCity现在可以访问到以上所有构造函数的属性。下面再来分析一下我们对city对象实例的展开部分吧。首先可以看到city实例的[[prototype]]指针指向的原型对象中有一个[[Prototype]]属性和一个provinceName的属性，因为我们把原来city()构造函数的原型对象替换成了province()构造函数的实例，所以city()构造函数的原型对象中就会有province()构造函数实例的[[Prototype]]指针和provinceName属性。再往下来还是同样的道理，city()构造函数的原型对象中的[[Prototype]]指针指向province()构造函数的原型对象，而这个原型对象又被我们替换成了country()构造函数的实例，所以province()构造函数的原型对象中也会有[[Prototype]]属性和countryName属性。再往下，province()构造函数的原型对象中的[[Prototype]]指针指向country()构造函数的原型对象，由于country()构造函数的原型没有被我们改变，所以它走常规流程，只获得constructor属性。不过，任何函数的默认原型都是一个Object的实例，所以最后可以看到其原型对象中有一个[[Prototype]]指针指向Object原型对象。下面再来上图解，以便更直观地理清我们得出的结论。
二、示例图解
可以根据这张图来对照着上面的结论来论证我们的分析啦。
总结
以上就是今天要讲的内容，本文简单介绍了原型链，并且根据代码实例进行了步步分析和图解。下一篇我们来讲一下JavaScript继承中的原型链继承。撒花~
JavaScript简餐——原型链是什么？相关推荐
- JavaScript简餐——原型是个啥？
文章目录 前言 一.理解原型 二.对象实例与原型 三.图解 四.判断对象实例和原型 总结 前言 写本<JavaScript简餐>系列文章的目的是记录在阅读学习<JavaScript高 ...
- JavaScript简餐——继承之原型链继承
文章目录 前言 一.实现方式 二.继承实例 三.问题所在 1.引用值误修改 2.子类型实例化时无法给父类构造函数传参 四.总结 前言 写本<JavaScript简餐>系列文章的目的是记录在 ...
- JavaScript简餐——关于盗用构造函数
文章目录 前言 一.什么是盗用构造函数? 二.使用实例 三.参数传递 四.盗用构造函数的问题所在 五.总结 前言 写本<JavaScript简餐>系列文章的目的是记录在阅读学习<Ja ...
- JavaScript简餐——类构造函数
文章目录 前言 一.类的构造函数及其实例化 二.把类当成特殊函数 三.总结 前言 写本<JavaScript简餐>系列文章的目的是记录在阅读学习<JavaScript高级程序设计(第 ...
- JavaScript简餐——寄生组合继承
文章目录 前言 一.什么是寄生组合继承? 二.寄生组合继承的基本模式 三.总结 前言 写本<JavaScript简餐>系列文章的目的是记录在阅读学习<JavaScript高级程序设计 ...
- JavaScript简餐——关于类的继承
文章目录 前言 一.继承基础 二.super关键字 三.抽象基类 四.总结 前言 写本<JavaScript简餐>系列文章的目的是记录在阅读学习<JavaScript高级程序设计(第 ...
- Javascript简餐——组合继承是个啥
文章目录 前言 一.什么是组合继承? 二.使用实例 三.总结 前言 写本<JavaScript简餐>系列文章的目的是记录在阅读学习<JavaScript高级程序设计(第4版)> ...
- JavaScript简餐——闭包
文章目录 前言 一.闭包概念 二.闭包的副作用 三.闭包的用途 1.在函数外部读取函数的内部变量 2.利用外部函数变量缓存值 四.总结 前言 写本<JavaScript简餐>系列文章的目的 ...
- JavaScript简餐——原型式继承
文章目录 前言 一.什么是原型式继承? 二.ECMAScript5中的原型式继承 三.总结 前言 写本<JavaScript简餐>系列文章的目的是记录在阅读学习<JavaScript ...
最新文章
- linux下使用inotify实时监控文件变更，做完整性检查
- 超图iServer发布一个示例3D场景
- SNMP功能开发简介 五 使用MIB Builder创建MIB文件图文介绍
- 火狐浏览器书签（收藏夹）全部消失，历史记录也消失，如何恢复
- 标签体系、用户分群、用户画像「玩味」解读，你沦为形式主义了吗？
- 云信市场运营总监：产品运营不得不避免的5个大坑
- Go语言生成区间随机数
- SpringMVC的请求参数,类型转换器(日期格式),请求映射
- java 静态对象赋值_基于Java class对象说明、Java 静态变量声明和赋值说明(详解)...
- Trie：hdu 4825、1251、1247、Poj 3764
- java基本特性_Java面试总结之Java基础
- C语言fread函数了解
- 树莓派 Learning 002 装机后的必要操作 --- 03 替换软件源
- 【机器学习】机器学习从零到掌握之十三 -- 教你理解Logistics回归之梯度上升算法
- Flutter文本标签TextTagWidget，搜索记录流式布局显示文本标签
- python入门经典27版_【python】编程语言入门经典100例--27
- linux下对进程按照内存使用情况进行排序
- linux alias使用
- Python 基礎 - 變量
- Java多线程导出Excel表格， 100w数据量