讲师中心 微信公众号
AI工具推荐 视频效率加速

ES6 extends怎么实现组合继承的效果?

秋萱君_2515

秋萱君_2515

发布时间:2026-06-18 14:37:00

|

899人浏览过

|

来源于php中文网

原创

ES6的extends通过super()调用父类构造函数初始化实例属性,并自动设置原型链继承方法,天然实现组合继承目标,避免ES5中父类构造函数重复执行的问题。

es6 extends怎么实现组合继承的效果?

ES6 的 extends 本身不直接实现“组合继承”这个 ES5 模式,但它通过寄生组合式继承的底层机制,天然支持组合继承的核心目标:既复用父类构造函数初始化实例属性,又复用父类原型上的方法——而且更简洁、更可靠。

继承构造逻辑 + 共享原型方法

组合继承在 ES5 中要手动组合「借用构造函数」和「原型链继承」两步。ES6 的 extends 把这两步自动完成:

  • 调用 super() 相当于“借用构造函数”:确保子类实例拥有父类初始化的属性(如 this.name、this.colors),避免原型上引用类型被共享
  • 原型链自动连接:引擎内部执行 Object.setPrototypeOf(SubClass.prototype, SuperClass.prototype),让子类原型能访问父类所有实例方法,无需手动赋值 SubClass.prototype = Object.create(SuperClass.prototype)

必须写 super(),否则 this 不可用

子类构造函数中,super() 不只是可选语法糖,而是强制步骤:

ES6-ES11新特性相关课件
ES6-ES11新特性相关课件

ES6-ES11新特性相关课件

下载
  • 不调用 super(),子类无法获得 this,会报 ReferenceError: Must call super constructor
  • super() 的作用是创建并返回父类的 this 实例,子类在此基础上添加自有属性(比如 this.breed)
  • 参数需与父类构造函数匹配,例如 super(name, age),否则父类初始化逻辑失效

静态方法和原型方法都自动继承

组合继承关注的是实例属性 + 原型方法的双重复用,ES6 extends 同时覆盖这两层:

  • 实例方法(定义在 Parent.prototype 上)自动出现在子类实例上
  • 静态方法(定义在 Parent 类本身)也通过 Object.setPrototypeOf(Child, Parent) 被继承,可直接调用 Child.staticMethod()
  • getter/setter、Symbol 方法等同样继承,无需额外操作

避免 ES5 组合继承的重复调用问题

ES5 组合继承有个经典缺陷:父类构造函数会在原型链设置和实例初始化时各执行一次。ES6 彻底规避了这点:

  • 父类构造函数只在 super() 中调用一次,严格对应实例创建场景
  • 原型链设置是独立的元操作(修改 __proto__),不触发构造函数
  • 因此不会出现 this.colors 被意外覆盖或重复 push 的问题

热门AI工具

更多
WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2383

2023.08.11

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6190

2024.03.19

后端的主要工作内容介绍
后端的主要工作内容介绍

后端是应用程序的服务端部分,负责核心任务,如数据库交互、业务逻辑处理和响应客户端请求。想了解更多后端的相关内容,可以阅读本专题下面的文章。

5546

2024.03.19

js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

4706

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

1169

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

4644

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

920

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

1836

2023.09.04

Kratos框架HTTP与gRPC服务开发教程
Kratos框架HTTP与gRPC服务开发教程

本专题围绕Kratos框架双协议服务开发,涵盖HTTP路由与处理器编写、参数获取、gRPC服务实现与客户端调用、metadata上下文传递、encoding编解码注册、统一响应封装、超时控制与流式响应实现方法。

0

2026.10.10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ECMAScript6 / ES6---十天技能课堂
ECMAScript6 / ES6---十天技能课堂

共25课时 | 2.7万人学习

HTML5/CSS3/JavaScript/ES6入门课程
HTML5/CSS3/JavaScript/ES6入门课程

共102课时 | 10.8万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 18.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn