【Web前端】JavaScript 对象原型与继承机制

JavaScript 是一种动态类型的编程语言,其核心特性之一就是对象和原型链。理解原型及其工作机制对于掌握 JavaScript 的继承和对象关系非常重要。


什么是原型

每个对象都有一个内部属性 ​​[[Prototype]]​​​,这个属性指向创建该对象的构造函数的原型对象。这个内部属性通常被称为原型链(prototype chain)。原型链是 JavaScript 实现继承和属性查找的基础机制。


原型链的工作机制

原型链是一种用于实现继承的机制。当你访问一个对象的属性时,JavaScript 会首先在对象本身上寻找这个属性。如果在对象本身上找不到这个属性,它会沿着原型链向上查找,直到找到这个属性或者到达原型链的顶端。

代码示例

const person = {name: 'Xianyu',age: 23
};const child = Object.create(person);
child.job = 'Student';console.log(child.name); // Xianyu
console.log(child.age); // 23
console.log(child.job); // Student

示例中 ​​child​​ 对象的原型是 ​​person​​ 对象。当我们访问 ​​child.name​​ 和 ​​child.age​​ 时,JavaScript 会首先在 ​​child​​ 对象上寻找这些属性。如果在 ​​child​​ 对象上找不到这些属性,它会沿着原型链向上查找,找到 ​​person​​ 对象上的 ​​name​​ 和 ​​age​​​ 属性。


设置原型

JavaScript 中有多种方式可以为一个对象设置原型。主要有三种方式:使用 ​​Object.create​​​、使用构造函数和自有属性。

使用 ​​Object.create​

​Object.create​​ 方法是 JavaScript 中为对象设置原型的最常用方式。它允许你创建一个新对象,并指定这个新对象的原型。

const person = {name: 'Xianyu',age: 23
};const child = Object.create(person);
child.job = 'Student';console.log(child.name); // Xianyu
console.log(child.age); // 23
console.log(child.job); // Student

​child​​ 对象的原型是 ​​person​​​ 对象。


使用构造函数

构造函数是另一种为对象设置原型的方式。每个构造函数都有一个 ​​prototype​​ 属性,这个属性指向构造函数的原型对象。

function Person(name, age) {this.name = name;this.age = age;
}const person = new Person('Xianyu', 23);
const child = new person.constructor();
child.job = 'Student';console.log(child.name); // undefined
console.log(child.age); // undefined
console.log(child.job); // Student

示例中​​child​​ 对象的原型是 ​​Person.prototype​​。


自有属性

自有属性是对象本身上定义的属性,而不是通过原型链继承的属性。自有属性的优先级高于原型链上的属性。

const person = {name: 'Xianyu',age: 23
};const child = Object.create(person);
child.name = 'Xianyadan';
child.age = 22;
child.job = 'engineer';console.log(child.name); // Xianyadan
console.log(child.age); // 22
console.log(child.job); // engineer

​child​​ 对象有自有属性 ​​name​​ 和 ​​age​​​,这些自有属性会遮蔽原型链上的同名属性。


属性遮蔽

属性遮蔽是指自有属性会遮蔽原型链上的同名属性。当你访问一个对象的属性时,JavaScript 会首先查找自有属性,如果找到了,就不会再沿着原型链向上查找。

代码示例

const person = {name: 'Xianyu',age: 23
};const child = Object.create(person);
child.name = 'Xianyadan';
child.age = 22;console.log(child.name); // Xianyadan
console.log(child.age); // 22

示例中​​child​​​ 对象有自有属性 ​​name​​​ 和 ​​age​​,这些自有属性会遮蔽原型链上的同名属性。


原型与继承

JavaScript 通过原型链实现继承。继承是指一个对象可以继承另一个对象的属性和方法。通过设置对象的原型,我们可以实现对象之间的继承关系。

代码示例

function Person(name, age) {this.name = name;this.age = age;
}Person.prototype.sayHello = function() {console.log('Hello, I am ' + this.name);
};function Student(name, age, grade) {Person.call(this, name, age);this.grade = grade;
}Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;const student = new Student('Xianyu', 23, 'A');
student.sayHello(); // Hello, I am Xianyu
console.log(student.grade); // A

​Student​​ 构造函数通过调用 ​​Person​​ 构造函数来继承 ​​Person​​ 对象的属性和方法。​​Student.prototype​​ 被设置为 ​​Person.prototype​​ 的一个实例,从而实现了 ​​Student​​ 对象继承 ​​Person​​​ 对象的属性和方法。

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

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

相关文章

基于YOLO11/v10/v8/v5深度学习的危险驾驶行为检测识别系统设计与实现【python源码+Pyqt5界面+数据集+训练代码】

《博主简介》 小伙伴们好,我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源,可关注公-仲-hao:【阿旭算法与机器学习】,共同学习交流~ 👍感谢小伙伴们点赞、关注! 《------往期经典推…

Android OpenGL ES详解——裁剪Scissor

目录 一、概念 二、如何使用 1、开启裁剪测试 2、关闭裁剪测试 3、指定裁剪窗口(位置和大小) 4、裁剪应用举例 三、窗口、视⼝和裁剪区域三者区别 四、源码下载 一、概念 定义1: 裁剪是OpenGL中提⾼渲染的⼀种方式,只刷新…

江协科技STM32学习- P22 实验-ADC单通道/ADC多通道

🚀write in front🚀 🔎大家好,我是黄桃罐头,希望你看完之后,能对你有所帮助,不足请指正!共同学习交流 🎁欢迎各位→点赞👍 收藏⭐️ 留言📝​…

【数据结构】树-二叉树-堆(下)

