专栏首页码力全开动图学 JavaScript 之:原型继承

动图学 JavaScript 之:原型继承

前言

你是否曾思考为什么我们能使用 JS 中的一些内置属性和方法,比如 .length.split().join()?我们并没有显式地声明它们,那么究竟它们从哪里来的呢?可不要说什么“那是 JS 中的魔法!”。其实这些都因为一个叫做 原型继承(prototypal inheritance) 的东西。它太棒啦,你平时也经常会用到,只不过可能没有注意!

构造函数

我们经常需要创建很多相同类型的对象。想象一下我们有个网站,上面都是狗狗~

对于每个狗狗来说,我们需要一个对象来表示它!为了不每次都新创建一个对象,就需要写一个构造函数(稍后再说 ES6 中的类哈~)。有了构造函数,就可以用 new 关键字来创建狗狗的 实例(instance) 了。

每只狗都有一个 名字(name)品种(breed)颜色(color) 和一个 吠(bark) 方法。

当我们创建了这个 Dog 构造函数,它并不是我们创建的唯一对象(要知道函数也是对象)。自动地,我们创建了另一个 prototype 对象。默认情况下,这个对象有一个 constructor 属性,指向的就是我们的 Dog 构造器。

这个在 Dog 构造器上的 prototype 属性是不可枚举的,意味着当你尝试访问对象属性时,该属性不会显示。但是它仍然在那里!

原型继承

好吧~那么为什么需要有该属性对象呢?首先,让我们来创建几只狗狗。简单起见,我们就叫它们 dog1dog2dog1Daisy,是一只可爱的拉布拉多(Labrador)!dog2Jack,是一只勇敢的杰克罗素犬(Jack Russell)~

让我们将 dog1 打印到控制台,然后展开它的属性:

可以看到我们添加的属性有:namebreedcolorbark,但是快看,还有一个 __proto__ 属性!它也是不可枚举的,所以通常我们在获取对象属性的时候也看不到它。让我们展开看看:

是不是看起来和 Dog.prototype 一样哈!你猜怎么着,这个 __proto__ 就是对 Dog.prototype 的引用。这就是 原型继承 的全部内容:构造函数创造的每个实例都能够访问构造函数的原型。

原型继承的好处

那么为什么这很酷?有时候我们拥有每个实例共享的属性。比如 bark 方法:它在每个实例中都是相同的,那为什么每次创建新实例都要新建一个 bark 方法,很明显这样会浪费内存。相反地,我们可以将 bark 方法添加到 Dog.prototype 上去!

这样每当我们访问实例的属性时,引擎首先检查该属性在实例上是否定义,如果没有找到,就会通过 __proto__ 属性,顺着原型链 继续查找。

不止是一层

这只是一个步骤,其实可以包含多个步骤!如果继续进行下去,你可能会注意到,当我展开 Dog.prototype__proto__ 对象时,我没有包含一个属性。由于 Dog.prototype 自己也是一个对象,这意味着它实际上是 Object 构造函数的实例。这意味着 Dog.prototype 也有一个 __proto__ 属性,并且指向了 Object.prototype

比如说 .toString() 这个方法。它是定义在 dog1 上么?明显不是。那么在 Dog.prototype 上有么?也没有!其实它是定义在 Dog.prototype.__proto__ 上,即 Object.prototype 上。

ES6 中的类

前面我们使用的是构造函数的方式(function Dog() { ... }),实际上 ES6 中提供了构造函数和原型的更简单的语法:类(Classes)

只是 构造函数语法糖。一切都是以相同的方式工作!

我们使用 class 关键字来定义类。每个类都有一个 constructor 函数,基本上对应了 ES6 中构造函数的写法。而我们想要添加到原型 prototype 上的属性和方法,都可以在类中直接定义。

关于类的另一个好处就是,我们可以轻松地 扩展(extend) 其他的类。

类的继承

假如我们要添加另一种狗,吉娃娃(Chihuahuas)狗。为了便于理解,我们只添加一个 name 属性。但是吉娃娃也可以有自己特殊的叫声!和普通的叫声不同,吉娃娃的叫声可能比较小~

