网易:所有的对象最终都会继承自 Object.prototype ? ——原型链(一)详细讲解!

前言

在上一篇文章中我们讲到了原型,而原型分为函数原型和对象原型。今天我们来聊聊JS中的原型链,原型链跟原型的关系十分密切。如果对原型还不太了解的小伙伴,可以看看我上一篇文章,配合本篇食用效果更佳哦~

文章链接在此: 原型

正文

函数有一个原型,我们称为显示原型。而对象也有一个原型,我们称为隐式原型。我们知道,函数的原型因为有属性和方法,那么它也是一个对象。既然是对象,那么它是不是也有对象原型,那么函数的显示原型的隐式原型又是什么呢?

这里可能有点绕,我们来看张图理解一下:

实例对象p由构造函数Person创建,如图中绿色箭头所示,当访问p中的属性时,先找对象显示具有的属性,如图中小的黑色箭头,这里假设p没有任何显示属性,然后去找p的隐式原型,而p的隐式原型就等于构造函数Person的显示原型,所以就去构造函数Person的显示原型中查找,如图中大的黑色箭头。因为函数的显示原型同样是一个对象,所以它也存在着隐式原型,当我们在Person的显示原型中没有查找到属性时,就从Person的显示原型的隐式原型中查找,而对象的隐式原型又等于构造函数的显示原型,而这里Person的显示原型这个对象是由new Object()这个构造函数创造的,所以我们相当于去查找Object的显示原型。

那小伙伴们可能会有一个疑问,Object的显示原型也是一个对象,它也有隐式原型,那么它也是被构造函数创建的,那就会一直往上查找,不是子子孙孙无穷尽也?所以,规定,Object.prototype的隐式原型为null,查询到这里停止。

引出原型链的概念:

原型链

顺着对象的隐式原型不断地向上查找上一级的隐式原型,直到找到目标或者一直到null,这种查找关系叫做原型链

我们来看一道例题:

js 复制代码
  Ground.prototype.lastName = '贺'
  function Ground() {

  }
  var ground = new Ground()

  Father.prototype = ground
  function Father() {
    this.name = 'jingwei'
  }
  var father = new Father()

  Son.prototype = father
  function Son() {
    this.hobbit = 'reading'
  }
  var son = new Son()

  console.log(son.name);
  console.log(son.lastName);

我们来看看会输出什么:

这里的访问规则就用到了我们刚刚所讲的原型链,我们来分析一下:

当访问son.name时,先会找对象的显示属性,这里的显示属性只有hobbit,然后查找p的隐式原型也就是Son的显示原型,这里发现Son.prototype = father,我们再来查找father这个对象中的显示属性,发现了this.name = 'jingwei',所以这里输出 jingwei

当访问son.lastName时,先查找对象的显示属性,这里的显示属性只有hobbit,然后查找p的隐式原型也就是Son的显示原型,这里发现Son.prototype = father,我们再来查找father这个对象中的显示属性,发现没有lastName这个属性,所以查找father的隐式原型,也就是构造函数Father的显示原型,我们发现Father.prototype = ground,所以查找ground这个对象的显示属性,没有找到,再去找ground的隐式原型也就是Ground的显示原型,发现Ground.prototype.lastName = '贺',所以输出 贺

再下一节我们会再深入一下原型链并且讲一讲网易的面试题,小伙伴们可以关注一下我

我们先放出网易的面试题,小伙伴们可以先思考一下:

网易:所有的对象最终都会继承自 Object.prototype ?

js 复制代码
<script>
    //Object.create()

    let obj = {
        a: 1
    }

    let obj2 = Object.create(null)

    //网易:所有的对象最终都会继承自 Object.prototype ?
</script>

为什么我们用这个例子,对象最终不会继承自Object.prototype

总结

顺着对象的隐式原型不断地向上查找上一级的隐式原型,直到找到目标或者一直到null,这种查找关系叫做原型链

Object.prototype的隐式原型为null

今天的内容就到这啦,如果你觉得小编写的还不错的话,或者对你有所启发,请给小编一个辛苦的赞吧

相关推荐
腾讯TNTWeb前端团队1 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
uhakadotcom4 小时前
视频直播与视频点播:基础知识与应用场景
后端·面试·架构
范文杰4 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪4 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪5 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy5 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom6 小时前
快速开始使用 n8n
后端·面试·github
uhakadotcom6 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom6 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom6 小时前
React与Next.js:基础知识及应用场景
前端·面试·github