如何在JavaScript中实现继承?

2023-10-31


⭐ 专栏简介

前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅

欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个专栏中,我们将以问答形式每天更新,为大家呈现精选的前端知识点和常见问题解答。通过问答形式,我们希望能够更直接地回应读者们对于前端技术方面的疑问,并且帮助大家逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是各种常用框架和工具,我们将深入浅出地解释概念,并提供实际案例和练习来巩固所学内容。同时,我们也会分享一些实用技巧和最佳实践,帮助你更好地理解并运用前端开发中的各种技术。

在这里插入图片描述

不仅如此,我们还会定期推出一些项目实战教程,让你能够将所学知识应用到实际开发中。通过实际项目的练习,你将能够更好地理解前端开发的工作流程和方法论,并培养自己解决问题和独立开发的能力。我们相信,只有不断积累和实践,才能真正掌握前端开发技术。因此,请准备好迎接挑战,勇敢地踏上这段前端入门之旅!无论你是寻找职业转型、提升技能还是满足个人兴趣,我们都将全力以赴,为你提供最优质的学习资源和支持。让我们一起探索Web开发的奇妙世界吧!加入前端入门之旅,成为一名出色的前端开发者! 让我们启航前端之旅

在 JavaScript 中,继承可以通过以下几种方式来实现:


⭐ 原型链继承

原型链继承是 JavaScript 中最基本的继承方式,它基于原型链的概念。子类的原型对象指向父类的实例。这种方式简单,但有一些缺点,比如无法传递参数给父类构造函数,可能导致属性共享等问题。

function Parent() {
  this.name = '父类';
}

function Child() {}
Child.prototype = new Parent();

var child = new Child();
console.log(child.name); // 输出 "父类"

⭐ 借用构造函数继承(构造函数继承)

在子类构造函数中调用父类构造函数,通过 callapply 方法来实现属性的继承。这种方式解决了原型链继承的一些问题,但不能继承父类原型上的方法。

function Parent() {
  this.name = '父类';
}

function Child() {
  Parent.call(this);
}

var child = new Child();
console.log(child.name); // 输出 "父类"

⭐ 组合继承

组合继承是将原型链继承和构造函数继承结合起来的一种方式,它同时继承了父类原型上的方法和父类构造函数中的属性。

function Parent() {
  this.name = '父类';
}

Parent.prototype.sayHello = function() {
  console.log('Hello, ' + this.name);
};

function Child() {
  Parent.call(this);
}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child = new Child();
console.log(child.name); // 输出 "父类"
child.sayHello(); // 输出 "Hello, 父类"

⭐ 原型式继承

原型式继承通过创建一个新对象并将其原型设置为另一个对象来实现继承。它类似于浅拷贝。

var parent = {
  name: '父类',
  sayHello: function() {
    console.log('Hello, ' + this.name);
  }
};

var child = Object.create(parent);
child.name = '子类';
child.sayHello(); // 输出 "Hello, 子类"

⭐ 寄生式继承

寄生式继承是在原型式继承的基础上增强对象,通常是在一个函数内部创建一个对象,然后添加方法,最后返回这个对象。

function createChild(parent) {
  var child = Object.create(parent);
  child.name = '子类';
  child.sayHello = function() {
    console.log('Hello, ' + this.name);
  };
  return child;
}

var parent = {
  name: '父类'
};

var child = createChild(parent);
child.sayHello(); // 输出 "Hello, 子类"

⭐ 寄生组合式继承

寄生组合式继承是一种优化的继承方式,它在组合继承的基础上避免了调用两次父类构造函数。

function inheritPrototype(Child, Parent) {
  var prototype = Object.create(Parent.prototype);
  prototype.constructor = Child;
  Child.prototype = prototype;
}

function Parent() {
  this.name = '父类';
}

Parent.prototype.sayHello = function() {
  console.log('Hello, ' + this.name);
};

function Child() {
  Parent.call(this);
  this.childName = '子类';
}

inheritPrototype(Child, Parent);

var child = new Child();
console.log(child.name); // 输出 "父类"
console.log(child.childName); // 输出 "子类"
child.sayHello(); // 输出 "Hello, 父类"