🍃 如果觉得本系列文章内容还不错,欢迎订阅🚩 🎊个人主页:小编的个人主页 🎀 🎉欢迎大家点赞👍收藏⭐文章 ✌️ 🤞 🤟 🤘 🤙 👈 &…

-XSS-

链接 https://github.com/do0dl3/xss-labs 搭建过程非常容易的 搭建好之后,就可以点击图片开始闯关了 第一关--JS弹窗函数alert() 显示payload的长度是4 level1.php?nametest level1.php?nametest1 发现只要改变name的值就显示什么在页面上 没有什么过滤的 …

【数据结构与算法】《Java 算法宝典:探秘从排序到回溯的奇妙世界》

目录 标题:《Java 算法宝典:探秘从排序到回溯的奇妙世界》一、排序算法1、冒泡排序2、选择排序3、插入排序4、快速排序5、归并排序 二、查找算法1、线性查找2、二分查找 三、递归算法四、动态规划五、图算法1. 深度优先搜索(DFS)2…

transformControls THREE.Object3D.add: object not an instance of THREE.Object3D.

把scene.add(transformControls);改为scene.add(transformControls.getHelper());

计算机视觉专栏(1)【LeNet】论文详解

Lenet 系列 论文精讲部分0.摘要1.引言2.CNN3.结果分析4.总结 论文精讲部分 本专栏旨在深入解析计算机视觉模型的论文及其发展背景,并通过代码部分的实际实验来加深理解。读者可以根据自己的需要参考其中的内容。其主体为原文,笔者理解内容会采用引用格式…

[ 问题解决篇 ] 解决windows虚拟机安装vmtools报错-winserver2012安装vmtools及安装KB2919355补丁 (附离线工具)

🍬 博主介绍 👨‍🎓 博主介绍:大家好,我是 _PowerShell ,很高兴认识大家~ ✨主攻领域:【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 🎉点赞➕评论➕收藏 养成习…

Window on ARM解锁所有的TTS语音包供python调用

Window on ARM解锁所有的TTS语音包供python调用 可用的语音包查看查看TTS可用的语音包解锁语音包设置升级系统打开注册表导出注册表修改注册表导入新的注册表可用的语音包查看 微软的Windows 10操作系统为设备上安装的每种语言提供了一套语音。但只有部分已安装的语音能在整个…

EPLAN创建宏并自定义部件库详细案例操作(三)

#通过导入EDZ格式部件库的样式,模仿制作一个自定义的部件库# 续 EPLAN创建宏并自定义部件库详细案例操作(二) 需要部件库文件(EDZ)格式,可以在此下载: https://download.csdn.net/download/weixin_44166380/89935582 五、创建部件库 本章节的部分操作忽略,具体可参见…

电子电气架构 --- 车载芯片现状

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 所有人的看法和评价都是暂时的,只有自己的经历是伴随一生的,几乎所有的担忧和畏惧…

我docker拉取mysql镜像时用的是latest,我该怎么看我的镜像版本是多少?可以通过一下三种方法查看

我docker拉取mysql镜像时用的是latest,我该怎么看我的镜像版本是多少? 方法一:查看 Docker 镜像标签 你可以查看 Docker 镜像的标签信息,了解当前使用的 MySQL 镜像版本。 具体步骤如下: 1. 列出本地 Docker 镜像&am…

识别风险的提示清单

在PMBOK(《项目管理体系指南》)中,介绍了这样一个概念,在识别风险时,可以提供一个参考清单,让大家基于一个清单来思考,这个项目可能有哪些具体的风险。 PMBOK中的风险提示清单,包括…

Unreal Engine 5 C++(C#)开发:使用蓝图库实现插件(二)编辑BPLibrary.h中的枚举及结构体

目录 引言 一、头文件编写 1.1Kismet/BlueprintFunctionLibrary.h 1.2BPLibrary.generated.h的作用 1.3IImageWrapper.h 1.4 IImageWrapperModule.h 1.5 Engine/Texture2D.h 1.6CoreMinimal.h 二、定义图片/路径类型的枚举 2.1图片枚举类EImageType 2.2路径枚举类EPath…

Vuestic 整理使用

简单示例 1. 条件渲染 2. 列表渲染 3. 组件插槽 4. 插值语法 5. 前后端路由的区别(还是转一下,可以减少代码量)SFC 构建 … … Okay,可以干活了,通顺 数据表的操作更加简化了 数据类别通过后端路由区别,但是还得由前端路由转一下 简单了许多呀,上脚手…

ssm017网上花店设计+vue(论文+源码)_kaic

设计题目:网上花店的设计与实现 摘 要 网络技术和计算机技术发展至今,已经拥有了深厚的理论基础,并在现实中进行了充分运用,尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代,所以对于信…

网页上视频没有提供下载权限怎么办?

以腾讯会议录屏没有提供下载权限为例,该怎么办呢? 最好的办法就是找到管理员,开启下载权限。如果找不到呢,那就用这个办法下载。 1.打开Microsoft Edge浏览器的扩展 2.搜索“视频下载”,选择“视频下载Pro” 3.点击“…

使用pyecharts绘制词云图

一、什么是词云图? 词云图是一种用来展现高频关键词的可视化表达,通过文字、色彩、图形的搭配,产生有冲击力地视觉效果,而且能够传达有价值的信息。 制作词云图的网站有很多,简单方便,适合小批量操作。 …

一、ARMv8寄存器之通用、状态、特殊寄存器

ARMV8核心寄存器数量是非常大的,为了更好的学习,可以划分为以下几大类: 通用寄存器。这类寄存器主要是用来暂存数据和参与运算。通过load\store指令操作。状态寄存器。AArch64体系结构使用PSTATE寄存器表示当前处理器状态。特殊寄存器。有专门…