网易:所有的对象最终都会继承自 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

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

相关推荐
前端 贾公子5 分钟前
ElementUI 中 validateField 对部分表单字段数组进行校验时多次回调问题
前端·javascript·elementui
棒棒的唐5 分钟前
vue2 elementUI 登录页面实现回车提交登录的方法
前端·javascript·elementui
前端小万8 分钟前
一次紧急的现场性能问题排查
前端·性能优化
在未来等你11 分钟前
Elasticsearch面试精讲 Day 11:索引模板与动态映射
大数据·分布式·elasticsearch·搜索引擎·面试
excel24 分钟前
为什么相同卷积代码在不同层学到的特征完全不同——基于 tfjs-node 猫图像识别示例的逐层解析
前端
知识分享小能手25 分钟前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
在未来等你26 分钟前
Kafka面试精讲 Day 14:集群扩容与数据迁移
大数据·分布式·面试·kafka·消息队列
用户214118326360227 分钟前
dify案例分享-免费玩转即梦 4.0 多图生成!Dify 工作流从搭建到使用全攻略,附案例效果
前端
CodeSheep27 分钟前
稚晖君又开始摇人了,有点猛啊!
前端·后端·程序员
JarvanMo29 分钟前
Flutter Web vs Mobile:主要区别以及如何调整你的UI
前端