当前位置: 首页 > news >正文

【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​​​ 对象的属性和方法。

相关文章:

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

JavaScript 是一种动态类型的编程语言,其核心特性之一就是对象和原型链。理解原型及其工作机制对于掌握 JavaScript 的继承和对象关系非常重要。 什么是原型 每个对象都有一个内部属性 ​​[[Prototype]]​​​,这个属性指向创建该对象的构造函数的原型…...

【华为HCIP实战课程二十六】中间到中间系统协议IS-IS配置默认路由及IS-IS数据库,网络工程师

一、IS-IS路由器分类 1、L1路由器:Level-1路由器负责区域内的路由,它只与属于同一区域的Level-1和Level-1-2路由器形成邻居关系,属于不同区域的Level-1路由器不能形成邻居关系。Level-1路由器只负责维护Level-1的链路状态数据库LSDB,该LSDB包含本区域的路由信息。到本区域…...

mysql上课总结(2)(DCL的所有操作总结、命令行快速启动/关闭mysql服务)

目录 一、DCL小结(数据控制语言) 1、查询表不在当前使用的数据库,可以在表名前加数据库名。 2、系统数据库mysql 的 user 表。 3、在系统数据库mysql 的 user 表当中如何判断创建的用户是否唯一? 4、系统数据库mysql 的 user 表当…...

法律智能助手:开源NLP系统助力法律文件高效审查与检索

一、系统概述 思通数科AI平台是一款融合了自然语言处理和多标签分类技术的开源智能文档分类工具,特别适用于法律行业。平台采用深度学习的BERT模型来进行特征提取与关系抽取,实现了精准的文档分类和检索。用户可以在线训练和标注数据,使系统…...

如何使用AdsPower指纹浏览器克服爬虫技术限制,安全高效进行爬虫!