每种继承方式都有其适用的场景和优劣势,选择合适的继承方式取决于具体的需求和设计考虑。通常情况下,寄生组合式继承是一种推荐的方式,它继承了父类的属性和方法,并且避免了构造函数的重复调用。


⭐ 写在最后

本专栏适用读者比较广泛,适用于前端初学者;或者没有学过前端对前端有兴趣的伙伴,亦或者是后端同学想在面试过程中能够更好的展示自己拓展一些前端小知识点,所以如果你具备了前端的基础跟着本专栏学习,也是可以很大程度帮助你查漏补缺,由于博主本人是自己再做内容输出,如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我,我们一起进步,与此同时也推荐大家几份专栏,有兴趣的伙伴可以订阅一下:除了下方的专栏外大家也可以到我的主页能看到其他的专栏;

前端小游戏(免费)这份专栏将带你进入一个充满创意和乐趣的世界,通过利用HTML、CSS和JavaScript的基础知识,我们将一起搭建各种有趣的页面小游戏。无论你是初学者还是有一些前端开发经验,这个专栏都适合你。我们会从最基础的知识开始,循序渐进地引导你掌握构建页面游戏所需的技能。通过实际案例和练习,你将学会如何运用HTML来构建页面结构,使用CSS来美化游戏界面,并利用JavaScript为游戏添加交互和动态效果。在这个专栏中,我们将涵盖各种类型的小游戏,包括迷宫游戏、打砖块、贪吃蛇、扫雷、计算器、飞机大战、井字游戏、拼图、迷宫等等。每个项目都会以简洁明了的步骤指导你完成搭建过程,并提供详细解释和代码示例。同时,我们也会分享一些优化技巧和最佳实践,帮助你提升页面性能和用户体验。无论你是想寻找一个有趣的项目来锻炼自己的前端技能,还是对页面游戏开发感兴趣,前端小游戏专栏都会成为你的最佳选择。点击订阅前端小游戏专栏

在这里插入图片描述

Vue3通透教程【从零到一】(付费) 欢迎来到Vue3通透教程!这个专栏旨在为大家提供全面的Vue3相关技术知识。如果你有一些Vue2经验,这个专栏都能帮助你掌握Vue3的核心概念和使用方法。我们将从零开始,循序渐进地引导你构建一个完整的Vue应用程序。通过实际案例和练习,你将学会如何使用Vue3的模板语法、组件化开发、状态管理、路由等功能。我们还会介绍一些高级特性,如Composition API和Teleport等,帮助你更好地理解和应用Vue3的新特性。在这个专栏中,我们将以简洁明了的步骤指导你完成每个项目,并提供详细解释和示例代码。同时,我们也会分享一些Vue3开发中常见的问题和解决方案,帮助你克服困难并提升开发效率。无论你是想深入学习Vue3或者需要一个全面的指南来构建前端项目,Vue3通透教程专栏都会成为你不可或缺的资源。点击订阅Vue3通透教程【从零到一】专栏

在这里插入图片描述

