专栏首页AndroidTv前端入门15-JavaScript进阶之原型链声明正文-原型链

前端入门15-JavaScript进阶之原型链声明正文-原型链

声明

本系列文章内容全部梳理自以下几个来源:

作为一个前端小白,入门跟着这几个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

PS:梳理的内容以《JavaScript权威指南》这本书中的内容为主,因此接下去跟 JavaScript 语法相关的系列文章基本只介绍 ES5 标准规范的内容、ES6 等这系列梳理完再单独来讲讲。

正文-原型链

原型链也就是对象的继承结构,举个例子:

var a = []

那么 a 对象的原型链:

a -> Array.prototype -> Object.prototype -> null

基本所有对象的原型链顶部都是 Object.prototype,而 Object.prototype 没有原型,手动通过 Object.create(null) 创建的对象也没有原型。但这两点是特例。

原型的用途在于让对象可继承原型上的属性,达到功能复用、代码复用的目的。

面向对象的编程语言中,继承是一大特性,所以在编写 JavaScript 代码时,要能够很明确所创建的对象的一个原型链结构,这样才便于更好的设计,更好的编写代码。

在编写代码过程中,使用的无非就是内置对象,或者自定义对象,所以下面来看看两者的原型链结构:

内置对象的原型链结构

其实也就是之前有讲过的默认的原型链结构:

  • 声明的每个函数 -> Function.prototype –> Object.prototype -> null
  • 数组对象 -> Array.prototype -> Object.prototype -> null
  • 对象直接量创建的对象 -> Object.prototype -> null
  • 日期对象 -> Date.prototype -> Object.prototype -> null
  • 正则对象 -> RegExp.prototype -> Object.prototype -> null 可以用对象的 _proto_.constructor.name 来测试:

Object.prototype 已经内置定义了一些属性,如:toString(),isPrototypeOf(),hasOwnProperty() 等等;

同样,Array.prototype 内置了如:forEach(),map() 等等。

其他内置原型也都有相对应的一些属性。

所以使用内置对象时,才可以直接使用内置提供的一些属性。

自定义对象的原型链结构

不手动修改自定义构造函数的 prototype 属性的话,默认创建的对象的原型链结构:

  • 自定义构造函数创建的对象 -> {} -> Object.prototype -> null

比如:

function A() {}
var a = new A();

在首次使用构造函数 A 时,内部会去对 prototype 属性赋值,所进行的工作类似于:A.prototype = new Object();

所以 A.prototype 会指向一个空对象,但这个空对象继承了 Object.prototype。

那么不修改这条原型链的话,默认通过自定义构造函数创建的对象的继承结构也就是:{} –> Object.prototype –> null。

虽然这条原型链也可以这么表示:A.prototype –> Object.prototype -> null

a 虽然确实继承自 A.prototype,但我不倾向于这种写法来表示,因为自定义构造函数的 prototype 属性值会有很大的可能性被修改掉,当它的属性值重新指向另一个对象后,此时也仍旧可以说 a 对象继承自 A.prototype,个人感觉理解上会有点别扭,无法区别前后原型的不同,毕竟 A.prototype 只是一个 key 值,所以我倾向于直接说 a 继承的实际对象,也就是 key 值对应的 value 值。

虽然 Object.prototype 也是一个 key 值,实际指向的一个内置的对象,但手动修改这些内置构造函数的 prototype 的可能性不高,所以个人觉得对于内置构造函数,可以直接用类似 Object.prototype 来表示。

那么这个时候,如果为这个构造函数的 prototype 添加一些属性:

function A() {}
A.prototype.num = 0;
var a = new A();

那么,对于对象 a 而言,它的原型链:

a -> {num:0} -> Object.prototype -> null

这是不修改原型链的场景,那么如果手动破坏了默认的原型链呢?

var B = [];
B.num = 0; 
function A() {}   
A.prototype.num = 222; 
var a = new A();  //a 的原型链
A.prototype = B;
var b = new A();  //b 的原型链

此时对象 b 的原型链又是什么呢?

首先看看对象 B,是一个数组对象,所以 B 对象的原型链:

B –> Array.prototype -> Object.prototype -> null

再来看看对象 a,创建它时,还并没有修改构造函数的 prototype,所以它的原型链:

a -> {num:222} -> Object.prototype -> null

那么这个时候,手动修改掉了构造函数的 prototype 指向,这之后再通过构造函数 A 创建的对象的原型链也就会跟随着变化,所以对象 b 的原型链:

b -> B –> Array.prototype -> Object.prototype -> null

所以,修改构造函数的 prototype,其实相当于将另外一条原型链拿来替换掉原本的原型链。

原型链用途

对于对象,它的本质其实也就是一堆属性的集合,所以对象的用途是用来操作对象内的属性的,而当操作对象的属性时,会有一种类似于作用域链机制来寻找属性。

操作无非分两种场景,一是读取对象属性,二是写对象属性,两种所涉及的处理不一样。

当读取对象属性时,是依靠对象的原型链来辅助工作,如果对象内部含有该属性,则直接读取,否则沿着原型链去寻找这个属性。

也就是说,对象继承原型的机制,并不是说,将原型的所有属性拷贝一份到对象内部,而只是简单对对象建立一条原型链而已。这条原型链中保存着各个原型对象的引用,当读取继承的属性时,就可以根据这条原型链上的引用访问到其他原型对象内的属性了。

因为读取继承属性,本质上是读取其他对象的属性,那么,这些原型属性发生变化时,也才会影响到继承他们的子对象。

那么,对于写对象属性的操作:

这点就由对象的特性决定了:当对一个对象的属性进行赋值操作时,如果对象内没有该属性,那么会动态为该对象添加一个属性,如果对象内部有该属性,那么修改属性值。