随着中国开发者日益成熟,应用质量明显提升,越来越多的开发者选择出海寻找机会扩大市场。但“应用出海”说起来容易,做起来难。其中,最大的困恼就是对海外市场缺乏了解。 很多开发者会选择使用网络爬虫(Web Crawling&a…...

四、虚拟化配置寄存器(HCR_EL2)

bit字段描述63:60TWEDELTWE延迟。当HCR_EL2.TWEDEn为1,由HCR_EL2引起的WFE*陷阱的最小延迟为2的(TWEDEL 8)次方,单位周期。59TWEDEnTWE推迟启用。让由HCR EL2.TWE引起的WFE*指令延迟陷入可配置。0:陷入的延迟是已经定义的;1&…...

我要成为算法高手-滑动窗口篇

目录 滑动窗口算法题目1:长度最小的子数组题目2:无重复字符的最长子串题目3:最大连续1的个数题目4:将x减到0的最小操作数题目5:水果成篮题目6:找到字符串中所有的字母异位词题目7:串联所有单词的子串题目8:最小覆盖子串 滑动窗口算法 滑动窗口的本质还是双指针,只不…...

jenkins搭建及流水线配置

1.安装docker curl https://mirrors.aliyun.com/repo/Centos-7.repo >> CentOS-Base-Aliyun.repomv CentOS-Base-Aliyun.repo /etc/yum.repos.d/yum -y install yum-utils device-mapper-persistent-data lvm2yum-config-manager --add-repo http://mirrors.aliyun.com/…...

Vue v-on

vue : v-on:func --------------------------- data(){ return{ prop:any; } } methods:{ func(){ } } template:, v-on...

快速生成高质量提示词,Image to Prompt 更高效

抖知书老师推荐: 随着 AI 技术的不断发展,视觉信息与语言信息之间的转换变得越来越便捷。在如今的数字化生活中,图像与文字的交互需求愈发旺盛,很多人都希望能轻松将图像内容直接转化为文本描述。今天我们来推荐一款实用的 AI 工…...

SELS-SSL/TLS

一、了解公钥加密(非对称加密) 非对称加密中,用于加密数据的密钥与用于解密数据的密钥不同。私钥仅所有者知晓,而公钥则可自由分发。发送方使用接收方的公钥对数据进行加密,数据仅能使用相应的私钥进行解密。 你可以将…...

算法:排序

排序算法 1. 简单排序1.1 直接插入排序1.2 冒泡排序1.3 简单选择排序 2. 希尔排序3. 快速排序4. 堆排序5. 归并排序 将文件的内容按照某种规则进行排列。 排序算法的稳定判定:若在待排序的一个序列中, R i R_i Ri​和 R j R_j Rj​的关键码相同&#xf…...

MyBatis-Plus 更新对象时如何将字段值更新为 null

MyBatis-Plus 是一个 MyBatis 的增强工具,在简化开发、提高效率方面表现非常出色。然而,在使用 MyBatis-Plus 更新对象时,默认情况下是不会将字段值更新为 null 的。这是因为 MyBatis-Plus 使用了非空字段策略(FieldStrategy&…...

Unreal5从入门到精通之如何在VR中使用3DUI

文章目录 前言创建3DUI1.新建控件蓝图2.添加控件到画布上3.新建Actor蓝图MyUIActor4.添加控件组件Widget5.设置控件类和画布大小6.创建MyUIActor实例到场景中3DUI和VR射线交互1.添加按钮的点击事件2.设置MyUIActor碰撞响应3.VRPawn添加控件交互组件4.添加手柄Trigger点击事件绑…...

ViSual studio如何安装 并使用GeographicLib

在C的 Boost.Geometry、GDAL/OGR 和 GeographicLib。这些库都可以用于计算两个经纬度点之间的地面距离。 . Boost.Geometry 描述:Boost库的一部分,提供了几何计算功能,包括计算两点之间的地面距离。 优势:轻量级、易于集成到C项…...

Java程序设计:spring boot(11)——分布式缓存 Ehcache 整合

目录 1 Spring Cache 相关注解说明 1.1 CacheConfig 1.2 Cacheable 1.3 CachePut 1.4 CacheEvict 1.5 Caching 2 环境配置 2.1 pom.xml 依赖添加 2.2 ehcahe.xml ⽂件添加 2.3 application.yml 缓存配置 2.4 启动缓存 2.5 JavaBean 对象实现序列化 3 缓存实现 3.…...

豆包,攻克数字是个什么工具?《GKData-挖掘数据的无限可能》(数据爬虫采集工具)

豆包,攻克数字是个什么工具? “攻克数字” 指的是 “攻克数字(GKData)” 这样一款工具。是一款针对网页、APP中数据自动解析转表存入数据库的软件,为数据工作者而生。它是一个不会编程也能用的可视化数据解析为标准二…...

说一说QWidget

目录 关于QWidget 作为界面组件时,你需要有印象的 1. 控制属性 2. 组件状态与交互属性 3. 外观和样式属性 4. 布局与子组件管理属性 5. 图标和光标属性 6. 大小策略属性 作为单独的窗体的属性 写Qt快两年了,也写过一些规模偏大的软件&#xff0c…...

Web3.0技术入门

Web3.0技术入门是一个涉及多个方面和领域的复杂过程,以下是一些关键的步骤和要点,帮助您初步了解并掌握Web3.0技术。 一、了解Web3.0的基本概念 Web3.0也被称为下一代互联网,它是对当前互联网(Web2.0)的演进和升级。…...

spygalss cdc 检测的bug(二)

当allow_qualifier_merge设置为strict的时候,sg是要检查门的极性的。 如果qualifier和src经过与门汇聚,在同另一个src1信号或门汇聚,sg是报unsync的。 假设当qualifier为0时,0&&src||src1src1,src1无法被gat…...

集合论(ZFC)之 选择公理(Axiom of Choice)注解

直观感受(Intuition) 集合论(ZFC)中的 "C" 指的是选择公理(Axiom of Choice)中的"choice"。简单来说,对于任一非空集合 S,那么存在一个函数 f,选择出…...

JS:字符串操作

目录 1、 字符串分割 1、 字符串分割 var str "123,456,789"; console.log(str.split(,)); // ["123", "456", "789"]...

.NET 一款二进制文件转换Shellcode的工具

01阅读须知 此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等(包括但不限于)进行检测或维护参考,未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成的直接或间接后果和损失&#xf…...

【CSS】——基础入门常见操作

阿华代码,不是逆风,就是我疯 你们的点赞收藏是我前进最大的动力!! 希望本文内容能够帮助到你!! 目录 一:CSS引入 二:CSS对元素进行美化 1:style修饰 2:选…...

LuaJIT源码分析(五)词法分析

LuaJIT源码分析(五)词法分析 lua虽然是脚本语言,但在执行时,还是先将脚本编译成字节码,然后再由虚拟机解释执行。在编译脚本时,首先需要对源代码进行词法分析,把源代码分解为token流。lua的toke…...

005 匿名信

005 匿名信 题目描述 电视剧《分界线》里面有一个片段,男主为了向警察透露案件细节,且不暴露自己,于是将报刊上的字剪下来,剪拼成一封匿名信。现在有一名举报人,希望借鉴这种方式,使用英文报刊完成举报操…...

聊聊Web3D 发展趋势

随着 Web 技术的不断演进,Web3D 正逐渐成为各行业数字化的重要方向。Web3D 是指在网页中展示 3D 内容的技术集合。近年来,由于 WebGL、WebGPU 等技术的发展,3D 内容已经能够直接在浏览器中渲染,为用户提供更加沉浸、互动的体验。以…...

【数据结构与算法】LeetCode: 贪心算法

文章目录 LeetCode: 贪心算法买卖股票的最佳时机 (Hot100)买卖股票的最佳时机 II跳跃游戏 (Hot100)跳跃游戏 II(Hot100)划分字母区间 (Hot100)分发饼干K次取反后最大化的…...

Date 日期类的实现(c++)

本文用c实现日期类 将会实现以下函数 bool operator<(const Date& d);bool operator<(const Date& d);bool operator>(const Date& d);bool operator>(const Date& d);bool operator(const Date& d);bool operator!(const Date& d);Date&…...

智能家居10G雷达感应开关模块,飞睿智能uA级别低功耗、超高灵敏度,瞬间响应快

在当今科技飞速发展的时代&#xff0c;智能家居已经逐渐成为人们生活中不可或缺的一部分。从智能灯光控制到智能家电的联动&#xff0c;每一个细节都在为我们的生活带来便利和舒适。而在众多智能家居产品中&#xff0c;10G 雷达感应开关模块以其独特的优势&#xff0c;正逐渐成…...

中企动力的网站/品牌宣传文案范文

“ 集 图集规范库&#xff0c;教学视频&#xff0c;方案库&#xff0c;施工技巧等功能于一体&#xff0c;打造建筑人自己的微信平台&#xff01;关注我们获取更多精彩.点击 ☝ 蓝字关注公众号&#xff0c;给你不一样的惊喜&#xff01;温馨提示&#xff1a;正文共&#xff1a;1…...

网站建设的市场有多大/百度搜索引擎优化案例

1.SQL语句的特点&#xff1a; 1.1 不区分大小写 1.2 每条语句以;结尾 2.SQL语句中常用关键字: select,insert,update,from,create,where,desc,order,by,group,table,alter,view,index等。 数据库中不能出现与上述关键字重名的表名和字段。 3.SQL语言种类&#xff1a; 3.1 数据…...

网站建立公司四川/百度推广服务

目录 第一部分:基本概念 第二部分&#xff1a;如何创建一个线程 创建线程方式一&#xff1a;继承Thread类。 创建线程方式二&#xff1a;实现Runnable接口。 例子&#xff1a;四个窗口一起共卖100张票&#xff08;有待改进版&#xff09; 第三部分&#xff1a;线程的安全…...

政府网站建设经验交流/东莞网站制作外包

从旅游行业的网站经常使用出色的拍摄和有吸引力的的设计。当然&#xff0c;一个有吸引力的网站&#xff0c;可以帮助尽可能吸引的人可能会在访问感兴趣的网站的主题。在这篇文章中&#xff0c;我们将展示30网站很棒的网站 VisitPhilly.com The Cardiff Apartment Grand Island …...

中国建设银行网站网上银行/关键词热度查询工具

在用Maven构建使用JDK1.5编写的应用时&#xff0c;经常会遇到控制台输出“不支持泛型&#xff0c; 请使用 &#xff0d;source 5 或更高版本以启用泛型”的异常信息&#xff0c;原因是你的应用中使用了JDK1.5的新特性&#xff1a;泛型编程&#xff0c;而Maven默认采用的JDK为JD…...

网站开发时间表/优化关键词排名软件

1.定距尺度的计量结果可以&#xff08;&#xff09;. A.相加 B.相减 C.相乘 D.相除 E.比较大小 2.统计数据的登记性误差形成的原因主要有&#xff08;&#xff09;。 A.有意瞒报或虚报调查数据 B.抄录错误 C.样本容量不足 D.抽样没有遵循随机原则 E.汇总错误 3.下列选项中&…...