在子类中,我们可以通过 super 关键字访问到父类的构造方法。参数当然也参考父类的构造方法传入。

myPet 可以访问到 Chihuahua.prototypeDog.prototype (当然也有 Object.prototype ,因为 Dog.prototype 是个对象)。

由于 Chihuahua.prototype 上有一个 smallBark 方法,Dog.prototype 上有一个 bark 方法,所以我们可以在 myPet 实例上同时访问到 smallBarkbark 方法。

原型的终点

现在,你可以想象,原型链不会永远持续下去。最终会有一个原型等于 null 的对象:它就是 Object.prototype。如果我们试图访问在本地或者原型链上都不存在的属性,最终会返回 undefined

Object.create

尽管上面已经解释了构造函数和类,其实还有一个为对象添加原型的方式是使用 Object.create 方法。通过这个方法,我们创建了一个新对象,并且指明了这个对象的原型是什么。

只需要将一个已经存在的对象传入 Object.create 方法中。创建出来的对象就是以我们传入的对象作为原型。看例子:

我们打印一下 me ,可以看到:

我们并没有为 me 对象添加其他的属性,但是访问它却有一个 __proto__ 属性,并且这个属性指向的是具有 nameage 的对象 person。而 person 这个对象的 __proto__ 属性指向的是 Object.prototype

全文就到这里啦,希望对你学习原型继承有帮助~

参考链接

  • JavaScript Visualized: Prototypal Inheritance

本文首发于公众号:码力全开(codingonfire)

本文随意转载哈,注明原文链接即可

本文分享自微信公众号 - 码力全开(codingonfire),作者:savokiss

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-01-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 写给前端的正则表达式入门

    在 JavaScript 中,使用 // 即可创建一个正则表达式对象,当然也可以使用 new RegExp()

    savokiss
  • 浅析 JS 事件循环之 Microtask 和 Macrotask

    我们在上一篇 《浅析 JS 中的EventLoop 事件循环》 中提到一个 Event Queue,其实在事件循环中 queue 一共有两种,还有一种叫 Job...

    savokiss
  • 18 个提高生产力的开发者工具

    本篇介绍一些提高生产力的工具,包括网站、浏览器插件、VSCode插件和命令行工具~

    savokiss
  • JavaScript入门总结——第二弹学习对象,分清__proto__、prototype

    Hello小伙伴们,我又来啦,今天我们要继续我们JavaScript的入门总结第二弹!!!

    萌兔IT
  • Vue中如何使用方法、计算属性或观察者

    熟悉 Vue 的都知道 方法methods、计算属性computed、观察者watcher 在 Vue 中有着非常重要的作用,有些时候我们实现一个功能的时候可以...

    六小登登
  • 前端开发路线图——从小白到前端工程师

    编者按:很多人都想学编程。但是苦于没有具体的步骤和指导。比如想找份前端开发的工作,却不知道应该先学习什么再学习什么,也不知道该选择什么样的工具。因为经常被人问到...

    笔阁
  • 如何在基于Bytom开发过程中集成IPFS

    比原相关资料:https://github.com/Bytom-Community/Bytom_Docs

    比原链Bytom
  • 0757-6.3.3-如何配置impala自动同步HMS元数据

    在之前的文章中,Fayson 在《CDH6.3的新功能》 中提到Impala 的 Automatic Invalidate/Refresh Metadata 新...

    Fayson
  • 国产商业智能工具有哪些?这几家了解一下

    无知的风险是巨大的,而一知半解比无知更有害,因为我们将以错误的观念做出决定并采取行动。商业智能所追求的是在日常运营中充分利用企业收集的大量数据,并将其转换为信息...

    数据前沿
  • 吴恩达机器学习笔记 —— 1 绪论:初识机器学习

    1 机器学习一些比较难以变成的能力——Arthur Samuel 2 通过给定任务T以及性能度量P以及经验E,计算机程序从经验E中学习,用学习的结果改善性能P...

    用户1154259

扫码关注云+社区

领取腾讯云代金券