对象的属性写操作会影响到后续的读操作,因为如果是读取对象的某个继承属性,本来对象内部没有该属性,所以是去读取的原型内的属性值。但经过写操作后,对象内部创建了同名的内部属性,之后再读取时,发现内部已经有了,自然不会再去原型链中读取。

获取对象的原型链

掌握了原型链的相关理论,对于代码中某个对象的原型链也就能够很清楚的知道了。无外乎内置对象的默认原型链,或者自定义构造函数手动修改的原型链。

但,初学阶段,如果想借助浏览器的开发者工具的 console 来测试、查看对象的原型链以便验证猜想,可以这么处理:

var a = []

虽然 _proto_ 可以获取原型,但拿到的是对象,所以可以借助对象的某些标识,比如原型的 constructor 的 name 函数名属性标识。

实例

网上关于原型链的文章经常会出现这么一张图片,首先我承认,这张图很高级,也基本把原型链的相关理论表示出来了,但我很不喜欢它。因为对于新手来说,很难看懂这张图,我第一次看到也一脸懵逼。

就算现在能够看懂了,我也还是不喜欢它,因为这张图表达的内容太多了:它不仅表示了某个对象的原型链结构,同时,也表示出了实例对象、原型、构造函数三者间的函数,而构造函数本质上也是对象,所以也顺便表示它的原型链结构。

我们一步步来看,它首先定义了一个构造函数 Foo,然后通过它创建了 f1,f2对象,然后从 f1,f2开始出发,先求他们的原型链。

用代码来说,其实也就是:

function Foo() {}
var f1 = new Foo();
//求f1对象的原型链

根据我们上述梳理的理论,很简单了吧,原型链其实也就是:

f1 -> {} -> Object.prototype -> null

接着,它表达了可以用 _proto_ 获取对象的原型,然后每个原型、构造函数、实例对象三者间的关系它也表达出来了,原型的constructor指向构造函数,而构造函数的prototype指向原型。

而这三个角色本质上也都是对象,既然是对象,那么它们本身也有原型,所以也再顺便画出它们的原型链。

总之,就是从 f1 实例对象出发,先找它的原型,通过原型再找构造函数,然后再分别将原型和构造函数看成实例对象,重复之前f1的工作。

另外,又通过 new Object() 创建了对象 o1,求它的原型链。

所以,这张图上,其实表达了一共 5 条原型链,分别是:

  • f1 的原型链
  • f1 的原型的constructor指向的构造函数Foo对象的原型链
  • 函数对象Foo的原型的constructor指向的构造函数Function对象的原型链
  • f1 的原型的原型即Object.prototype的constructor指向的构造函数Object 对象的原型链。
  • o1 的原型链

如果你能从这张图看出这5条原型链,那么原型链的理论你就基本掌握了。

而且,建议看这张图时,每次都将某条原型链跟踪到底,再去看另一条,这过程不要过多关注在分支上,否则很容易混乱。

对于新手,如果能够对这张稍作备注,而不是直接将这张图放出来,我觉得会更好,如下:


大家好,我是 dasu,欢迎关注我的公众号(dasuAndroidTv),公众号中有我的联系方式,欢迎有事没事来唠嗑一下,如果你觉得本篇内容有帮助到你,可以转载但记得要关注,要标明原文哦,谢谢支持~

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端入门14-JavaScript进阶之继承声明正文-继承

    作为一个前端小白,入门跟着这几个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

    请叫我大苏
  • 前端入门13-JavaScript进阶之原型声明正文-原型

    作为一个前端小白,入门跟着这几个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

    请叫我大苏
  • 【Android】属性动画的使用理解

    属性动画的教程网上已经特别多了,本篇也不打算再去各种详解知识点,主要就是记录题主学习属性动画时的碰到的一些困惑,以及后来自己的理解。如果有人也碰到相似的问题,正...

    请叫我大苏
  • [我的理解]Javascript的原型与原型链

    一、原型与原型链的定义 原型:为其他对象提供共享属性的对象     注:当构造器创建一个对象,为了解决对象的属性引用,该对象会隐式引用构造器的"prototyp...

    sam dragon
  • JavaScript OOP(三):prototype原型对象(即构造函数的prototype属性)

    通过构造函数生成的实例化对象,无法共享属性或方法(即每个实例化对象上都有构造函数中的属性和方法);造成了一定的资源浪费 1 function Obj(name...

    用户1149564
  • 【前端词典】必备知识-原型与原型链

    继承是我们前端必须熟悉的一个知识点。可依旧有很多前端对继承的实现和应用没有一个整体的把握。追其原因无非有二:

    小生方勤
  • 深入理解原型对象和原型链

    原型对象和原型链在前端的工作中虽然不怎么显式的使用到,但是也会隐式的使用了,比如使用的jquery,vue等啦。在进入正题的时候,我们还是需要明白什么是__pr...

    嘉明
  • javascript设计模式五:原型模式

    在javascript语言中,原型与原型链是一个非常重要的概念,因为它们是javascript语言得以成立的根本。因为javascript是基于原型的面向对象编...

    前端_AWhile
  • JavaScript 原型中的哲学思想

    记得当年初试前端的时候,学习JavaScript过程中,原型问题一直让我疑惑许久,那时候捧着那本著名的红皮书,看到有关原型的讲解时,总是心存疑虑。

    疯狂的技术宅
  • Jascript原型链以及Object和Function之间的关系

    从结果可以看到定义一个function,它里边所含有的内容这六个属性是每个function所必有的,直接看第五个prototype(注意prototype是一...

    IT人一直在路上

扫码关注云+社区

领取腾讯云代金券