如果你对javascript的原型链还有任何疑问,请看这篇文章

进入主题

前言

  1. 原型链的规则不百分百适用于所有情况
  2. 显式原型:prototype,是一个对象{}
  3. 隐式原型:__proto__,是一个对象的属性

原型链规则

  1. 任何一个引用类型的对象都有一个__proto__属性指向它的构造函数的prototype(也就是构造函数的原型对象,注意原型对象是一个{}类型)
  2. 只有函数类型的对象才有prototype属性,该属性的属性值指向该函数的原型对象。
  3. 当对象上不存在要寻找的属性或方法时,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的原型链那些事的更多相关文章

  1. JavaScript的原型链继承__propt__、prototype、constructor的理解、以及他们之间相互的关系。

    回想自己已经工作了有一段时间了,但是自己对JavaScript的原型链.和继承的理解能力没有到位,最近他们彻底的整理并且复习了一遍. 本案例中部分文案来自网络和书籍,如有侵权请联系我,我只是把我的理解 ...

  2. Javascript的原型链图

    90%的前端或者js程序员或者老师们对Javascript懂得不比这个多 给手机看的 但是这个图里的所有褐色单向箭头链就是Javascript的原型链(颜色标注对理解js原型链很关键) 这图中的各个_ ...

  3. javaScript系列 [04]-javaScript的原型链

    [04]-javaScript的原型链 本文旨在花很少的篇幅讲清楚JavaScript语言中的原型链结构,很多朋友认为JavaScript中的原型链复杂难懂,其实不然,它们就像树上的一串猴子. 1.1 ...

  4. javascript prototype原型链的原理

    javascript prototype原型链的原理 说到prototype,就不得不先说下new的过程. 我们先看看这样一段代码: <script type="text/javasc ...

  5. javaScript(原型链)

    在了解javaScript的原型链之前,我们得先来看一下原型是什么. 在javaScript中,所有的函数都会有着一个特别属性:prototype(显示原型属性):当我们运行如下代码时: functi ...

  6. 理解JavaScript的原型链

    1. 什么是对象 在JavaScript中,对象是属性的无序集合,每个属性存放一个原始值.对象或函数. 1.1 创建对象 在JavaScript中创建对象的两种方法: ① 字面上: var myObj ...

  7. JavaScript扩展原型链浅析

    前言 上文对原型和原型链做了一些简单的概念介绍和解析,本文将浅析一些原型链的扩展. javaScript原型和原型链 http://lewyon.xyz/prototype.html 扩展原型链 使用 ...

  8. JavaScript中原型链的那些事

    引言 在面向对象的语言中继承是非常重要的概念,许多面向对象语言都支持两种继承方式:接口继承和实现继承.接口继承制只继承方法签名,而实现继承继承实际的方法.在ECMAScript中函数没有签名,所以EC ...

  9. 深入浅出JavaScript之原型链&继承

    Javascript语言的继承机制,它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instanc ...

随机推荐

  1. Spring 源码(12)Spring Bean 的创建过程(3)

    继续上一篇Spring Bean的创建过程的解读,上一篇介绍了Spring在创建过程中doGetBean方法,在执行过程中会调用getSingleton方法并且设置一个lambda表达式,这个lamb ...

  2. mysql二进制日志和mysql备份工具介绍以及日志恢复

    mysql备份: 三种备份方式 冷备:数据库停机,在进行备份 热备:lock table锁表,read   数据库只可以读不能写,在备份 温备:备份时数据库正常运行 备份类型:完整备份:全部备份,部分 ...

  3. c# DirectoryEntry LDAPS

    参考地址:https://stackoverflow.com/questions/54987776/ldap-connection-error-the-server-is-not-operationa ...

  4. 【数据库】MYSQL如何添加索引

    1.使用ALTER TABLE语句创建索性 应用于表创建完毕之后再添加. 1.1语法 ALTER TABLE 表名 ADD 索引类型 (unique,primary key,fulltext,inde ...

  5. vue上传图片的3种方式

    https://blog.csdn.net/q3254421/article/details/88250968?utm_medium=distribute.pc_relevant.none-task- ...

  6. 10分钟学会 API 测试 !

    本文面向对象主要是后端开发人员   API 开发好之后,我们需要对 API 进行简单的调试,确保 API 可以跑通再提交给前端人员进行对接或者是测试人员对 API 进行测试:   在测试过程中我们关注 ...

  7. python logging模块使用方法

    # -*- coding: utf-8 -*- # @ModuleName: logger # @Time: 2022/6/10 11:48 # @Author : Free-A # @Descrip ...

  8. Sentiment analysis in nlp

    Sentiment analysis in nlp The goal of the program is to analysis the article title is Sarcasm or not ...

  9. HTML:<input type="text"> 输入数字时的验证!(在提交时验证)

    <!--非负数:<input type="text" name="" pattern="^\d+$">--> < ...

  10. jfinal中如何使用过滤器监控Druid监听SQL执行?

    摘要:最开始我想做的是通过拦截器拦截SQL执行,但是经过测试发现,过滤器至少可以监听每一个SQL的执行与返回结果.因此,将这一次探索过程记录下来. 本文分享自华为云社区<jfinal中使用过滤器 ...