理一理 Javascript 的原型链

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

理一理 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 网页增加动态功能。

    727 引用 • 1268 回帖
  • 前端

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

    245 引用 • 1338 回帖 • 1 关注
  • 研究
    12 引用 • 34 回帖

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1437 引用 • 10064 回帖 • 491 关注
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖 • 7 关注
  • 脑图

    脑图又叫思维导图,是表达发散性思维的有效图形思维工具 ,它简单却又很有效,是一种实用性的思维工具。

    31 引用 • 96 回帖
  • flomo

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

    6 引用 • 140 回帖 • 1 关注
  • 前端

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

    245 引用 • 1338 回帖 • 1 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖 • 2 关注
  • Visio
    1 引用 • 2 回帖
  • Anytype
    3 引用 • 31 回帖 • 15 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    116 引用 • 771 回帖
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 24 关注
  • Gzip

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

    9 引用 • 12 回帖 • 167 关注
  • HHKB

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

    5 引用 • 74 回帖 • 487 关注
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    24253 引用 • 98961 回帖
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    179 引用 • 407 回帖 • 485 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 356 关注
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    62 引用 • 289 回帖 • 1 关注
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    6 引用 • 15 回帖 • 60 关注
  • 工具

    子曰:“工欲善其事,必先利其器。”

    294 引用 • 739 回帖
  • 智能合约

    智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 1 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    107 引用 • 295 回帖
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 603 关注
  • V2Ray
    1 引用 • 15 回帖 • 1 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1454 回帖
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖 • 2 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 380 关注
  • 国际化

    i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖 • 5 关注
  • 职场

    找到自己的位置,萌新烦恼少。

    126 引用 • 1706 回帖 • 2 关注