TypeScript入门指南(免费) 是一个旨在帮助大家快速入门并掌握TypeScript相关技术的专栏。通过简洁明了的语言和丰富的示例代码,我们将深入讲解TypeScript的基本概念、语法和特性。无论您是初学者还是有一定经验的开发者,都能在这里找到适合自己的学习路径。从类型注解、接口、类等核心特性到模块化开发、工具配置以及与常见前端框架的集成,我们将全面覆盖各个方面。通过阅读本专栏,您将能够提升JavaScript代码的可靠性和可维护性,并为自己的项目提供更好的代码质量和开发效率。让我们一起踏上这个精彩而富有挑战性的TypeScript之旅吧!点击订阅TypeScript入门指南专栏

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在JavaScript中实现继承? 的相关文章

  • 如何在chart.js中使用JSON数据?

    您好 我一直在尝试使用 MYSQL 数据库中的数据 并使用它们通过 Chart js 创建图形图表 我将数据编码为 JSON 数据 通过 php 文件名 data1 php 现在我需要使用 Jquery 或 javascript 将这些 J
  • 从 json 数组中获取成对的值

    首先 这是我从 php 源获取的 json 值 oid 2 cid 107 oid 4 cid 98 oid 4 cid 99 之后 我想要得到并且oid值以及相应的cid值例如 oid 2 and cid 107一口气 oid 4 and
  • 使用 Google Apps 脚本处理数组中输入元素中的多个文件

    我有一个表单 允许从下拉列表中选择一个项目并上传文件 项目的名称和 ID 保存在电子表格文档中 适用于一个文件 但我想上传多个文件 你能帮我修改一下脚本吗 HTML 部分如下所示 div class col md 4 col sm 6 di
  • model.save() 返回无效输出

    我正在使用本文中的 Node js mongodb 和express 对 REST Api 进行简单测试 MERN 第一部分 使用 Node js 和 Express 构建 RESTful API https medium com week
  • 外部 CSS 是否应用于 jsPDF 生成的 pdf

    我已经开始使用 jspdf 制作一些演示 我有一个 html 文件 我的 css 在外部文件中 我写了下面的代码来生成我的pdf pdfButton on click function var pdf new jsPDF p in lett
  • flexslider 中的 GIF 滑块,如何仅在滑块上时开始 gif

    现在我有一个带有四个幻灯片的 Flexslider 第三个滑块是 gif 而不是像其他滑块一样是 jpg 我遇到的问题是 第三个 gif 滑块显然在到达页面时立即启动 而不是在您实际到达该滑块时启动 当点击前两个滑块时 gif 就快完成了
  • Karma + JSPM + Typescript - 未找到“.ts.js”

    主要只是想让 Karma JSPM 在加载 ts 文件时发挥良好作用 但绝对没有运气 我看到一个讨论库 https github com Larchy karma jspm typescript coverage tree master一个
  • 根据用户的时间设置问候语(早上好,下午好......)

    任何人都可以推断如何根据用户的时间设置实现基本的 晚上好 或 早上好 也许 PHP 会获取服务器时间 但我希望用基于时间的适当问候语来问候网站访问者 并考虑到他们一天中的时间 E G 早上好 晚上好 下午好 基于它 getHours 日期对
  • 为什么 html 中的 AngularJS 错误没有显示在控制台中?

    Here s a fiddle http jsfiddle net 6y7odxmj 3 用于说明 当 ng click 指令 例如 调用未在控制器的 scope 或其父级 上定义的函数时 它会默默地失败 当我尝试调试网页时 这种行为令人抓
  • Javascript 函数,我如何开始理解它们?

    我完全理解 为了学习 javascript 我需要知道函数是如何工作的 我了解传递参数的基础知识 然后使用值调用函数以将某些内容添加到一起 等等 我读过无数关于函数的文章 例如以及书籍等 但我只是不明白它们是如何使用的以及何时应该使用它们等
  • 如何在jsp中使用javascript动态创建下拉框?

    我正在尝试动态创建下拉框 就像当我单击添加按钮时它必须创建新的下拉框 下拉列表还包含动态值 例如需要当前年份并且必须显示最多五年 请建议我这样做 谢谢 这是我尝试过的代码 JavaScript 代码 function Add var nam
  • 从变量值动态设置 ng-controller

    我正在使用 AngularJs 和 NodeJS 开发一个应用程序 我对将控制器的名称设置为主控制器中的变量的值感到震惊 为了更好地解释它 我的 index html 看起来像这样 tbody tr td td td member task
  • Jasmine 单元测试不等待承诺解析

    我有一个有角度的服务 它具有像这样的异步依赖项 function angular module app factory myService q asyncService function q asyncService var myData
  • Angular2 - 防止复选框被选中

    我有一个每行包含一个复选框的表 在表头中 我有一个Check All切换所有表格行框的复选框 我正在尝试实现一些逻辑 如果复选框的数量将超过特定限制 则显示错误并且不切换表行复选框或checkall盒子本身 有一个问题允许checkAll即
  • 扩展html表格突出显示行和列并使当前单元格具有不同的颜色

    我找到了用鼠标悬停时突出显示行和列的示例 https stackoverflow com a 28312853 139698 https stackoverflow com a 28312853 139698 如何使鼠标悬停的一个单元格变为
  • 如何使用 Ajax 在 Flask 中发布按钮值而不刷新页面?

    我有一个问题 当我单击 Flask 应用程序中的按钮时 我想避免重新加载 我知道有 Ajax 解决方案 但我想知道如何将我的按钮链接到 ajax 函数以发布按钮值并运行链接到其值的 python 函数 这是我的 html 按钮 div di
  • 带有延迟的 jQuery 切换类只能运行一次

    当涉及到 jQuery 匿名函数和延迟时 我显然错过了一些基本的东西 下面的代码每次页面加载只能运行一次 它将添加该类 然后在 1 秒后将其删除 如果我再次单击 它将添加该类 但在页面持续时间内永远不会删除该类 除非我重新加载页面 var
  • 如何运行 Mike Bostock 的 D3 示例?

    我一直在尝试经营迈克博斯托克透视地球仪 http bl ocks org mbostock 6747043例如 但是如果您尝试在本地重现它 则对其 json 文件的引用是不正确的 问题来自于这行代码 d3 json mbostock raw
  • 跨浏览器相当于explicitOriginalTarget事件参数

    有谁知道跨浏览器等价于explicitOriginalTarget事件参数 该参数是 Mozilla 特定的 它为我提供了导致模糊的元素 假设我的页面上有一个文本输入和一个链接 文本输入具有焦点 如果我点击链接 文本输入的模糊事件会通过ex
  • 通过均匀分布值来有效合并两个数组

    我见过许多问题 答案主题是通过交替值合并两个数组 他们是这样工作的 let array1 a b c d let array2 1 2 let outcome a 1 b 2 c d 但我希望输出更加高效 并且根据数组大小均匀分配值 exp

