Javacript如何实现继承?

在 JavaScript 中,可以使用原型链和构造函数来实现继承。下面分别介绍两种方式的实现方法:

1. 使用原型链实现继承

javascriptCopy Codefunction Parent(name) {this.name = name;
}Parent.prototype.getName = function() {return this.name;
};function Child(name, age) {Parent.call(this, name); // 继承属性this.age = age;
}Child.prototype = new Parent(); // 继承方法
Child.prototype.constructor = Child; // 修复构造函数指向var child = new Child('Alice', 10);
console.log(child.getName()); // 输出 'Alice'

在这个例子中,通过将 Child 的原型设置为一个新的 Parent 实例来实现继承,这样 Child 就可以访问 Parent 的属性和方法。

2. 使用构造函数实现继承(经典继承)

javascriptCopy Codefunction Parent(name) {this.name = name;
}Parent.prototype.getName = function() {return this.name;
};function Child(name, age) {Parent.call(this, name); // 继承属性this.age = age;
}var parent = new Parent('Bob');
var child = new Child('Alice', 10);console.log(parent.getName()); // 输出 'Bob'
console.log(child.getName()); // 报错,因为 Child 没有继承 Parent 的原型方法

在这个例子中,通过在子类构造函数内部使用 Parent.call(this, name) 来继承父类的属性,但无法继承父类的原型方法。

在实现继承时,要正确处理原型链和构造函数的关系,以避免出现意外的行为。另外,ES6 中也引入了 class 和 extends 的语法糖,使得实现继承更加直观和易用。

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

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

相关文章

深入解析阻塞队列BlockingQueue及源码(超详细)

