理一理 Javascript 的原型链

本贴最后更新于 2964 天前,其中的信息可能已经东海扬尘

理一理 Javascript 的原型链

特别感谢 JS 核心系列:浅谈原型对象和原型链给了我很大的启发!本文也是基于此文自己动手做了实验,并得到了相似的结果,遂与大家分享。

Javascript 中,大致存在两种对象:普通对象和函数对象。
一般而言,通过 new Function() 创建的对象是函数对象,其他的是函数对象。

// a function func1() {} // b var func2 = function() {} // c var func3 = new Function()

a 和 b 在创建的时候,JS 会自动通过 new Function() 来创建对象,所以 a,b,c 都是通过 new Function() 创造的函数对象。

// o1 var o1 = {} // o2 var o2 = new Object(); // o3 var o3 = new func1();

o1, o2 是使用对象字面量的形式创建的普通对象。
o3 不是通过 new Function() 的形式创建的对象,所以也是普通对象。

每当创建函数对象时,该对象中都会内置一些属性,其中包括 prototype__proto__prototype 即为原型对象
其内记录着函数对象的一些属性和方法。

function f1() {} f1.prototype.foo = "bar"; console.log(f1.prototype); // Object {foo: "bar", constructor: function} console.log(f1.foo); // undefined

prototypef1 不可见。也就是说,f1 在调用自身属性或方法时不会查找 prototype 内的属性和方法。
调用

prototype 的主要作用是继承。prototype 内定义的属性和方法都是留给自己的后代使用的。
说到后代,就必须说说 js 中的原型链。此时,另一个属性 __proto__ 就登场了。
__proto__ 的作用是保留父类的 prototype 对象。
js 在使用 new 表达式创建对象时,会将父类的 prototype 赋值给新对象的 __proto__。这样就形成了代代继承。

var obj = new f1(); console.log(obj.foo); // "bar" console.log(obj.__proto__); // Object {foo: "bar", constructor: function} console.log(obj.__proto__ == f1.prototype); // true

结果
现在我们知道,obj 中的 __proto__ 保存的是 f1 中的 prototype。即创建出的普通对象的 __proto__ 等于创建其的函数对象的原型。

那么 f1prototype__proto__ 又是什么呢?

console.log(f1.prototype.__proto__ == Object.prototype); // true console.log(Object.prototype.__proto__); // null

结果 2
可以看出,f1prototype__proto__ 指向了 Objectprototype,而 Objectprototype__proto__null
可以通过以上示例画出一条非常清晰的链式调用,此链即为 “原型链”。
原型链
在拥有这样一条原型链之后,当 obj.foo 执行时,会先查找自身是否有该属性(不会查找 prototype)。如果没找到,则会沿着原型链依此去查找。
在上例中,我们将 foo 定义在 f1prototype 上,obj.foo 在调用时就在原型链中找到了 foo 这个属性并执行。

总结:

  1. 原型链真正的形成靠的是 __proto__ 而非 prototypejs 在执行对象方法时会查找对象自身是否有该方法,如果不存在,会在原型链上找而不会在自身的 prototype 上找。
  2. 如果 __proto__ 改变则整条原型链都会发生改变,等于改变了对象的数据类型。
  3. 函数的 prototype 不属于自身的原型链。
  4. 在原型对象(prototype)上定义方法和属性是为了被子类继承和调用。

测试用代码可以在我的 github 上下载,我一直相信,自己动手去测试才是掌握知识点的最好方法。

  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    730 引用 • 1281 回帖 • 3 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    246 引用 • 1338 回帖 • 2 关注
  • 研究
    12 引用 • 34 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
zjhch123
未来的事无人知晓,所以才有无穷可能。 杭州

推荐标签 标签

  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 585 回帖
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    54 引用 • 37 回帖 • 1 关注
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    98 引用 • 903 回帖
  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    127 引用 • 169 回帖
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 2 关注
  • H2

    H2 是一个开源的嵌入式数据库引擎,采用 Java 语言编写,不受平台的限制,同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式,可以兼容一些主流的数据库,因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 672 关注
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    37 引用 • 157 回帖 • 1 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    185 引用 • 825 回帖 • 2 关注
  • flomo

    flomo 是新一代 「卡片笔记」 ,专注在碎片化时代,促进你的记录,帮你积累更多知识资产。

    6 引用 • 143 回帖 • 1 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 17 关注
  • BookxNote

    BookxNote 是一款全新的电子书学习工具,助力您的学习与思考,让您的大脑更高效的记忆。

    笔记整理交给我,一心只读圣贤书。

    1 引用 • 1 回帖
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 615 关注
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    17 引用 • 7 回帖 • 3 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    29 引用 • 202 回帖 • 27 关注
  • Gzip

    gzip (GNU zip)是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件,它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

    9 引用 • 12 回帖 • 175 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    29 引用 • 230 回帖 • 127 关注
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点;但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中,从而不再需要读写 HDFS,因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 569 关注
  • ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 656 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 3 关注
  • 强迫症

    强迫症(OCD)属于焦虑障碍的一种类型,是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病,其特点为有意识的强迫和反强迫并存,一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖 • 3 关注
  • 学习

    “梦想从学习开始,事业从实践起步” —— 习近平

    172 引用 • 534 回帖
  • Google

    Google(Google Inc.,NASDAQ:GOOG)是一家美国上市公司(公有股份公司),于 1998 年 9 月 7 日以私有股份公司的形式创立,设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”,它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎,它提供了简单易用的免费服务。不作恶(Don't be evil)是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    7 引用 • 69 回帖 • 6 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    198 引用 • 543 回帖
  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘(Capacitive Keyboard)。

    5 引用 • 74 回帖 • 518 关注
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    10 引用 • 54 回帖 • 176 关注
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 93 关注