前端面试题38(js原型与对象)

在这里插入图片描述
在JavaScript中,原型(prototype)是核心特性之一,它用于实现对象之间的继承和属性方法的共享。理解原型和对象的关系对于深入学习JavaScript至关重要。下面我会详细解释这两个概念以及它们是如何工作的,并给出一些示例代码。

基本概念

  1. 对象:在JavaScript中,几乎一切都是对象。对象是一种数据结构,用于存储键值对(属性-值)。你可以创建字面量对象,也可以通过构造函数创建对象。

  2. 原型:每个JavaScript对象(除null外)都有一个内置属性,称为__proto__,它指向该对象的原型。原型也是一个对象,用于继承属性和方法。当试图访问一个对象的属性或方法时,如果对象本身没有这个属性或方法,JavaScript引擎会继续在其原型对象上查找,这个过程会一直向上追溯到原型链的顶端(通常是Object.prototype)。

原型链

  • 原型链:通过对象的__proto__链接起来的一系列原型对象就构成了原型链。这个机制使得一个对象可以继承另一个对象的属性和方法。

示例代码

1. 使用构造函数和原型扩展对象
function Person(name) {this.name = name; // 实例属性
}// 添加方法到Person的原型上
Person.prototype.sayHello = function() {console.log("Hello, my name is " + this.name);
};// 创建Person的实例
var person1 = new Person("Alice");
var person2 = new Person("Bob");// 调用从原型继承来的方法
person1.sayHello(); // 输出: Hello, my name is Alice
person2.sayHello(); // 输出: Hello, my name is Bobconsole.log(person1.__proto__ === Person.prototype); // true,显示person1的原型是Person的原型对象
2. 查看原型链
console.log(Object.getPrototypeOf(person1)); // 直接获取person1的原型对象,等同于person1.__proto__
console.log(Person.prototype.constructor === Person); // true,显示Person构造函数的constructor属性指向其自身
console.log(person1.__proto__.__proto__); // 继续向上查找原型链,最终到达Object.prototype

总结

通过原型链,JavaScript实现了面向对象编程中的继承机制,允许对象共享方法和属性,同时保持了每个实例的独特性。理解原型和原型链对于编写高效、可维护的JavaScript代码至关重要。

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

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

相关文章

Vue 3 <script setup> 使用v-bind(或简写为 :)来动态绑定图片的 src 属性

<img :src"images[currentIndex]" > <template> <div> <!-- 使用 v-bind 或简写为 : 来动态绑定图片的 src 属性 --> <img :src"images[currentIndex]" alt"Dynamic Image" style"width: 100px; height: a…

Java设计模式---(创建型模式)工厂、单例、建造者、原型

目录 前言一、工厂模式&#xff08;Factory&#xff09;1.1 工厂方法模式&#xff08;Factory Method&#xff09;1.1.1 普通工厂方法模式1.1.2 多个工厂方法模式1.1.3 静态工厂方法模式 1.2 抽象工厂模式&#xff08;Abstract Factory&#xff09; 二、单例模式&#xff08;Si…

华为机考真题 -- 攀登者1

题目描述: 攀登者喜欢寻找各种地图,并且尝试攀登到最高的山峰。地图表示为一维数组,数组的索引代表水平位置,数组的元素代表相对海拔高度。其中数组元素0代表地面。 一个山脉可能有多座山峰(山峰定义:高度大于相邻位置的高度,或在地图边界且高度大于相邻的高度)。登山者…

每日一道算法题 求最小公倍数

题目 求最小公倍数_牛客题霸_牛客网 (nowcoder.com) Python 辗转相除法 dividend,divisormap(int,input().split()) #被除数&#xff0c;除数 # remainder0 余数 # 最小公倍数 def lcm(dividend,divisor):# 最大公约数def gcd(dividend,divisor):if 0divisor:return divid…

鸿蒙开发:Universal Keystore Kit(密钥管理服务)【密钥协商(ArkTS)】

密钥协商(ArkTS) 以协商密钥类型为X25519 256&#xff0c;并密钥仅在HUKS内使用为例&#xff0c;完成密钥协商。 开发步骤 生成密钥 设备A、设备B各自生成一个非对称密钥&#xff0c;具体请参考[密钥生成]或[密钥导入]。 密钥生成时&#xff0c;可指定参数HUKS_TAG_DERIVE…

qt6 中 Qvariant

在 Qt 框架中&#xff0c;"上线文环境"这个表达可能会引起一些混淆。如果你在提及 QVariant 类时使用“上线文环境”这个词&#xff0c;可能是想表达QVariant在应用中的使用场景或其在特定功能中的角色。然而&#xff0c;如果直接翻译“上线文环境”至中文环境中与 Q…

LLM-文本分块(langchain)与向量化(阿里云DashVector)存储,嵌入LLM实践

文章目录 前言向量、令牌、嵌入分块按字符拆分按字符递归拆分按token拆分 向量化使用 TextEmbedding 实现语义搜索数据准备通过 DashScope 生成 Embedding 向量通过 DashVector 构建检索&#xff1a;向量入库语义检索&#xff1a;向量查询完整代码 总结 前言 Transformer 架构…

[C++][ProtoBuf][Proto3语法][三]详细讲解