一、基础概念 1.1 BlockingQueue BlockingQueue 是 java.util.concurrent 包提供的用于解决并发生产者 - 消费者问题的最有用的类。 1.1.1 队列类型: 无限队列 (unbounded queue ) - 几乎可以无限增长 有限队列 ( bounded qu…

代码随想录算法训练营第二十九天| 491.递增子序列、46.全排列 、47.全排列 II

代码随想录算法训练营第二十九天| 491.递增子序列、46.全排列 、47.全排列 II 题目 491.递增子序列 给你一个整数数组 nums ,找出并返回所有该数组中不同的递增子序列,递增子序列中 至少有两个元素 。你可以按 任意顺序 返回答案。 数组中可能含有重…

自创C++题目——风扇

预估难度 简单 题目描述 有一个风扇,它有个旋转叶片,每个旋转叶片的编号是,请输出它旋转后,中心点与地面的直线距离哪个叶片最近,输出此旋转叶片的编号。默认以“”的形式。 当时: 当或时,…

海康visionmaster-VM 嵌入:嵌入用户软件界面的方法

描述 环境:VM4.0.0 VS2015 及以上 现象:将 VM 整体嵌入到客户软件界面中? 解答 将 VM 软件整体嵌入到客户软件中,需要利用 Panel 控件,并且需要先启动 VM 软件,具 体代码如下: C# [DllImport(“…

linux NTP服务器配置

需求场景:局域网内多台服务器时间同步,保持一致 前提条件: 1,各服务器已正确安装NTP服务,查询命令如下: rpm -qa | grep ntp,若回显信息中包含ntp-4.2之类的,表示服务器上存在ntp…

电脑监控软件有哪些,那个好用?

在当今信息化时代,电脑已经成为企业和个人工作、生活中不可或缺的工具。 然而,随着网络的普及和电脑使用频率的增加,也带来了一些安全隐患和管理上的挑战。 为了更好地保护电脑安全、规范员工工作纪律,越来越多的企业和个人开始使…

vue2 与 vue3 实现自定义组件v-model双向数据绑定的方式

前言 有时候我们需要对一个组件绑定自定义 v-model,以更方便地实现双向数据 甚至有时候,我们想要实现绑定多个 “v-model”,也就是多个“双向绑定”,好在 vue 3 已经实现了可使用多个 v-model 例如: 自定义表单输入控件…

OpenEuler校正时间、OpenEuler设置时间

[rootlocalhost ~]# timedatectl set-time "2024-01-16 12:21:15" Failed to set time: Automatic time synchronization is enabled 断网情况下设置OpenEuler的时间,直接执行timedatectl set-time "2024-01-16 12:21:15"是报错的,…

day18 找树左下角的值 路径总和 路径总和Ⅱ 从中序与后序遍历序列构造二叉树 从前序与中序遍历序列构造二叉树

题目1:513 找树左下角的值 题目链接:513 找树左下角的值 题意 找出二叉树的最底层 最左边节点的值 (假设二叉树中至少有1个节点) 最底层节点确保是深度最大的叶子节点,最左边的节点却不一定是左孩子 递归遍历 深度最大的叶子节点最…

docker使用nginx部署vue刷新页面404

docker使用nginx部署vue刷新页面404 从docker内部复制出来的配置文件是这样的,但是刷新页面之后就显示404,关键是我两个前端项目都是用的这一个配置文件,但是只有一个项目出现刷新浏览器显示404的问题,这给我搞懵了!&…

【dayjs】类型“Dayjs”上不存在属性“isSameOrAfter”

dayjs中有一些方法是需要使用插件后才能使用,默认情况下,Day.js只提供核心代码,没有安装插件。 解决方法: import dayjs from dayjs;import isSameOrAfter from dayjs/plugin/isSameOrAfter;dayjs.extend(isSameOrAfter);再次使…

AI嵌入式K210项目(5)-串口通讯

文章目录 前言一、什么是UART?二、K210的UART三、实验过程总结 前言 串口通讯是平时大家进行调试最常用的方法,嵌入式应用通常要求一个简单的并且占用系统资源少的方法来传输数据。通用异步收发传输器 (UART)即可以满足这些要求,它能够灵活地…

odoo16 权限继承修改字段显示2

odoo16 权限继承修改字段显示2 上次文章写道:最近在搭建的一个服装批发中心使用的进销存一体化项目,由于客户文化水平低,不想在发货界面显示 好多无用功能,有些是有用的,有些是他不关心的。占在用户角度考虑,用不到的功能都是垃圾。有他们的道理。在隐藏的过程中,出现了…

2011 年考研数二真题解析

一、选择题 【01】【02】【03】【04】【05】【06】【07】【08】 二、填空题 【09】【10】【11】【12】【13】【14】 三、解答题 【15】【16】【17】【18】【19】【20】【21】【22】【23】

A-B 数对(洛谷)

A-B 数对 题目背景 出题是一件痛苦的事情! 相同的题目看多了也会有审美疲劳,于是我舍弃了大家所熟悉的 AB Problem,改用 A-B 了哈哈! 题目描述 给出一串正整数数列以及一个正整数 C,要求计算出所有满足 A - B C 的数…

运筹说 第90期 | 网络计划-图解评审法

前述章节的网络计划方法主要研究以时间为主要参数的确定型网络模型,其中的概率型网络模型也只讨论工作公式的不确定性,并没有对事项或工作的不确定性进行讨论。由于这类网络模型的建立有严格的规则,大量研究与开发类计划尚无法表达。因从本期…

vue中el-radio无法默认选中

页面上不生效&#xff0c;默认什么都不选中 <el-radio-group v-model"queryParams.videoUrlType"><el-radio :label"1">本地上传</el-radio><el-radio :label"2">外部链接</el-radio> </el-radio-group>da…

污水处理厂能耗分析系统,高效节能保护环境的利器

在城市化发展中&#xff0c;水污染问题也愈发凸显&#xff0c;在污水处理过程中&#xff0c;所产生的能源相对较多&#xff0c;企能源消耗的量就比较大&#xff0c;所以成本就会较高。因此&#xff0c;应对污水处理的具体情况需要进行深入分析与研究&#xff0c;明确具体消耗情…

Lamp架构从入门到精通

系列文章目录 lnmp架构 lnmp架构-nginx负载均衡以及高可用 系列文章目录一、源码编译configure(检测预编译环境是否可行)makemake install优化关闭Debug 二、 nginx负载均衡三、nginx的高并发nginx work数量的设定nginx work进程与cpu的静态绑定压力测试nginx高并发修改操作系…

使用 Apache POI XDGF 读取 vsdx 文件

引入依赖 <dependency><groupId>org.apache.logging.log4j</groupId><artifactId>log4j-core</artifactId><version>2.22.1</version> </dependency> <dependency><groupId>org.apache.logging.log4j</groupI…