换个角度就很好深入理解的js继承

2,007 阅读6分钟
有个小伙子找到我,问我说:“我看了好多遍继承、原型链,但是感觉还是没懂”
我说:“你有儿子你就懂了”

目录

  • 前言
  • 什么是Prototype
  • 什么是原型链
  • 基础结构
  • 晋升机构
  • 进阶结构
  • 官方结构
  • NEW操作符
  • END

前言

最近在整理生活的过程中,遇到了几个问题,我身边的大多数人是不太清楚前端是如何进阶的。

比如他不是很明确怎么才算中级工程师,怎么才算高级工程师,怎么算p5,怎么算p6。所以我在整理一份前端进阶体系表(20%)。因为东西实在太多了。举个例子,类似下面这种。

React

  • 初级要了解里面生命周期 一些api,一些特性 组件化开发

  • 中级要了解 diff算法 虚拟dom树的比对,key值优化问题,render优化,context

  • 高级要了解 观察者模式、setState周期运作、高阶组件,反向继承属性代理

如果你觉得你需要的话,请给我留个言,好让我提速往下写。否则我就用别人喝咖啡的时间用来打桌球。

在讲继承之前先搞明白几个概念。

什么是prototype

是吧,一看到这个问题就头大。面试的时候百问不爽。 就像问你生命的起源一样,那你就得跟他从恐龙灭绝开始讲到iphone11发售。

话不多说 满分答案在此。

Javascript里面都是对象,必须有一种机制,将所有对象联系起来。
所以,Brendan Eich最后还是设计了"继承"。
但是,他不打算引入"类"(class)的概念,因为一旦有了"类",
Javascript就是一种完整的面向对象编程语言了,这好像有点太正式了,
而且增加了初学者的入门难度。考虑到这一点,
Brendan Eich决定为构造函数设置一个prototype属性。
    ----感谢阮一峰老师

你从javascript作者创作prototype属性的角度出发来回答这个问题,无懈可击。

什么是原型链

满分答案

当访问一个对象的某个属性时,会先在这个对象本身属性上查找,
如果没有找到,则会去它的__proto__隐式原型上查找,
即它的构造函数的prototype,如果还没有找到就会再在构造函数
的prototype的__proto__中查找,这样一层一层向上查找就会形
成一个链式结构,我们称为原型链

基础结构

我们来缕一下逻辑,先来对比一下这个继承的基础结构。

我举得例子就是生活中,你儿子继承你的东西的流程。

  • 你有个房子,然后生了你儿子
  • 如果你想把房子继承给你儿子使用,必须证明你儿子是你儿子
  • 所以你在你儿子出生的时候,把你儿子的名字写在了户口本上,证明你儿子是你儿子,并且,你儿子可以使用户口的复印件(_ proto _)可以用户口来使用你的房子,以及一些你儿子不知道的财产(比如三亚有套房你儿子不知道,但是如果你儿子发现了,他用户口的复印件可以使用那套房子)
  • 户口是你的,你儿子只有使用权,户口跟你之间有两条线

这就是抽象的基础结构。

晋升结构

这时,你儿子很努力的买了一辆车。然后生了个孙子。

我们得走一下家产继承流程

  • 你儿子把你孙子名字写在了他的户口本上
  • 你孙子拥有你儿子户口本的使用权
  • 你孙子间接获取了你户口的使用权
  • 所以-你孙子可以开你儿子的车,住着你的房子。
  • 你不能开你儿子的车。

这样就可以一代一代传下去

进阶结构

这时左边的例子就有些抽象了,我还没想好有什么更贴切的形容方式。

  • 如果你这一代不是继承父亲而来的,那么直接走祖先
  • 所有户口本的使用权 都在 公安局档案库
  • 公安局档案库与公安局之间是两条线

然而大家可以看出来,我们是可以通过f1 间接找到 Funtion() 以及 Object() 所以会有很多隐藏的线,这些隐藏的线会通过_proto_连接,大家知道这些线是间接继承先来的就可以了。

官方结构

上面这个图就显示了最官方的原型链的结构图,也是问我问题那个小伙子百思不得其解的,如果把这个图抽象成家庭财产继承问题就没有那么困惑了我认为。

这么看起来,这些箭头指针的指向可以连接成一条条“链子”,就是原型链。有点像关系拓扑图

NEW操作符

我们都知道NEW操作符可以实现构造函数的继承。 那么new操作符的原理是什么呢 我们先看一下代码部分

使用new命令时,它后面的函数依次执行下面的步骤。

  • 创建一个空对象,作为将要返回的对象实例。
  • 将这个空对象的原型,指向构造函数的prototype属性。
  • 将这个空对象赋值给函数内部的this关键字。
  • 开始执行构造函数内部的代码。

在我的理解看来,这就是你拿着户口本去公安局给你儿子登记的过程。

你仔细想我这句话,越想越有滋味。

END

最近在整理生活,为什么说是在整理生活,因为方方面面都需要梳理一下。 就像写文章来说,以前我会用很长很长时间来构思文章结构,中心思路,以及传穿针引线的知识点。后来我发现,内心在反对这种做事节奏,首先我认为,做事又快又好是万物的中心思想,快节奏的世界,快餐,快手游等,都在提速。

就像这篇文章,我写了两个小时多一点,但是我写的开心的不得了,行云流水,也会对大家有所帮助。

如果做一件事是慢的,我希望他的产出高于投入,然而写文章这件事情,我希望能在快的基础上,更好。

至此,给我自己敬个礼,最近辛苦了。