目录 1.默认值2.更新消息1.更新规则2.保留字段reserved 3.未知字段1.是什么&#xff1f;2.未知字段从哪获取 4.前后兼容性5.选项option1.选项分类2.常用选项列举3.设置自定义选项 1.默认值 反序列化消息时&#xff0c;如果被反序列化的⼆进制序列中不包含某个字段&#xff0c;…

信息系统项目管理师【一】英文选择题词汇大全(1)

一、计算机相关词汇 数据挖掘 Data Mining分布式计算 Distributed Computing云计算 Cloud Computing物联网 IOT Internet of Things大数据 Big Data人工智能 artificial intelligence互联网 Internet plus区块链 Blockchain5G 5th-Generation感知层 sensing layer机器学习 mac…

基于Spring Boot的旅游信息推荐信息系统设计与实现(源码+lw+部署+讲解)

技术指标 开发语言&#xff1a;Java 框架&#xff1a;Spring BootJSP JDK版本&#xff1a;JDK1.8 数据库&#xff1a;MySQL5.7 数据库工具&#xff1a;Navicat16 开发软件&#xff1a;IDEA Maven包&#xff1a;Maven3.6.3 浏览器&#xff1a;IE浏览器 功能描述 旅游信…

Hadoop-19 Flume Agent批量采集数据到HDFS集群 监听Hive的日志 操作则把记录写入到HDFS 方便后续分析

章节内容 上一节我们完成了内容&#xff1a; Flume 启动测试Flume Conf编写Flume 测试发送和接收数据 背景介绍 这里是三台公网云服务器&#xff0c;每台 2C4G&#xff0c;搭建一个Hadoop的学习环境&#xff0c;供我学习。 之前已经在 VM 虚拟机上搭建过一次&#xff0c;但…

深入探索大语言模型

深入探索大语言模型 引言 大语言模型&#xff08;LLM&#xff09;是现代人工智能领域中最为重要的突破之一。这些模型在自然语言处理&#xff08;NLP&#xff09;任务中展示了惊人的能力&#xff0c;从文本生成到问答系统&#xff0c;无所不包。本文将从多个角度全面介绍大语…

AGE agtype 简介

AGE 使用一种名为 agtype 的自定义数据类型&#xff0c;这是 AGE 返回的唯一数据类型。agtype 是 Json 的超集&#xff0c;也是 JsonB 的自定义实现。 简单数据类型 Null 在Cypher中&#xff0c;null用于表示缺失或未定义的值。概念上&#xff0c;null表示“缺失的未知值”&…

路径规划 | 基于蚁群算法的三维无人机航迹规划(Matlab)

目录 效果一览基本介绍程序设计参考文献 效果一览 基本介绍 基于蚁群算法的三维无人机航迹规划&#xff08;Matlab&#xff09;。 蚁群算法&#xff08;Ant Colony Optimization&#xff0c;ACO&#xff09;是一种模拟蚂蚁觅食行为的启发式算法。该算法通过模拟蚂蚁在寻找食物时…

DONT_TOUCH

DONT_TOUCH DONT_TOUCH指示工具不优化用户层次结构、实例化组件或 信号&#xff0c;以便优化不会跨模块边界发生&#xff0c;或者消除 对象虽然这可以帮助进行布图规划、分析和调试&#xff0c;但它可以抑制 优化&#xff0c;导致更大、更慢的设计。 重要提示&#xff1a;Xilin…

数据赋能(143)——开发:数据拆分——概述、关注焦点

概述 数据拆分是指将一个大型的数据集合按照特定的规则或条件划分成多个较小的、更易于管理的数据子集的过程。 数据拆分操作属于数据整理过程。 这些子集可能基于数据的某个特征、时间范围、地理位置或其他属性进行划分&#xff0c;以便于单独分析、处理或存储。 数据拆分…

【安全设备】Web应用防火墙

一、什么是Web应用防火墙 Web应用程序防火墙&#xff08;Web Application Firewall&#xff09;的缩写是WAF&#xff0c;用于保护Web应用程序免受各种恶意攻击和漏洞利用。WAF通过监控和过滤进出Web应用程序的HTTP/HTTPS流量来工作。它位于Web应用程序和用户之间&#xff0c;分…

【总线】AXI第九课时:介绍AXI响应信号 (Response Signaling):RRESP和 BRESP

大家好,欢迎来到今天的总线学习时间!如果你对电子设计、特别是FPGA和SoC设计感兴趣&#xff0c;那你绝对不能错过我们今天的主角——AXI4总线。作为ARM公司AMBA总线家族中的佼佼者&#xff0c;AXI4以其高性能和高度可扩展性&#xff0c;成为了现代电子系统中不可或缺的通信桥梁…

spring监听事件

1、spring-监听事件基本原理 Spring的事件监听机制和发布订阅机制是很相似的&#xff1a;发布了一个事件后&#xff0c;监听该类型事件的所有监听器会触发相应的处理逻辑 2、Spring 监听事件相关规范 在Spring中&#xff0c;事件监听机制主要涉及到了一下几个关键的规范&#x…

AI学习指南机器学习篇-层次聚类距离度量方法

AI学习指南机器学习篇-层次聚类距离度量方法 引言 在机器学习领域中&#xff0c;层次聚类是一种有用且常见的聚类方法。它通过构建一个层次化的聚类树&#xff0c;将数据集中的样本逐步分组&#xff0c;从而实现聚类任务。在层次聚类过程中&#xff0c;距离度量方法是决定样本…