一篇文章让你搞懂JavaScript 原型和原型链


Posted in Javascript onNovember 23, 2020

本文由葡萄城技术团队原创并首发

转载请注明出处:葡萄城官网

与多数面向对象的开发语言有所不同,虽然JavaScript没有引入类似类的概念(ES6已经引入了class语法糖),但它仍然能够大量的使用对象,那么如何将所有对象联系起来就成了问题。于是就有了本文中我们要讲到的原型和原型链的概念。

原型和原型链作为深入学习JavaScript最重要的概念之一,如果掌握它了后,弄清楚例如:JavaScript的继承,new关键字的原来、封装及优化等概念将变得不在话下,那么下面我们开始关于原型和原型链的介绍。

什么是原型?

JS中的对象包含了一个prototype的内部属性,这个属性所对应的就是该对象的原型。

我们先看下图:a、b、c 分别为数组、对象、函数。

一篇文章让你搞懂JavaScript 原型和原型链

可以看到,三者都有一个属性:__proto__

一篇文章让你搞懂JavaScript 原型和原型链

这个 __proto__ 称作 隐式原型。

除此之外,c还有一个属性:prototype

一篇文章让你搞懂JavaScript 原型和原型链

这个prototype 称作 显式原型。

小结一下:

  • 所有引用类型(函数,数组,对象)都拥有__proto__属性(隐式原型)
  • 所有函数除了有_proto_属性之外还拥有prototype属性(显式原型)
  • 原型对象:每创建一个函数,该函数会自动带有一个prototype属性,该属性是一个指针,指向了一个对象,我们称之为原型对象。

函数除了有_proto_属性之外还拥有prototype属性,我们借助构造函数来寻找二者之间的关系。如下图:

一篇文章让你搞懂JavaScript 原型和原型链

一篇文章让你搞懂JavaScript 原型和原型链

总结如下(结合上图更容易理解):

1. 实例对象a只有__proto__(隐式原型),构造函数既有 __proto__(隐式原型)也有prototype(显式原型)

2. __proto__ 和 prototype 都是一个对象,既然是对象,就表示他们也有一个 __proto__

a.__proto__.__proto__
A.prototype.__proto__

3.实例对象a的隐式原型指向它构造函数的显式原型,指向的意思是恒等于

a.__proto__ === A.prototype

4. 当调用某种方法或查找某种属性时,首先会在自身调用和查找,如果自身并没有该属性或方法,则会去它的__proto__属性中调用查找,也就是它构造函数的prototype中调用查找。

什么是原型链?

先看下图,提出一个问题:

1. 在 Object的显式原型添加属性b,为什么 示例对象p 能使用此属性呢? p.b = b

2. 为什么 p.a 为undefined

一篇文章让你搞懂JavaScript 原型和原型链

如下图所示

1.    实例对象p的隐式原型(__proto__)是一个对象,有两个属性值:constructor 和 __proto__

2.   p.__proto__.constructor 返回的结果为构造函数Person

3.   p.__proto__.__proto__ .constructor 返回的结果为Object()函数

一篇文章让你搞懂JavaScript 原型和原型链

结合上面所讲的显式原型与隐式原型之间的关系,等同如下:

p.__proto__.__proto__  =  Object.prototype

所以p.b打印结果为b,p没有b属性,会一直通过__proto__向上查找,最后当查找到Object.prototype时找到,最后打印出b,向上查找过程中,得到的是Object.prototype,而不是Function.prototype,找不到a属性,所以结果为undefined,这就是 原型链,通过__proto__向上进行查找,最终到null结束。

总结:

1.   查找属性,如果本身没有,则会去__proto__中查找,也就是构造函数的显式原型中查找,如果构造函数的显式原型中也没有该属性,因为构造函数的显式原型也是对象,也有__proto__,那么会去它的显式原型中查找,一直到null,如果没有则返回undefined

2.   p.__proto__.constructor  == function Person(){}

3.   p.___proto__.__proto__== Object.prototype

4.   p.___proto__.__proto__.__proto__== Object.prototype.__proto__ == null        

5.    通过__proto__形成原型链而非protrotype

一篇文章让你搞懂JavaScript 原型和原型链

什么是原型继承?

Person.prototype 只是一个指针,指向的是原型对象,但是这个原型对象并不特别,它也只是一个普通对象。假设说,这时候,我们让 Person.prototype 不再指向最初的原型对象,而是另一个类 (Animal)的实例,情况会怎样呢?

一篇文章让你搞懂JavaScript 原型和原型链

执行该代码   Person.prototype = new Animal() 后,Person的prototype指针指向发生了变化,指向了一个 Animal 实例。

当 p 去访问 address 属性时,js会先在 p 的实例属性中查找,发现找不到后,就会去 Person 的原型对象上 查找。因为Person的原型对象已经被我们换成一个animal实例,所以就会先找animal实例的属性,当发现还是没有 address属性,就会去Animal的原型对象上查找,最终找到。

这就说明,我们可以通过原型链的方式,实现 Person 继承 Animal 的所有属性和方法。

结语

看到这,相信大家对原型和原型链的概念应该已经有了一定了解了,如果仍然不太理解,也不用气馁,因为闭包及原型链是JavaScript最难理解的几部分。相信之后在不断的开发实践中会使你理解的更为透彻,多学习多思考才能更快掌握。如果大家有任何反馈和问题,也欢迎通过评论区告诉我,谢谢。

以上就是一篇文章让你搞懂JavaScript 原型和原型链的详细内容,更多关于JavaScript 原型和原型链的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript 一道字符串分解的题目
Aug 03 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
js switch case default 的用法示例介绍
Oct 23 Javascript
Javascript vue.js表格分页,ajax异步加载数据
Oct 24 Javascript
详解http访问解析流程原理
Oct 18 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
原生JS进行前后端同构
Apr 22 Javascript
微信小程序前端promise封装代码实例
Aug 24 Javascript
JS实现贪吃蛇游戏
Nov 15 Javascript
Vue发布订阅模式实现过程图解
Apr 30 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 Javascript
js 执行上下文和作用域的相关总结
Feb 08 Javascript
微信小程序实现锚点跳转
Nov 23 #Javascript
javascript实现电商放大镜效果
Nov 23 #Javascript
用webAPI实现图片放大镜效果
Nov 23 #Javascript
Vue 的 v-model用法实例
Nov 23 #Vue.js
JavaScript实现网页留言板功能
Nov 23 #Javascript
VUE+Element实现增删改查的示例源码
Nov 23 #Vue.js
js观察者模式的弹幕案例
Nov 23 #Javascript
You might like
PHP中全面阻止SQL注入式攻击分析小结
2012/01/30 PHP
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
浅析node.js中close事件
2014/11/26 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
Python的Flask框架中Flask-Admin库的简单入门指引
2015/04/07 Python
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
python使用selenium实现批量文件下载
2019/03/11 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
django实现更改数据库某个字段以及字段段内数据
2020/03/31 Python
python Gabor滤波器讲解
2020/10/26 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
夜大毕业生自我鉴定
2013/10/31 职场文书
教师业务学习制度
2014/01/25 职场文书
揭牌仪式主持词
2014/03/19 职场文书
打架检讨书
2015/01/27 职场文书
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记
mysql查询结果实现多列拼接查询
2022/04/03 MySQL
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