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

news2024/11/15 21:04:03

在这里插入图片描述

一 原型链的理解

  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.coloradmin.cn/o/1549067.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【node】express使用(三)

1、express.static快速托管静态资源 express:快速、开放、极简的Web开发框架。(npm第三方包,提供快速创建web服务器便捷方法) Express中文官网 (1) express快速创建web网站服务器以及api接口服务器 // 1、导入express const express require(express) // 2、创…

ITES | 深圳工业展正运动重磅产品即将亮相

■展会名称: 第二十五届深圳国际工业制造技术及设备展览会(以下简称“深圳工业展”) ■展会日期 2024年3月28日-31日 ■展馆地点 中国深圳国际会展中心(宝安) ■展位号 9号馆F04 2024年深圳工业展(ITES)将于3月28日至31日在深圳宝安国…

Android Studio详细安装教程及入门测试

Android Studio 是 Android 开发人员必不可少的工具。 它可以帮助开发者快速、高效地开发高质量的 Android 应用。 这里写目录标题 一、Android Studio1.1 Android Studio主要功能1.2 Android应用 二、Android Studio下载三、Android Studio安装四、SDK工具包下载五、新建测试…

20240320-1-梯度下降

梯度下降法面试题 1. 机器学习中为什么需要梯度下降 梯度下降的作用: 梯度下降是迭代法的一种,可以用于求解最小二乘问题。在求解损失函数的最小值时,可以通过梯度下降法来一步步的迭代求解,得到最小化的损失函数和模型参数值。…

阶乘的最高位

阶乘的最高位 题目描述 输入一个正整数n。输出n!的最高位上的数字。 输入 输入一个正整数n(n不超过1000)。 输出 输出n!的最高位上的数字。 样例输入 1000样例输出 4解 这道题要是求阶乘的后三位或者后几位,大家肯定都会。 求最高…

web服务应用术语

一、HTTP 协议详解 TCP 协议与 HTTP 协议 TCP 协议主要用于数据传输控制,而 HTTP 协议主要用于应用层面的数据交互。 HTTP 属于应用层协议,是建立在 TCP 协议基础之上的,HTTP 协议以客户端请求和服务器端响应为标准,浏览器通常称…

JavaSE+JDBC进行控制台输出的客户管理系统! (实训/课堂实践推荐)

本人博客:玖玖的个人博客 (zhangxi.online),欢迎大家来踩 该文章原地址: JavaSEJDBC进行控制台输出的客户管理系统! (实训/课堂实践推荐) (zhangxi.online) 本人诚挚的特别感谢:尚硅谷/黑马程序员提供的学习案例 项…

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

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

通过Appium和Xcode Accessibility Inspector获取iOS应用元素定位的方法

在 iOS 移动应用程序上使用选择器查找元素定位是我们在移动端 UI 自动化测试的先决条件。 但是,由于应用程序内容在原生 iOS 应用程序中的呈现方式,我们可以用来定位应用程序元素的选择器与 Web 浏览器元素有很大不同。 在本文中,我们将了解 …

将markdown文档中的图床外链图片下载到本地文件夹

markdown图床外链图片下载到本地代码 前言 因为文章发到先知或者攻防社区需要本地图片,而我的图片从来都是上传到图床,所以编写了一个脚本实现了把markdown文章中所有含有外链图床的图片转储到本地的文件夹。 然后发布文章时再手动一个个上传图片。 详细…

STM32的IAP计数,BootLoader

来源 三种下载方式: 1、ICP:ST-Link, 2、ISP: FlyMcu, 3、IAP IAP简介 IAP技术的核心在于BootLoader程序的设计,这段程序预先烧录在单片机中,正常的APP程序可以使用BootLoader程序中的IAP功能写入,也可以两部分代码一…

comfyui 代码结构分析

comfyui的服务器端是用aiohtttp写的,webui是fastapi直接构建的,但是其实comfyui的这种设计思路是很好的,也许我们不需要在后端起一个复杂的前台,但是可以借助json结构化pipeline,然后利用node节点流把整个流程重新映射…

部署云原生边缘计算平台kubeedge

文章目录 1、kubeedge架构2、基础服务提供 负载均衡器 metallb2.1、开启ipvc模式中的strictARP2.2、部署metalb2.2.1、创建IP地址池2.2.2、开启二层转发,实现在k8s集群节点外访问2.2.3、测试 3、部署cloudcore3.1、部署cloudcore3.2、修改cloudcore的网络类型 4、部…

【ORB-SLAM3】在 Ubuntu20.04 上编译 ORM-SLAM3 并使用 D435i、EuRoC 和 TUM-VI 运行测试

【ORB-SLAM3】在 Ubuntu20.04 上编译 ORM-SLAM3 并使用 D435i、EuRoC 和 TUM-VI 运行测试 1 Prerequisites1.1 C11 or C0x Compiler1.2 Pangolin1.3 OpenCV1.4 Eigen3 2 安装 Intel RealSense™ SDK 2.02.1 测试设备2.2 编译源码安装 (Recommend)2.3 预编译包安装 3 编译 ORB-S…

cesium 创建实体

1、 entity 1.1 entity类型整理 Entity分类 1.2 entity添加 椭圆 const ellipse new Cesium.Entity({position: Cesium.Cartesian3.fromDegrees(114.3, 39.9, 100),ellipse: {semiMinorAxis: 30000, //椭圆的短半轴semiMajorAxis: 40000, //椭圆的长半轴extrudedHeight: 0…

FPGA工程师及其相关岗位招聘~

社区的招聘功能上线之后,许多企业都在上面发布了招聘岗位。 目前有30企业,岗位围绕FPGA工程师,涵盖嵌入式软件工程师、射频工程师、C语言开发、BMC工程师等等,入口放在这里:F学社-全球FPGA技术提升平台 登录账号后&a…

Swift知识点(二)

6. 闭包表达式与闭包 闭包表达式(Closure Expression) 闭包表达式是一种在简短行内就能写完闭包的语法 也就是,闭包表达式,只是一种简洁、快速实现闭包的语法 Swift 的闭包表达式拥有简洁的风格,鼓励在常见场景中实现…

VLAN的原理及配置

文章目录 一、VLAN的概述1、VLAN的概念2、VLAN的优势 二、静态VLAN三、静态VLAN的配置1.VLAN的范围2.VLAN基本配置 四、Trunk和access的作用参考 一、VLAN的概述 1、VLAN的概念 VLAN就是将网络从逻辑上划分为若按个小的网络,也就是虚拟局域网。 2、VLAN的优势 使…

KingSCADA|如何实现文本显示设备的实时通讯状态?

哈喽,你好啊,我是雷工! 在SCADA项目中,有些要求在界面上实时显示SCADA系统与设备的实时通讯状态,来及时了解PLC或其他设备与SCADA系统的通讯状态是否正常,以及简单的通讯异常分析,在KingSCADA中该如何实现通讯状态的文本显示呢? 接下来用简单的样例介绍KingSCADA如何实…

Vue3尚硅谷张天禹笔记

1. Vue3简介 2020年9月18日,Vue.js发布版3.0版本,代号:One Piece(n 经历了:4800次提交、40个RFC、600次PR、300贡献者 官方发版地址:Release v3.0.0 One Piece vuejs/core 截止2023年10月,最…