随机推荐

  • python压缩数据长度_Python错误:解压缩需要一个长度为4的字符串参数,但这是吗?...

    我正在使用python 2 7 我不明白为什么这行不通 有人可以给我提示 gt gt gt from struct import unpack gt gt gt T2 u xb6 u x01 u x59 u x59 gt gt gt T2
  • Anaconda Scrapy 安装

    anaconda安装 anaconda官网下载下载地址https www anaconda com distribution 安装anaconda没有什么注意事项 只要更改一下安装目录即可 其他的都可以默认下一步 安装成功后 配置一下环境变
  • 在UNIX \ Linux终端中的可视化磁盘空间和磁盘使用情况小工具 - Vizex

    在UNIX Linux终端中的可视化磁盘空间和磁盘使用情况小工具 Vizex 背景 什么是Vizex Linux终端上安装方法 如何使用Vizex 1 vezix 2 vizexdf 3 可以通过 help 使用command调用optio
  • 第一章 命题逻辑 1.4 析取范式与合取范式

    1 4 析取范式与合取范式 这一小节内容较多 我们由浅入深的来 首先要明白简单析取式和简单合取式的定义 定义 我们将命题变项及其否定统称作 文 字 red 文字 文字 简
  • c语言中stat函数,C语言:stat,fstat和lstat函数

    这三个函数的功能是一致的 都用于获取文件相关信息 但应用于不同的文件对象 对于函数中给出pathname参数 stat函数返回与此命名文件有关的信息结构 fstat函数获取已在描述符fields上打开文件的有关信息 lstat函数类似于st
  • Seata导致本地事务@Transactional失效解决方案

    原理 把spirng本地事务数据源设置为seata代理数据源 核心代码 在seata配置类中加入 Bean txManager public DataSourceTransactionManager txManager DataSource
  • JAVA中自定义异常方法抛出异常

    开发工具与关键技术 JAVA中的自定义异常 作者 邓崇富 撰写时间 2019 年 4 月 26 日 一 通过throw抛出异常 使用java内置的异常类可以描述在编程时出现的大部分异常情况 除此之外 用户只需要集成Exception类即可自
  • Docker开启远程进程服务以及VSCode、Idea等IDE连接使用远程

    Docker开启远程进程服务以及VSCode Idea等IDE连接使用远程 Docker远程服务 开发环境大多使用的的是windows系统 服务器运行环境一般采用Linux系统 这时候生成镜像时用到远程连接Docker服务 一 开启Dock
  • win10 nvprof的性能分析表

    交叉访问是全局内存中最糟糕的访问模式 因为它浪费总线带宽 使用多个线程块对基于交叉的全局内存访问重新排序到合并访问 https mp weixin qq com s h2XKth1bTujnrxyXTJ2fwg lt lt
  • Spring Boot 学习研究笔记(二十)-docker部署SpringBoot使用nginx配置域名

    Docker发布项目使用Nginx配置域名 步骤如下 第一步 在Docker 中部署SpringBoot JAR 包 详情请查看 Spring Boot 学习研究笔记 十二 Dcoker 中部署SpringBoot jar包 第二步 配置域
  • metric_logger小解

    今天看见这个一个函数metric logger 通过搜索资料发现他是utils中的一个MetricLogger类 可称它为度量记录器 因为这种都是自定义的 那我只说说我遇见的这个趴 我们先来看看他初始化里有什么 def init self
  • VMware14安装虚拟机出错——Intel VT-x处于禁用状态

    解决方法 进入BIOS 模式中 开启Intel VT x 具体步骤 win10 1 打开设置 搜索 高级启动 选择更改高级启动选项设置 然后点击立即启动 2 启动后 在蓝屏界面中选择疑难解答 gt 高级选项 gt UEFI固件设置 gt 选
  • 【matlab图像处理】插值方法

    中国史之 懿王攻犬戎 周懿 yi 王攻打犬戎的战争 周懿王在位时期 西周衰弱 戎族不断入侵周朝 一度打到镐 今陕西西安 岐 今陕西岐县 等地 懿王被迫迁都槐里 今陕西兴平县 周懿王派虢 guo 公率军北伐犬戎 企图收复失地 但不幸战败 来源
  • 抽象类、模板方法

    抽象类理解为一种模板 模板模式 使用 package com example demo author dc version 1 0 date 2023 03 28 12 55 public abstract class DayPlan pu
  • PMOS开关管的选择与电路图

    中心议题 探讨 解决方案 选用N沟道还是P沟道 确定额定电流 确定热要求 首先要进行MOSFET的选择 MOSFET有两大类型 N沟道和P沟道 在功率系统中 MOSFET可被看成电气开关 当在N沟道MOSFET的栅极和源极间加上正电压时 其
  • centos7 配置网络_linux入门系列11--Centos7网络服务管理

    通过前面文章的学习已经掌握了Linux系统配置管理的知识 本文讲解Centos7网络配置知识 Linux要对外提供服务 需要保证网络通信正常 因此需要正确配置网络参数 本文将讲解如何使用Network Manager配置网络参数 管理网络会
  • MATLAB中复数矩阵的转置、共轭及共轭转置

    参考博客 https blog csdn net zhaozhichenghpu article details 79162287 MATLAB中生成一个复数矩阵 MATLAB中复数矩阵的共轭用conj A MATLAB中复数矩阵的转置 A
  • 安卓USB模块源码分析(一)- 准备

    介绍USB服务在Android服务体系中的位置 源码的位置及使用AndroidStudio 查看USB模块FWK的配置方式 Windows环境准备 WSL2安装及AOSP源码下载编译 shimo im 安卓服务概览 Android 主要有如
  • os.walk()的使用方法

    os walk 主要用来扫描某个指定目录下所包含的子目录和文件 这篇文章将通过几个简单的例子来说明python中os walk 的使用方法 一 从上到下 遍历目录 该文件夹 和子目录 子文件夹 以及文件 txt等 假设我们的test文件夹有
  • 如何在JavaScript中实现继承?

    聚沙成塔 每天进步一点点 专栏简介 原型链继承 借用构造函数继承 构造函数继承 组合继承 原型式继承 寄生式继承 寄生组合式继承 写在最后 专栏简介 前端入门之旅 探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航