(原型与原型链)前端八股文修炼Day5

在这里插入图片描述

一 原型链的理解

  1. 原型链定义
    原型链是 JavaScript 中实现对象继承的关键机制之一,它是一种对象之间的关系,通过这种关系,一个对象可以继承另一个对象的属性和方法。

  2. 原型链的组成
    每个对象都有一个指向另一个对象的内部链接(-proto-),即原型对象。如果在当前对象上无法找到属性或方法,JavaScript 引擎会沿着原型链向上查找,直到找到对应的属性或方法。

  3. 原型对象和构造函数
    在 JavaScript 中,通过构造函数创建的对象实例会关联到构造函数的 prototype 属性指向的对象。这样,实例可以通过原型链访问构造函数的原型对象上定义的属性和方法。

  4. 顶端的原型
    所有对象的原型链的顶端是 Object.prototype,它是 JavaScript 中所有对象的基础原型,包含一些常用的方法(比如 toString()hasOwnProperty() 等)。

  5. 原型链的作用
    原型链使得对象之间可以共享属性和方法,实现了高效的代码复用和继承。通过原型链,我们可以更灵活地组织和扩展对象的功能。

  6. 示例解释
    举例说明原型链的作用和实现方式,比如创建一个自定义构造函数、定义其原型对象上的方法,以及如何通过原型链访问这些方法。例如:

  • prototype: 所有的函数类型天生都自带一个属性:prototype(原型),这个属性的值是一个对象 ,浏览器默认会给它开辟一个堆内存;
  • constructor: 在浏览器给prototype开辟的堆内存中有一个天生自带的属性:constructor,这个属性存储的值是当前的函数本身。
  • -proto-: 每一个对象都有一个_-proto-_的属性,这个属性指向当前实例所属类的prototype。如果不确定它是谁的实例,那么都为Object的实例。
  • 原型链机制:通过__proto__隐式原型链向上查找的机制;
  • 向上查找:当我们操作实例的某个属性或者方法的时候,首先找自己空间中私有的属性和方法;
    • 若找到,结束查找,使用自己私有的即可
    • 若没找到,则基于__proto__找所属类的prototype,如果找到就用共有的,如果没找到,基于原型上的__proto__进行查找,一直找到Object.prototype的原型为止,如果还是没有,操作的属性或者方法不存在。
      图解如下:
      在这里插入图片描述

二 原型修改

在 JavaScript 中,原型链的理解是非常重要的,特别是在处理对象继承和原型链修改时。让我来解释一下原型修改、重写原型链以及原型链指向的终点:

  1. 原型修改
    在 JavaScript 中,可以通过修改对象的原型对象来改变对象的行为。这意味着可以向原型对象添加新属性或方法,从而让所有基于该原型对象创建的实例都能访问到这些属性或方法。原型修改是一种扩展对象功能的有效方法。

  2. 重写原型链
    重写原型链指的是将一个对象的原型对象指向另一个对象,从而改变对象的原型链。这样做可以实现对象之间的继承关系重组,让一个对象继承另一个对象的属性和方法。

  3. 原型链的终点
    原型链的终点是指原型链的最顶层,即所有对象原型链的顶端都指向的对象。在 JavaScript 中,原型链的终点是 Object.prototype,它是所有对象的基础原型,包含一些通用的方法,比如 toString()hasOwnProperty() 等。

当我们访问一个对象的属性或方法时,JavaScript 引擎会沿着原型链向上查找,直到找到对应的属性或方法或者查找到达原型链的终点为止。如果在整个原型链中都找不到对应的属性或方法,操作就会失败。

通过修改原型对象或重写原型链,我们可以实现对象之间的继承和共享属性方法,从而达到增强对象功能的目的。同时,了解原型链的终点有助于我们理解 JavaScript 对象之间的关系以及属性方法的查找顺序。
继承的实现可参考

三 如何打出原型链的终点

要打印出原型链的终点,你可以使用以下代码来获取原型链终点所指向的对象:

function getPrototypeChainEnd(obj) {let currentObj = obj;while(Object.getPrototypeOf(currentObj) !== null) {currentObj = Object.getPrototypeOf(currentObj);}return currentObj;
}// 示例:打印出原型链的终点
console.log(getPrototypeChainEnd(Object.prototype)); // 输出:Object {}

在这段代码中,getPrototypeChainEnd 函数接收一个对象作为参数,然后通过迭代查找对象的原型链,直到找到原型链的终点。最后,返回原型链的终点对象。

你可以替换 Object.prototype 为任何你想要查看原型链终点的对象。这段代码会帮助你打印出原型链的终点对象。希望这能解决你的问题!如果有任何其他问题,请随时告诉我。

四 如何获取非原型链上的属性

要获取对象自身拥有的属性(即非原型链上的属性),可以使用 Object.keys() 方法来获取对象的所有可枚举属性,然后过滤掉原型链上的属性。以下是一个简单的示例代码:

