JavaScript中class继承之后父级和子级原型的关系

最新推荐文章于 2025-07-23 14:27:17 发布
原创 最新推荐文章于 2025-07-23 14:27:17 发布 · 607 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细探讨了JavaScript中类的继承机制，通过具体实例解释了如何通过类继承实现原型链的连接，以及new操作符创建对象时原型链的传递过程。 
class Component {}
class Greeting extends Component {}

上面的例子，Greeting继承Component意味着

一. Greeting.__proto__ ===  Component

二. Greeting.prototype.__proto__ === Component.prototype

也就是说 new Greeting().__proto__.proto__ ===  Component.prototype

new Greeting().__proto__.__proto__ ===  new Component().__proto__

JavaScript和jQuery的概述《干货》
2301_79258776的博客
04-23 1570
学会javaScript和jQuery的灵活运用！
Javascript
weixin_43460646的博客
08-14 1269
本博客主要为黑马程序员网课中关于 JS 模块（网课在下面有介绍）所整理记录的学习笔记，仅作学习用途，如有侵权，烦请联系本人侵删。同时感谢黑马老师们的辛苦教导付出，如有不足之处，欢迎各位小伙伴、官老爷们多多提意见或建议，感谢！ JS入门到精通、DOM BOM操作、jQuery案例精讲、AJAX node.js webpack git一套全覆盖 一、JS基础 了解变量、数据类型、运算符等基础概念，能够实现数据类型的转换，结合四则运算体会如何编程。 体会现实世界中的事物与计算机
继承时候的父子关系
Daemon_neu的专栏
06-11 1169
 今天真郁闷，写个程序真TNND麻烦，GUI做出来了，又要测试数据，数据是什么？可以数组输出，可以文件输出。挑个简单的吧，简单的也不顺，明摆着的事情，都能正确在图像上显示出来，可是用system.out.println()出来就是TYYD全0！我真要崩溃了啊，到底哪里出错了啊，难道这里我还要把int分成一个个字节来换算吗？不都已经换了一次了吗？本来程序没有多长时间就出来，这样一搞，换来换去，最
