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

news/2024/4/14 10:16:46

在这里插入图片描述

一 原型链的理解

  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.ppmy.cn/news/1401455.html

相关文章

【Go】三、Go指针

文章目录 1、指针2、说明 1、指针 &符号变量 就可以获取这个变量内存的地址*int 是一个指针类型 (可以理解为 指向int类型的指针) package main import("fmt" ) func main(){var age int 18//&符号变量 就可以获取这个变量内存的地…

SD-WAN网络构建要点简述

近年来,SD-WAN已成为企业网络优化的热门选择。SD-WAN代表软件定义广域网,是一种基于软件的网络解决方案,旨在提高企业网络连接的可靠性、安全性和性能。相比传统网络架构,SD-WAN技术通过虚拟化网络通信,利用智能软件和…

Docker 哲学 - Dockerfile 指令

Dockerfile 的 entrypoint 和 cmd 书写方式一样吗,分别用一个node项目的 demo来举例 Dockerfile 的 entrypoint 、cmd 有什么区别,分别举例他们同时出现的场景和 单独出现的场景 entrypoint 和 cmd 命令: 同时出现: 1、cmd 作为 e…

Modelsim手动仿真实例

目录 1. 软件链接 2. 为什么要使用Modelsim 3. Modelsim仿真工程由几部分组成? 4. 上手实例 4.1. 新建文件夹 4.2. 指定目录 4.3. 新建工程 4.4. 新建设计文件(Design Files) 4.5. 新建测试平台文件(Testbench Files&…

【Web应用技术基础】JavaScript(1)——案例:猜数字

上一个博客发了视频。这个博客因为不能插入视频&#xff0c;所以给大家一张一张截图的 点击“重新开始一局游戏” <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"…

redis学习-主从复制和哨兵模式

目录 1. 主从复制&#xff0c;读写分离 1.1 介绍 1.2 使用命令介绍 1.3 实现 1.4全量复制和增量复制 2.哨兵模式 1. 主从复制&#xff0c;读写分离 1.1 介绍 指的是将一台redis服务器中的数据复制到其他redis服务器&#xff0c;前者称为主机&#xff0c;后者称为从机&#xf…

算法训练day52leetcode198. 打家劫舍 213 打家劫舍2337. 打家劫舍 III

198. 打家劫舍 题目分析 动态规划数组初始化&#xff1a; dp[0]被初始化为0&#xff0c;因为没有房屋可以盗窃时的最大金额为0。dp[1]被初始化为nums[0]&#xff0c;意味着如果只有一家房屋&#xff0c;盗贼将盗取这家的金额。dp[2]被初始化为std::max(nums[0], nums[1])&am…

java多线程——概述,创建方式及常用方法

前言&#xff1a; 学习到多线程了&#xff0c;整理下笔记&#xff0c;daydayup!!! 多线程 什么是线程 线程&#xff08;Thread&#xff09;是一个程序内部的一条执行流程。若程序只有一条执行流程&#xff0c;那这个程序就是单线程的程序。 什么是多线程 多线程是指从软硬件上…

【旅游】泉州攻略v1.0.0

一、泉州古城 泉州市距离深圳大约520公里&#xff0c;从深圳北站出发&#xff0c;高铁大约3小时30分。 到达泉州西站后&#xff0c;往东南方向大约8公里&#xff0c;就可以到达主要的旅游景点泉州古城。 古城很适合使用一天玩耍&#xff0c;核心路线如下&#xff1a; 一路的景…

36.HarmonyOS鸿蒙系统 App(ArkUI) 创建第一个应用程序hello world

36.HarmonyOS App(ArkUI) 创建第一个应用程序helloworld 线性布局 1.鸿蒙应用程序开发app_hap开发环境搭建 3.DevEco Studio安装鸿蒙手机app本地模拟器 打开DevEco Studio,点击文件-》新建 双击打开index.ets 复制如下代码&#xff1a; import FaultLogger from ohos.fau…

IDM工具v6.42.3 便携绿色

软件介绍 Internet Download Manager&#xff08;IDM&#xff09;可提升你的下载速度多达5倍&#xff0c;安排下载时程&#xff0c;或续传一半的软件。Internet Download Manager的续传功能可以恢复因为断线、网络问题、计算机宕机甚至无预警的停电导致下传到一半的软件。此程…

2024年2月游戏手柄线上电商(京东天猫淘宝)综合热销排行榜

鲸参谋监测的线上电商&#xff08;京东天猫淘宝&#xff09;游戏手柄品牌销售数据已出炉&#xff01;2月游戏手柄销售数据呈现出强劲的增长势头。 根据鲸参谋数据显示&#xff0c;今年2月游戏手柄月销售量累计约43万件&#xff0c;同比去年上涨了78%&#xff1b;销售额累计达1…

C++:一次性搞定vector模拟实现中必须关注的细节

vector模拟实现的细节 1. vector的模拟实现源码2. 重要接口注意事项2.1 const修饰2.2 begin()和end()2.3 构造函数&#xff08;1&#xff09;迭代器区间初始化&#xff08;2&#xff09;构造函数冲突问题发现​问题分析问题​解决问题 &#xff08;3&#xff09;特殊的构造函数…

C++蓝桥考级一级到十八级的考点内容整理

以下是C蓝桥考级一级到十八级的考点内容整理&#xff1a; C一级考点内容 C程序基本结构 初步了解C编程了解C程序基本结构&#xff1a;头文件、命名空间、主函数、基本输入输出 cin、cout C二级考点内容 数据类型与变量 掌握编程中数学表达式的计算方式基础数据类型、变量的…

电脑换屏总结——关于我把电脑砸了这件事!

大家好&#xff0c;我是工程师看海&#xff0c;很高兴和各位一起分享我的原创文章&#xff0c;喜欢和支持我的工程师&#xff0c;一定记得给我点赞、收藏、分享哟。 加微信[chunhou0820]与作者进群沟通交流。 【淘宝】https://m.tb.cn/h.5PAjLi7?tkvmMLW43KO7q CZ3457 「运放秘…

查找链表中的中间结点

略。。。。。 提升题的难度&#xff0c;不知道输入数据节点的个数。 方法一&#xff1a;对链表进行两次遍历。第一次遍历时&#xff0c;我们统计链表中的元素个数 N&#xff1b;第二次遍历时&#xff0c;我们遍历到第 N/2 个元素时&#xff0c;将该元素返回即可。 方法二&am…

【openGL4.x手册09】转换反馈

目录 一、说明二、着色器设置2.2 捕获的数据格式2.2 高级交错2.3 双精度和对齐2.4 In-shader规范 三、缓冲区绑定四、反馈过程五、反馈对象5.1 反馈暂停和恢复5.2 绑定暂停的反馈对象。 六、反馈渲染七、局限性 一、说明 转换反馈是捕获由顶点处理步骤生成的基元的过程&#xf…

Android vehicle车辆属性新增demo

目录 前言一、Vehicle模块1.1 简介1.2 Vehicle框架1.3 主要功能和特点1.4 重要服务CarService1.4.1 简介1.4.2 组成1.4.3 启动时序1.4.4 作用 二、车辆属性新增demo2.1 CarPropertyService2.1.1 简介2.1.2 架构2.1.3 车辆属性 API2.1.4 CarPropertyService 初始化流程 2.2 App …

设计模式(3):工厂模式

一.工厂模式 实现了创建者和调用者的分离。 二.分类 简单工厂模式 用来生产同一等级结构中的任意产品。(对于新增产品&#xff0c;需要修改已有代码。用的最多&#xff09; 要点: 简单工厂模式也叫静态工厂模式&#xff0c;就是工厂类一般是使用静态方法&#xff0c;通过接收…

YARN集群 和 MapReduce 原理及应用

YARN集群模式 本文内容需要基于 Hadoop 集群搭建完成的基础上来实现 如果没有搭建&#xff0c;请先按上一篇: <Linux 系统 CentOS7 上搭建 Hadoop HDFS集群详细步骤> 搭建&#xff1a;https://mp.weixin.qq.com/s/zPYsUexHKsdFax2XeyRdnA 配置hadoop安装目录下的 etc…
最新文章