function getOwnProperties(obj) {return Object.keys(obj).filter(key => obj.hasOwnProperty(key));
}// 示例:获取对象非原型链上的属性
const obj = {a: 1,b: 2
};// 向原型添加属性
Object.prototype.c = 3;const ownProperties = getOwnProperties(obj);
console.log(ownProperties); // 输出: ["a", "b"]

在这个示例中,getOwnProperties 函数接收一个对象作为参数,使用 Object.keys() 方法获取对象的所有属性名,然后通过 hasOwnProperty() 方法过滤掉原型链上的属性,最终返回对象自身拥有的属性名数组。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/571931.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言看完我这篇编译与链接就够啦!!!

1. 前言 Hello!大家好我是小陈,今天来给大家介绍最详细的C语言编译与链接。 2. 编译和链接 我们通常用的编译器,比如Visual Sudio,这样的IDE(集成开发环境)一般将编译和链接的过程一步完成,通常将这这种编译和链接合…

LeetCode刷题--- Dijkstra 求最短路径

首先是图的表示,邻接矩阵和邻接表。实现看代码 邻接矩阵:二维数组, matrix[a][b] 表示 从a可以指向b无向图而言, matrix[a][b]matrix[b][a],比如可以定义matrix[a][b]1表示ab是连接的,matrix[a][b]0表示ab…

neo4j所有关系只显示RELATION,而不显示具体的关系

当看r时,真正的关系在properties中的type里,而type为“RELATION” 造成这个的原因是: 在创建关系时,需要指定关系的类型,这是固定的,不能像属性那样从CSV文件的一个字段动态赋值。标准的Cypher查询语言不支…

如何让笔记本电脑发挥120%的性能?原来还有这种小技巧

前言 现在的笔记本电脑性能真的是越来越好了!但笔记本的CPU终究受到功耗的限制,与同代的台式机CPU性能相差不是一点半点的。 小白在之前很长一段时间也是使用着Windows系统的笔记本,也见过不下百款笔记本。 笔记本为了轻便,通常…

操作系统的理解|冯·若依曼体系结构|进程的状态

操作系统的理解 冯诺伊曼体系结构为什么必须通过内存然后到cpu存储金字塔冯诺伊曼结构的改进在哪?我们可不可以全部用寄存器来做存储器在硬件数据流动角度学以致用:解释程序运行为什么要加载到内存程序没被运行之前存在哪里? 操作系统概念广义…

C语言从入门到实战----数据在内存中的存储

1. 整数在内存中的存储 在讲解操作符的时候,我们就讲过了下⾯的内容: 整数的2进制表⽰⽅法有三种,即 原码、反码和补码 有符号的整数,三种表⽰⽅法均有符号位和数值位两部分,符号位都是⽤0表⽰“正”,⽤…

玩转云计算:教你在Akamai Linode上构建IT架构–定义项目

时至今日,选择以云计算方式来运维业务,已经成为大部分情况下的最优选。那么如果要从零开始开发一个新应用,并依托云平台来设计、开发、部害和远维,具体该从何处下手?这一系列文章将介绍如何基于Akamai Linode平台实现这…

【Android】美团组件化路由框架WMRouter源码解析

前言 Android无论App开发还是SDK开发,都绕不开组件化,组件化要解决的最大的问题就是组件之间的通信,即路由框架。国内使用最多的两个路由框架一个是阿里的ARouter,另一个是美团的WMRouter。这两个路由框架功能都很强大&#xff0…

质数、约数

数据结构、算法总述&#xff1a;数据结构/算法 C/C-CSDN博客 质数 在大于1的整数中&#xff0c;如果只包含1和本身这两个约数&#xff0c;就被称为质数&#xff0c;或者叫素数。 质数的判定——试除法 时间复杂度&#xff1a; bool is_prime(int x) {if (x < 2) return …

【jenkins+cmake+svn管理c++项目】jenkins回传文件到svn(windows)

书接上文&#xff1a;创建一个项目 在经过cmakemsbuild顺利生成动态库之后&#xff0c;考虑到我一个项目可能会生成多个动态库&#xff0c;它们分散在build内的不同文件夹&#xff0c;我希望能将它们收拢到一个文件夹下&#xff0c;并将其回传到svn。 一、动态库移位—cmake实…

架构的基本要素

1.架构设计如何规划&#xff1f; 架构设计目标 Do the right thing right 做对的事情 把对的事情做正确 架构设计方法 架构立方体:应用技术 功能运行 逻辑物理 架构设计输出 可落地的架构和系统 2.架构设计模式 分而治之 迭代式设计 3.架构设计输入 需要解决的目标 功能性需求 …

欧科云链OKLink:比特币第四次减半即将到来,收好这份数据宝典

减半一直是 Web3 领域重点关注的时间节点&#xff0c;由此产生的数据变动会对整个市场与生态产生关键影响。多链浏览器 OKLink 作为专业数据分析平台&#xff0c;一直以来在官方网站提供减半数据入口&#xff0c;供用户清晰查看各类资产的减半情况。&#x1f449; www.oklink.c…