iOS ——OC——继承关系的理解和子类对父类方法的使用
Maybe_2333的博客
04-02 831
一.继承： 子类可以直接复用父类中的成员.子类继承父类所有方法的声明和实现 非私有的实例变量以及协议 继承时要在.h中声明一下 继承具有单根性和传递性 继承的根类：大多都继承自 NSObject 类，所以在定义一个类时，要继承NSObject 类。 继承就是代码优化公共部分交给父类 例如： （Person是父类Worker和Worker都继承了Person成为...
随机数，协程，父级和子级关系
ying1228475251的博客
12-30 317
随机数： float a = Random.value; print(a); float b = Random.Range(1.0f, 10f);//1-10的小数(包含1和10) print(b); int c = Random.Range(1, 10);//1-10的整数(包含1和10) print(c); 协程： void Start () ...
递归遍历出所有父子级的层级关系【包含跨级】
qq_31217363的博客
07-02 3788
问题 需要递归遍历出所有父子级的层级关系【包含跨级】 如图：需要找出各个有父子级关联之间的层级关系，例如 节点0 和 节点1，节点0 和 节点3，节点 1 和 节点5 之间的关系（节点2 和 节点4不算） 解题思路： 1：拿到本节点的子节点 2：把子节点当主节点，获取主节点与父节点的层级关系 3：判断主节点的父节点是否为顶层节点，如果不是，则获取到父节点并递归取父节点的父节点，获取主节点与【父节点的父节点】的层级关系 4：依次判断，递归 具体案例代码： import lombok.Data; impo
js prototype 继承提取父级值的问题
周家大小姐
03-22 431
如果在方法用var那么当前只是在方法里声明的变量,这变量并没有赋值给对象,所以报错 function supers(){ var value = 0; } supers.prototype.sub = function(value){ this.value ++; console.log(this.v...
JavaScript -- 面向对象
qq_25329389的博客
07-23 922
本文系统介绍了JavaScript面向对象编程的核心概念与应用。主要内容包括：1）封装：通过直接量、构造函数等方式创建对象；2）继承：利用原型对象实现子对象共享属性和方法；3）多态：子对象重写父对象成员。详细讲解了10种创建对象的方法、7种继承实现方式以及深浅克隆技术，并深入分析了原型链机制和this关键字的多种应用场景，为前端开发提供了全面的面向对象编程指导。
JavaScript最全面试题
qq_60976312的博客
06-10 1699
JavaScript最全面试题
JavaScript全面指南(一)
唯见青山不见君
10-14 1470
JavaScript全面指南
class的使用2--子类的创建/新属性/重写父类/大类划分小类
pangzhuzhuzhu的博客
09-06 328
子类 会继承父类的一切属性 使用init初始化时，需要用self 但是使用super时，不使用self 给子类定义新属性 就和父类定义新属性一样 不写在括号里 在self里写清楚初始值或调用类 如果调用类 也需要在类里使用初始值 重写父类--父类中的函数不适合子类，不需要删除父类的函数，在子类处定义同名函数，但是内容写自己想要的就行 将实例用作属性--将大类拆分成多个协同工作的小类 init属性里需要使用初始值 大类调用小类的时候 大类里是没有初始值的，所以小类里必须使用初始值 .
CSS选择器(元素+class+id+后代+子元素+相邻+属性+选择器分组)
热门推荐
北溟南风起
03-08 2万+
元素选择器( p{ ...; ...;}) 对已选中的HTML元素符号设置CSS样式 div、 p、 a 、ul 、li等 基本格式： div { height:80px; width:80px; } 1.div: 元素符号 2.width、height : 属性 3.80px : 属性值 class选择器( .Name { ...; ...;} )...
关于 class 的实现与继承
the_f54a的博客
10-25 256
或者类表达式中，以创建一个类，该类是另一个类的子类。关键字用来创建一个普通类或者内建对象的子类。
类、构造函数以及js的继承方法
tptx的博客
07-19 231
js继承的方法
class 原生js获取父元素_原生js获取class
weixin_32902659的博客
12-28 2428
//使用原生js时，通过class名称就可以得到相应的class名称标签组封装的函数//定义一个函数getClass(oParent,aClass);function getClass(oParent,aClass){　　　　　　　　　　　　　//oParent为要获取的className的父级元素对象var aEle = document.getElementsByTagName('*');　　...
Javascript ES6 Class继承的原理
JSzilla
11-22 5286
1. 前言 ES6新增的Class（类）给我们编程带来了极大方便，有人说这实际上是函数的语法糖，我是赞同的，但词法作用域和原型链是Javascript的核心思想，Class是基于原型链实现的，函数也是基于原型链实现的，这两者必然有一些共性，甚至使用 typeof 类标识符考察类到底是一个什么东西？控制台会告诉你这是一个function。然而，Class作为一个新特性，它有函数该有的东西，它也有函...
JSDOM节点（当前标签和同级、父级、子级..之间的关系）
sunyqcn的博客
09-02 7506
1. 通过顶层document节点获取     1) document.getElementById(elementId) //根据id获得     2) document.getElementsByName(elementName) //根据name获得     3) document.getElementsByTagName(tagName) //根据标签名获得 2、通过父节点获取
CSS父级子级学习总结
bcbobo21cn的专栏
03-01 7783
CSS 父级子级 http://www.divcss5.com/rumen/r239.shtml 1、认识了解 简单讲CSS父级 CSS子级是相对而言，如一个DIV “A”被另外一个DIV “B”包裹着，这样我们就可以认 为B是A父级。 父级子级或有时把DIV嵌套关系比作父亲儿子关系，这个是为了便于理解将DIV嵌套关系形象比作父级子 级关系叫法。 2、举例说明： DIV CSS 父级子级说...
Java基础语法（二十一）：文件读写操作
分享是一种积极的生活态度~~
09-06 1万+
在 Java 中，文件读写是一项非常常见的操作。无论是读取配置文件，还是将数据存储到本地磁盘，文件读写都是必不可少的关键步骤。本文将介绍 Java 文件读写操作的基础知识和实际应用，并提供详细的代码示例。一、介绍。
组合与继承优缺点？
最新发布
08-26
### 组合与继承的优缺点对比 #### 继承的优点 继承是一种类与类之间的“is-a”关系，它允许子类复用父类的属性和方法，从而实现代码的重用。继承的优点之一是子类可以自动获得父类的接口，调用子类时不需要纠结方法命名，可以实现多态，代码显得更简洁[^3]。 #### 继承的缺点 继承的一个显著缺点是其导致的紧耦合性。父类内部对子类是公开的，如果父类发生了变化，所有子类都会受到影响，这可能导致代码的不安全性和维护困难[^3]。此外，继承可能导致类层次结构复杂化，特别是在多重继承的情况下，增加了系统的复杂性和理解难度。 #### 组合的优点 组合是一种类与类之间的“has-a”关系，它通过将一个类的对象作为另一个类的成员变量来实现功能的复用。组合的一个显著优势在于其灵活性和解耦性。与继承不同，组合允许在运行时动态地替换对象的实现，从而实现行为的动态变化。此外，组合避免了继承可能导致的类层次结构复杂化，使得系统更容易维护和扩展[^2]。 组合还提供了一种黑箱复用(black-box reuse)的方式，因为对象的内部细节是不可见的。组合类之间没有很强的依赖关系，被包含对象与容器对象之间的依赖关系比较少，优先使用对象组合有助于保持每个类被封装。这种耦合度低的设计有助于代码的维护。 #### 组合的缺点 尽管组合提供了更高的灵活性，但它也可能带来更高的代码复杂度。组合可能需要更多的代码来管理对象之间的关系，并且需要良好的接口设计以确保组件之间的交互顺畅。 #### 组合与继承的实际应用 在实际应用中，结合组合继承的优点、寄生继承的优点，目前JavaScript继承中使用的都是这个继承方法。组合继承的缺点是两次调用父级构造函数，一次是在创建子级原型时，另一次是在子级构造函数内部，而这个缺点可以通过寄生继承的特性来优化，减少一次调用父级构造函数，也就是继承父级构造函数的原型来创建子级原型[^1]。 #### 示例代码 下面是一个使用组合的例子，展示了如何通过组合来实现功能复用： ```java /** * CPU */ public class CPU { public void process() { System.out.println("CPU 处理数据..."); } } /** * 内存 */ public class Memory { public void store() { System.out.println("内存存储数据..."); } } /** * 硬盘 */ public class HardDrive { public void readWrite() { System.out.println("硬盘读写数据..."); } } /** * 计算机 */ public class Computer { private CPU cpu; private Memory memory; private HardDrive hardDrive; public Computer() { this.cpu = new CPU(); this.memory = new Memory(); this.hardDrive = new HardDrive(); } public void run() { cpu.process(); memory.store(); hardDrive.readWrite(); } public static void main(String[] args) { Computer computer = new Computer(); computer.run(); // 通过组合调用各个组件的方法 } } ``` 在上述代码中，`Computer` 类通过组合的方式包含了 `CPU`、`Memory` 和 `HardDrive` 的实例。这种设计使得 `Computer` 可以灵活地使用这些组件的功能，同时避免了继承可能导致的紧耦合问题[^1]。 ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值