0

0

javascript如何实现继承_有哪些方法可以创建子类【教程】

幻影之瞳

幻影之瞳

发布时间:2026-01-28 12:20:03

|

344人浏览过

|

来源于php中文网

原创

JavaScript中class继承必须用extends和super(),子类需显式继承单个父类并在构造函数中先调用super()再访问this;多重继承不支持,漏调或错序super()会抛ReferenceError。

javascript如何实现继承_有哪些方法可以创建子类【教程】

JavaScript 中 class 继承必须用 extendssuper()

ES6 的 class 语法不支持多重继承,子类必须显式继承一个父类,并在构造函数中调用 super()——否则会报 ReferenceError: Must call super constructor in derived class before accessing 'this'

常见错误是漏掉 super(),或在调用前访问 this(比如先写 console.log(this) 再写 super()),这都会直接抛错。

  • extends 后只能跟一个构造函数或 null(极少见)
  • super() 必须在使用 this 前调用,且仅限于子类构造函数内
  • 若父类构造函数需要参数,super(...args) 必须传对应参数

原型链继承:手动改 Child.prototype.__proto__ 或用 Object.setPrototypeOf()

这是最底层的继承方式,绕过 class 语法,直接操作原型。适合需要动态继承、或兼容老环境(如 IE11)的场景,但易出错且可读性差。

不要直接赋值 Child.prototype = Parent.prototype——这会让子类和父类共享同一原型对象,修改子类原型会影响父类。

立即学习Java免费学习笔记(深入)”;

奇布塔
奇布塔

基于AI生成技术的一站式有声绘本创作平台

下载
  • 推荐写法:Object.setPrototypeOf(Child.prototype, Parent.prototype)
  • 构造函数内部仍需手动调用 Parent.call(this, ...) 实现实例属性继承
  • 注意:V8 引擎对 Object.setPrototypeOf() 有性能警告,频繁调用会影响优化

组合继承(构造函数 + 原型链)仍是兼容性最强的通用方案

它同时解决实例属性继承(靠 Parent.call(this))和方法复用(靠原型链),没有寄生组合继承的额外函数开销,也没有 ES6 class 的语法限制。

典型结构是:子类构造函数里执行一次 Parent.call(this, ...);再用 Object.setPrototypeOf()Child.prototype = Object.create(Parent.prototype) 设置原型关系。

  • 避免在子类原型上直接写 constructor 属性,否则会丢失原始构造器引用
  • 如果用 Object.create(Parent.prototype),记得补上 Child.prototype.constructor = Child
  • 该模式在 Node.js 早期版本、微信小程序基础库 2.0+、React Native 等环境中稳定可用

不推荐用 Object.create(null) 做继承起点

虽然 Object.create(null) 创建的对象没有 toStringhasOwnProperty 等默认方法,看起来“干净”,但它也切断了所有原型链,导致无法被 instanceof 正确识别,也无法被大多数工具(如 JSON.stringify、Lodash 的 isPlainObject)正常处理。

即使你只是想避免污染,也应优先考虑 Object.create(Parent.prototype) 或标准 class 继承。

  • obj instanceof ParentObject.create(null) 实例永远返回 false
  • for...in 遍历时不会报错,但完全遍历不到任何继承方法
  • 现代框架(如 Vue 3 的响应式系统)明确要求对象必须有原型链才能代理
实际项目中,优先用 class + extends;需要兼容旧环境或特殊控制时,才回到组合继承。别为了“看起来高级”而用 Object.create(null) 或反复重写 __proto__——那只会让调试变慢、协作变难。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

418

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

535

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

311

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

77

2025.09.10

es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

103

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

195

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

222

2025.12.24

c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

236

2023.09.22

俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

158

2026.01.28

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 7.3万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 1.5万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号