广告
返回顶部
首页 > 资讯 > 精选 >JavaScript原型链怎么理解
  • 799
分享到

JavaScript原型链怎么理解

2023-06-21 22:06:14 799人浏览 独家记忆
摘要

本篇内容介绍了“javascript原型链怎么理解”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1.原型的关系在JavaScript中的每个

本篇内容介绍了“javascript原型链怎么理解”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

1.原型的关系

JavaScript中的每个函数都会有一个prototype属性,这个属性又会返回一个原型,原型又有一个constructor属性,这个属性指向与之关联的构造函数。通过构造函数实例化的对象会有一个__proto__属性,这个__proto__属性指向与构造函数的prototype指向的是同一内存。

值得注意的是__proto__属性已经在标准中被删除,这里使用Object.getPrototypeOf(object)和Object.setPrototypeOf(object, prototype)代替。

现在来测试Object构造函数与原型的关系,示例代码如下所示:

// 首先 Object 是一个构造函数,就会有 prototype 属性var result = Object.prototypeconsole.log(result) // 得到一个原型对象var result2 = result.constructorconsole.log(result2) // [Function: Object]var result3 = Object.getPrototypeOf(result)console.log(result3) // null

图解如下所示:

JavaScript原型链怎么理解

我们通过Object.getPrototypeOf(Object.prototype)获取Object.prototype的原型时,返回的值为null这就表示我们查找到Object.prototype就可以停止查找了。

2.原型链

为了更方便我们来理解原型链式什么,首先来看一下下面这一段代码:

function Person(name) {  this.name = name}var PP = Person.prototypevar PPC = PP.constructor// 验证与构造函数是否相同console.log(PPC === Person) // true// 实例化 Personvar person = new Person('一碗周')// 获取 Person 实例化后的对象的原型var pP = Object.getPrototypeOf(person)// 验证 Person 实例化后的对象的原型是否指向构造函数的 prototypeconsole.log(pP === PP) // true

实际上所有的构造函数默认都是继承于Object的,如下代码测试:

// 获取 Person.prototype 的原型var PPP = Object.getPrototypeOf(PP)var OP = Object.prototype// 判断两者是否相等console.log(PPP === OP) // true

上面的代码表述的不是很清楚,我画了一张图来理解一下:

JavaScript原型链怎么理解

上图中画红色线的部分就是原型链,原型链就是原型中的关系的指向,直到最终结果为null也就是Object.prototype,原型链就结束了,也就是说**Object.prototype**是原型链中的终点。

我们可以通过Object.setPrototypeOf(obj, prototype)方法来设置具体内容的原型链,但是如果不是必要建议不要这样做,因为这样做是非常耗性能的。

“JavaScript原型链怎么理解”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

--结束END--

本文标题: JavaScript原型链怎么理解

本文链接: https://www.lsjlt.com/news/301036.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript原型链怎么理解
    本篇内容介绍了“JavaScript原型链怎么理解”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1.原型的关系在JavaScript中的每个...
    99+
    2023-06-21
  • JavaScript中的原型和原型链怎么理解
    这篇文章主要介绍“JavaScript中的原型和原型链怎么理解”,在日常操作中,相信很多人在JavaScript中的原型和原型链怎么理解问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大...
    99+
    2022-10-19
  • 带你理解JavaScript 原型原型链
    目录一、原型、原型链相等关系理解二:原型、原型链的意思何在 看完这篇文章,你会发现,原型、原型链原来如此简单!  上面经典的原型链相等图,根据下文的学习,你会轻易掌握。 一...
    99+
    2022-11-12
  • 彻底理解JavaScript的原型与原型链
    目录前言基础铺垫prototypecontructor属性__proto__原型链提高总结后语前言 原型与原型链知识历来都是面试中考察的重点,说难不算太难,但要完全理解还是得下一定...
    99+
    2022-11-12
  • 怎么理解JS原型、原型链、对象
    本篇内容主要讲解“怎么理解JS原型、原型链、对象”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么理解JS原型、原型链、对象”吧! 一. 普通对象与函...
    99+
    2022-10-19
  • 如何理解JavaScript中的原型与原型链
    本篇文章给大家分享的是有关如何理解JavaScript中的原型与原型链,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。原型和原型链关系贯穿Jav...
    99+
    2022-10-19
  • JavaScript原型链详解
    目录1、构造函数和实例2、属性Prototype3、属性__proto__4、访问原型上的方法5、构造函数也有__proto__6、构造函数的原型也有__proto__7、Objec...
    99+
    2022-11-12
  • 详解JavaScript的原型与原型链
    目录详解原型与原型链构造函数原型对象 访问原型设置原型检测原型prototype、__proto__、constructor之间的关系原型链原型链的作用普通对象与函数对象经...
    99+
    2022-11-13
  • JavaScript原型链的原理是什么
    这篇文章主要讲解了“JavaScript原型链的原理是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript原型链的原理是什么”吧!解析原型...
    99+
    2022-10-19
  • javascript原型链怎么实现
    这篇文章主要讲解了“javascript原型链怎么实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript原型链怎么实现”吧!原型链在ES6中引入了class关键字,但是JS依...
    99+
    2023-06-22
  • Javascript中怎么实现原型和原型链
    今天就跟大家聊聊有关Javascript中怎么实现原型和原型链,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。原型Javascript中有一句话,叫一...
    99+
    2022-10-19
  • Javascript 原型与原型链深入详解
    目录前言对象原型原型链javascript中的类new的实现instanceof的实现javascript的继承总结前言 在前端这块领域,原型与原型链是每一个前端 er 必须掌握的概...
    99+
    2022-11-13
  • 详解JavaScript中的原型和原型链
    目录原型链图原型必备知识prototype属性(显示原型)proto属性(隐式原型)constructor属性总结 原型链图 原型必备知识 要了解原型就必须搞清三个属性:__pro...
    99+
    2022-11-12
  • 深入了解javascript原型和原型链
    目录一、什么是原型二、prototype三、__proto__四、constructor五、实例与原型六、原型的原型七、原型链一、什么是原型 原型:每一个javascript对象(除...
    99+
    2022-11-12
  • JavaScript原型与原型链是什么
    这篇文章主要介绍“JavaScript原型与原型链是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript原型与原型链是什么”文章能帮助大家解决问题...
    99+
    2022-10-19
  • Javascript的原型和原型链你了解吗
    目录一、为什么要使用原型?怎样去理解原型的出现1、对象字面量创建对象的缺点2、工厂函数3、构造函数二、使用原型三、原型概念辨析四、原型链练习总结一、为什么要使用原型?怎样去理解原型的...
    99+
    2022-11-13
  • JavaScript中原型和原型链是什么
    本篇文章给大家分享的是有关JavaScript中原型和原型链是什么,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。而原型、原型链就是其中之一。每...
    99+
    2022-10-19
  • javascript的原型和原型链是什么
    小编给大家分享一下javascript的原型和原型链是什么,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! ...
    99+
    2022-10-19
  • JavaScript原型链是什么
    这篇文章主要为大家展示了“JavaScript原型链是什么”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript原型链是什么”这篇文章吧。1、构造函数和实例假设你声明一个方法叫做Fo...
    99+
    2023-06-25
  • Javascript原型和原型链的知识点整理
    这篇文章主要讲解了“Javascript原型和原型链的知识点整理”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Javascript原型和原型链的知识点整理”...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作