javascript的原型链那些事
如果你对javascript的原型链还有任何疑问,请看这篇文章
进入主题
前言
- 原型链的规则不百分百适用于所有情况
- 显式原型:prototype,是一个对象{}
- 隐式原型:__proto__,是一个对象的属性
原型链规则
- 任何一个引用类型的对象都有一个__proto__属性指向它的构造函数的prototype(也就是构造函数的原型对象,注意原型对象是一个{}类型)
- 只有函数类型的对象才有prototype属性,该属性的属性值指向该函数的原型对象。
- 当对象上不存在要寻找的属性或方法时,js会顺着隐式原型找当前对象的构造函数的显示原型对象上是否存在需要的属性或方法,如果仍然没有,会一直想上找,直到碰到null结束。
关键说明
const dad = function(){}
const instance = new dad()
根据规则,很容易得出下面两条结论:
- dad为函数类型,所以dad上存在prototype属性,属性值为一个对象,我们称它为dad的原型对象
- instance为dad的一个实例,是对象类型,因此instance上面会有一个__proto__属性,属性值为dad.prototype
接下来思考,dad.prototype也是一个对象类型,对象类型是由Object()构造函数构造出来的,dad是引用类型,所以也有一个隐式原型属性,那么我们应该也能得出下面的结论:
- dad.prototype.__proto__ === Object.prototype
- dad.__proto__ === Function.prototype
Okay,按照规则接着向上走,那么会得到以下结论:
- Object.prototype.__proto__ === Object.prototype
- Function.prototype为对象类型
但是,上面的结论不正确了,因为Object函数与Function函数比较特殊,不遵守我们总结的规则。那么他们应该等于什么呢?
- Object.prototype.__proto__ === null
- Function.prototype为[native code]的底层函数,用于javascript构建初始函数
- Function.prototype.__proto__ === Object.prototype
- Function.__proto__ === Funtion.prototype
可以看出,js让Object构造函数的原型对象的隐式原型最终指向null,否则会造成循环引用死循环。这样顺着原型链找最后一定会走到终点null;对于Function,它的构造函数是它本身,所以Function的原型对象和隐式原型相等。除此之外js让Function的原型对象的隐式原型也指向Object构造函数的原型对象,这样终点也会走到null。
结尾
到此,整个原型链全部走通,下面放出一张简单的图解,帮助理解生硬的文字。如果还有什么问题,可以发表评论,互相交流。

javascript的原型链那些事的更多相关文章
- JavaScript的原型链继承__propt__、prototype、constructor的理解、以及他们之间相互的关系。
回想自己已经工作了有一段时间了,但是自己对JavaScript的原型链.和继承的理解能力没有到位,最近他们彻底的整理并且复习了一遍. 本案例中部分文案来自网络和书籍,如有侵权请联系我,我只是把我的理解 ...
- Javascript的原型链图
90%的前端或者js程序员或者老师们对Javascript懂得不比这个多 给手机看的 但是这个图里的所有褐色单向箭头链就是Javascript的原型链(颜色标注对理解js原型链很关键) 这图中的各个_ ...
- javaScript系列 [04]-javaScript的原型链
[04]-javaScript的原型链 本文旨在花很少的篇幅讲清楚JavaScript语言中的原型链结构,很多朋友认为JavaScript中的原型链复杂难懂,其实不然,它们就像树上的一串猴子. 1.1 ...
- javascript prototype原型链的原理
javascript prototype原型链的原理 说到prototype,就不得不先说下new的过程. 我们先看看这样一段代码: <script type="text/javasc ...
- javaScript(原型链)
在了解javaScript的原型链之前,我们得先来看一下原型是什么. 在javaScript中,所有的函数都会有着一个特别属性:prototype(显示原型属性):当我们运行如下代码时: functi ...
- 理解JavaScript的原型链
1. 什么是对象 在JavaScript中,对象是属性的无序集合,每个属性存放一个原始值.对象或函数. 1.1 创建对象 在JavaScript中创建对象的两种方法: ① 字面上: var myObj ...
- JavaScript扩展原型链浅析
前言 上文对原型和原型链做了一些简单的概念介绍和解析,本文将浅析一些原型链的扩展. javaScript原型和原型链 http://lewyon.xyz/prototype.html 扩展原型链 使用 ...
- JavaScript中原型链的那些事
引言 在面向对象的语言中继承是非常重要的概念,许多面向对象语言都支持两种继承方式:接口继承和实现继承.接口继承制只继承方法签名,而实现继承继承实际的方法.在ECMAScript中函数没有签名,所以EC ...
- 深入浅出JavaScript之原型链&继承
Javascript语言的继承机制,它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instanc ...
随机推荐
- 2┃音视频直播系统之浏览器中通过 WebRTC 拍照片加滤镜并保存
一.拍照原理 好多人小时候应该都学过,在几张空白的纸上画同一个物体,并让物体之间稍有一些变化,然后连续快速地翻动这几张纸,它就形成了一个小动画,音视频播放器就是利用这样的原理来播放音视频文件的 播放器 ...
- Linux磁盘和文件系统知识总结
硬盘操作 为什么要给硬盘分区? 如果你需要在一块硬盘上用到多个文件系统,那么你就需要对硬盘进行分区,以便用不同的分区支持不同的文件系统.(但一个硬盘只能有一个分区表!)反过来说,如果你整块硬盘都用同样 ...
- 697. Degree of an Array - LeetCode
697. Degree of an Array - LeetCode Question 697. Degree of an Array - LeetCode Solution 理解两个概念: 数组的度 ...
- 好客租房21-react组件的两种创建方式(函数组件)
1使用函数创建组件 函数组件:使用js的函数或者箭头函数创建的组件 约定1:函数组件名称必须以 开头 约定2:函数组件必须有返回值 表示该组件的结构 如果返回值为null 表示不渲染任何内容 2.1使 ...
- vue2 sass主题一键修改功能
1.先创建一个 _theme.scss文件 作为各类主题颜色的整理 $themes: ( light: ( //字体 font_color1: #414141, font_color2: white, ...
- Go到底能不能实现安全的双检锁?
不安全的双检锁 从其他语言转入Go语言的同学经常会陷入一个思考:如何创建一个单例? 有些同学可能会把其它语言中的双检锁模式移植过来,双检锁模式也称为懒汉模式,首次用到的时候才创建实例.大部分人首次用G ...
- ZJOI2020
[ZJOI2015] 地震后的幻想乡 给定一个无向图 \(G\) ,\(n\) 个点 \(m\) 条边每条边权为 \([0,1]\) 的随机实数,求这张图的最小生成树的最大边权期望. \(1\le n ...
- 重载overload 、重写override
观点:重载和重写完全没有关系要联系到一起,唯一的联系就是他们都带有个'重'字,所以鄙人也随大流把他们放在了一起 注意:下面可复制的代码是正确的,错误的只会上传图片,不上传可复制的代码 重载 1.在同一 ...
- 测试软件稳定性、健壮性之Monkey工具--简洁与深入
搭建环境这章节没做详细说明,因为我是前期做APP自动化是已经将 SDK 以及JDK给安装配置好了,这次是直接上来演示monkey的功能点以及运用 一.什么是稳定性测试? 通过随机点击屏幕一段时间,看看 ...
- 如何通过A/B测试提升Push推送消息点击率?
618电商节火热进行中,某电商App准备向用户推送一条全局活动消息,运营准备了两个推送文案: 文案A:年中囤货我们更懂你,没有大优惠怎敢惊动你:美妆个户,户外运动,医疗健康,一站式备齐,点击>& ...