一篇文章让你搞懂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 29 Javascript
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
Easyui 之 Treegrid 笔记
Apr 29 Javascript
js实现坦克移动小游戏
Oct 28 Javascript
vue 实现单选框设置默认选中值
Nov 07 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 Javascript
Vue中computed及watch区别实例解析
Aug 01 Javascript
原生js+css实现tab切换功能
Sep 17 Javascript
原生JavaScript实现幻灯片效果
Feb 19 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 团购折扣计算公式
2011/11/24 PHP
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
javascript下string.format函数补充
2010/08/24 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
javascript常用函数(1)
2015/11/04 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
python实现石头剪刀布小游戏
2021/01/20 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
Django 外键的使用方法详解
2019/07/19 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
大学生个人总结的自我评价
2013/10/05 职场文书
刚毕业大学生自荐信范文
2014/02/20 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
2014年学前班工作总结
2014/12/08 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL
Go Plugins插件的实现方式
2021/08/07 Golang
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python