美文网首页码农的世界互联网科技
Web前端必知篇:原型链的讲解

Web前端必知篇:原型链的讲解

作者: 秋风_bdfd | 来源:发表于2018-12-14 20:08 被阅读3次

js中的数据类型

js中的数据类型有两种,1是基本数据类型,2是引用数据类型。引用数据类型又可分为原生引用类型和自定义引用类型。如下图所示:

js数据类型

引用类型的值(对象)是引用类型的一个实例,引用类型是一种数据结构,描述的是一类对象所具有的属性和方法。每个对象是基于一个引用类型创建的,这个引用类型可以是原生类型,也可以是开发人员定义的类型。ECMAScript提供了Object、Array等原生引用类型,以便开发人员用以实现常见的计算任务。像Object和Array这样的原生构造函数,在运行时会自动出现在执行环境中,此外也可以创建自定义的构造函数,从而定义自定义对象类型的属性和方法。

说到这里,也介绍一下自己,我是一名从事5年的前端开发全栈工程师,如果有想要学习前端的同学,关注小编头条号(点击头像加关注),私信【学习】即可免费领取一整套系统的前端学习教程!

创建对象

创建对象的方法有多种,其中有一种是原型模式。我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途就是包含可以由特定类型的所有实例共享的属性和方法。如果按照字面意思来理解,那么prototype就是通过调用构造函数而创建的那个对象实例的原型对象。举例:

示例

在此,我们将sayName()方法和所有的属性直接添加到了Person的prototype属性中,构造函数变成了空函数。但是仍然可以通过构造函数来创建新对象,而且新对象还会具有相同的属性和方法。这些属性和方法是由所有实例共享的。

理解原型对象

无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象。在默认情况下,所有的原型对象都会自动获得一个constructor(构造函数)属性,这个属性包含一个指向prototype属性所在函数的指针。当调用构造函数创建一个实例后,该实例的内部将包含一个指针(内部属性),指向构造函数的原型对象。

示例

上图展示了Person构造函数、Person的原型属性以及Person现有的两个实例之间的关系。在此,Person.prototype指向了原型对象,而Person.prototype.constructor又指回了Person。

原型链

回顾一下构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。那么,假如我们让原型对象等于另一个类型的实例,结果会怎么样呢?显然,此时的原型对象将包含指向另一个原型的指针,相应地,另一个原型中也包含着指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例,那么上述关系依然成立,如此层层递进,就构成了实例与原型的链条。这就是原型链的基本概念。

怎么实现原型链?

实现原型链有一种基本模式,如下图:

示例

这个例子中的实例以及构造函数和原型之间的关系如下图:

示例

另外,我们知道,所有的引用类型都继承了Object,而这个继承也是通过原型链实现的。所以上面例子中展示的原型链还应该包括另外一个继承层次,下图展示了该例子中完整的原型链:

示例

SubType继承了SuperType,而SuperType继承了Object。当调用instance.toString()时,实际上调用的是保存在Object.prototype中的那个方法。

相关文章

  • Web前端必知篇:原型链的讲解

    js中的数据类型 js中的数据类型有两种,1是基本数据类型,2是引用数据类型。引用数据类型又可分为原生引用类型和自...

  • web前端面试之js继承与原型链(码动未来)

    web前端面试之js继承与原型链(码动未来) 3.2.1、JavaScript原型,原型链 ? 有什么特点? 每个...

  • web前端原型链

    分享一个一年前关于原型链的理解笔记,因为最近有些忘记怎么回答这个问题了。 实例对象的_ proto _ 与构造函数...

  • Web前端------JS原型、原型链详解

    转载至: JS原型链详解JS是基于对象的语言,原型对象是其模拟面向对象的一种方式,关于原型有两种表现形式:一种是p...

  • web前端必知篇:提高web性能,学会优化!

    在这个快节奏的社会中,你的步调稍稍一慢,你就会被社会无情的淘汰。对于一个好的网站来说,良好的性能也是用户来源的一大...

  • web前端必知篇:闭包的理解

    闭包这玩意,在面试的时候经常被问到。如果你还不了解,小编就简单的讲解一下! 闭包是什么,闭包的优点是什么? 闭包就...

  • 原型链和原型基础必知(一)

    创建对象的三种方式: 关于原型对象: instanceOf的原理:实例对象的属性和构造函数的属性判断是不是同一个引...

  • ES5里面的对象和继承

    构造函数和原型链 注意:原型链上面的属性会被多个实例共享,而构造函数不会 web类继承Student类 原型链 ...

  • 产品必懂的技术必修(二)

    上一篇:产品必懂的技术必修(一) 第三章 前端—Web技术 本章目录 一、前端技术分类二、web技术特点及应用三、...

  • JavaScript之深入多种继承方式

    一、前言 上一篇文章讲解了JavaScript之深入原型与原型链,继承本质就是在构造函数和原型上进行一系列的操作,...

网友评论

    本文标题:Web前端必知篇:原型链的讲解

    本文链接:https://www.haomeiwen.com/subject/vaknhqtx.html